table表格的定义及常用属性

最新推荐文章于 2024-07-05 22:38:16 发布

wangboused

最新推荐文章于 2024-07-05 22:38:16 发布

阅读量4.6k

点赞数 3

分类专栏： table table的基本属性文章标签：前端

本文链接：https://blog.csdn.net/weixin_44933684/article/details/106799775

版权

table 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

table的基本属性

1 篇文章 0 订阅

订阅专栏

 <!-- 定义表格
        单元格没有设置宽度 会平分整个表格宽度，假如表格宽度
        未设置则靠内容撑开
        th表示表头单元格 默认会让文本加粗水平垂直居中
        td默认水平居左 垂直居中
    -->
    <table border="1" width="500" height="400">
        <!--thead定义表格头部-->
        <thead>
            <tr height="100">
                <th width="100">姓名</th>
                <th>电话</th>
                <th>年龄</th>           </tr>                                                                                                                                                                                                                                                                                                                                                                                                     
        </thead>
        <!--thead定义表格主体  假如不写  默认会自动添加-->
        <tbody>
            <!-- tr 表示行 -->
            <tr>
                <!--td 单元格 -->
                <td width="150">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
            </tr>
        </tbody>
        <!--表格尾部-->
        <tfoot>
            <tr height="60">
                <td>尾部</td>
                <td>尾部</td>
                <td>尾部</td>
            </tr>
        </tfoot>
    </table>

<body>
    <!-- 定义表格
         table相关属性 
            border="1"
            width
            height
            cellspacing 单元格间距
            cellpadding 单元格内容与边框距离
            align="left" center/right
        单元格相关属性
           width/height
           align="left" center/right
           valign top/middle/bottom

        caption定义表格标题   
    -->
    <!-- <h2>学生信息表</h2> -->
    <table border="1" width="500" height="400" align="center" cellspacing="0" cellpadding="6">
        <caption>学生信息表</caption>
        <!--thead定义表格头部-->
        <thead>
            <tr height="100">
                <th width="100" align="left">姓名</th>
                <th>电话</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!--thead定义表格主体  假如不写  默认会自动添加-->
        <tbody>
            <!-- tr 表示行 -->
            <tr>
                <!--td 单元格 -->
                <td width="150">1-1</td>
                <td>1-2</td>
                <td rowspan="2">1-3</td>
            </tr>
            <tr align="right">
                <td valign="bottom">2-1</td>
                <td>2-2</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
            </tr>
        </tbody>
        <!--表格尾部-->
        <tfoot>
            <tr height="60">
                <td colspan="2" align="center">尾部</td>
                <!-- <td>尾部</td> -->
                <td>
                    <table border="1">
                        <tr>
                            <td>aaa</td>
                            <td>bbb</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tfoot>
    </table>
</body>