前端学习之基础篇——表格

最新推荐文章于 2025-11-08 17:08:04 发布

原创最新推荐文章于 2025-11-08 17:08:04 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5 #前端

前端学习篇同时被 2 个专栏收录

8 篇文章

订阅专栏

基础篇

7 篇文章

订阅专栏

前端学习之基础篇——表格

HTML表格

1、表格的基本结构

table: 表格最外层大标签
tr: 表格每一行
td: 表格每个单元格，默认居左

<body>
    <!-- 
        表格
            表格结构标签
                table 表格大标题
                tr 表格每一行
                td 表格单元格
                th 自带居中效果
                thead 头部：表格的列标题
                tbody 主体：表格的数据
                tfoot 底部：表格的脚注之类的东西
                caption 表格标题
            表格自带属性
                border 表格边框
                cellpadding 设置表格内容到边框的距离
                cellspacing 设置表格边框之间的距离
                align 水平对齐方式 left/right/center
                valign 垂直对齐方式 top/bottom/middle
            css属性
                border-collapse:collapse设置表格为单一边框（cellspacing会失效）
     -->
    <table border="1" cellpadding="10" cellspacing="10" style="border-collapse: collapse;">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>小蓝</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小绿</td>
            <td>男</td>
            <td>19</td>
        </tr>
    </table>
</body>

2、表格的完整结构

thead: 表格的头部，通常写表格每一列的标题
tbody: 表格的主体，写表格的数据
tfoot: 表格的底部，写表格的脚注
th: 表格标题的单元格。默认居中
caption: 表格的标题

<body>
    <table border="1" style="border-collapse:collapse" width="300" height="200">
        <!-- 表格的标题 -->
        <caption>学生信息统计表</caption>
        <!-- 头部：表格的列标题 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!-- 主体：表格的数据 -->
        <tbody>
            <tr>
                <td align="center" >小蓝</td>
                <td valign="bottom">男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小蓝</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小蓝</td>
                <td>男</td>
                <td>18</td>
            </tr>
        </tbody>
        <!-- 底部：表格的脚注之类的东西 -->
        <tfoot>

        </tfoot>
    </table>
</body>

3、表格自带属性

border: 表格的边框
cellpadding: 单元格的内容与边框之间的空间
cellspacing: 单元格与单元格之间的空间
align: 单元格的水平对齐方式
valign: 单元格的垂直对齐方式

4、表格的css属性

border-collapse
- collapse: 表格设置为单一边框，cellspacing失效

5、表格的合并

行合并
- rowspan
- 两行合并为一行，上下合并
列合并
- colspan
- 两列合并为一列，左右合并

<body>
    <!-- 
        行合并 rowspan
        列合并 colspan
     -->
     <table border="1" width="300" heigth="200">
         <tr>
             <td colspan="2">1</td>
             <!-- <td>2</td> -->
             <td>3</td>
         </tr>
         <tr>
             <td>4</td>
             <td>5</td>
             <td rowspan="2">6</td>
         </tr>
         <tr>
             <td>7</td>
             <td>8</td>
             <!-- <td>9</td> -->
         </tr>
     </table>
</body>