七、表格标签

J_Tiffany
157 阅读2分钟

1. 表格的基本标签

表格标签的嵌套关系：table > tr > td

表格的基本标签如下：

image.png

<body>
  <table border="1">
    <tr>
       <td>姓名</td>
       <td>成绩</td>
       <td>评语</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>98分</td>
      <td>优秀</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>50分</td>
      <td>不及格</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>148</td>
      <td>/</td>
    </tr>
  </table>
</body>

image.png

2. 表格相关属性

在实际开发中，个人推荐使用 CSS 样式来设置表格的样式效果

image.png

<body>
  <table border="1" width="300px" height="80px">
    <tr>
       <td>姓名</td>
       <td>成绩</td>
       <td>评语</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>98分</td>
      <td>优秀</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>50分</td>
      <td>不及格</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>148</td>
      <td>/</td>
    </tr>
  </table>
</body>

image.png

3. 表格标题和表头单元格标签

caption 标签写在 table 标签内部；th 标签写在 tr 标签内部，用于替换 td 标签。

image.png

<body>
  <table border="1" width="300px" height="80px">
  <!-- 加标题标签是为了让标题放大加粗 -->
    <caption><h2>学生成绩</h2></caption>
    <tr>
       <th>姓名</th>
       <th>成绩</th>
       <th>评语</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>98分</td>
      <td>优秀</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>50分</td>
      <td>不及格</td>
    </tr>
  </table>
</body>

image.png

4. 表格的结构标签

表格的结构标签可以使表格的内容结构分组，突出表格的不同部分：头部、主体、底部，使语义更加清晰。

表格的结构标签内部用于包裹 tr 标签，可以省略。

image.png

<body>
  <table border="1">
    <caption><h2>学生成绩</h2></caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>98分</td>
        <td>优秀</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>李四</td>
        <td>50分</td>
        <td>不及格</td>
      </tr>
    </tfoot>
  </table>
</body>

image.png

5. 合并单元格

合并单元格之前，要明确合并哪几个单元格，通过左上原则，确定保留哪些删除哪些（即上下合并，只保留最上的，删除其他；左右合并，则保留最左的，删除其他），然后给保留的单元格设置跨行合并（垂直合并）或跨列合并（水平合并）。

image.png

需要注意的是，只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（即不能跨：thead、tbody、tfoot）

<body>
  <table border="1" width="300px" height="80px">
    <caption><h2>学生成绩</h2></caption>
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td rowspan="2">98分</td>
        <td>优秀</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>优秀</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>李四</td>
        <td colspan="2"> / </td>
      </tr>
    </tfoot>
  </table>
</body>

image.png

avatar
文章
阅读
粉丝