46. 表格结构 thead tbody tfoot

本节目标：学会用 thead、tbody、tfoot 对表格进行语义分组，理解分组的好处。

表格数据多了之后，用结构化标签分组会更清晰。HTML 提供了三个分组元素：thead、tbody、tfoot。

三个分组元素

<thead>：表头区域，通常放列标题
<tbody>：表格主体，放数据行
<tfoot>：表尾区域，通常放汇总行

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>收入</th>
      <th>支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>5000</td>
      <td>3000</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>6000</td>
      <td>3500</td>
    </tr>
    <tr>
      <td>三月</td>
      <td>5500</td>
      <td>3200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>16500</td>
      <td>9700</td>
    </tr>
  </tfoot>
</table>

分组的好处

1. 方便 CSS 样式控制

thead {
  background-color: #f0f0f0;
}
tbody {
  font-size: 14px;
}
tfoot {
  font-weight: bold;
  border-top: 2px solid #333;
}

有了分组，可以直接用元素选择器设置样式，不需要额外的 class。

2. 打印时重复表头表尾

长表格跨页打印时，可以让 thead 和 tfoot 在每一页都显示。这需要配合 CSS：

thead {
  display: table-header-group;
}
tfoot {
  display: table-footer-group;
}

3. 语义更清晰

浏览器和屏幕阅读器能识别表格的结构，知道哪些是标题、哪些是数据、哪些是汇总。

分组顺序

thead、tbody、tfoot 的书写顺序：

<table>
  <thead>...</thead>  <!-- 表头 -->
  <tfoot>...</tfoot>  <!-- 表尾（可以写在 tbody 前面） -->
  <tbody>...</tbody>  <!-- 主体 -->
</table>

Note

tfoot 可以写在 tbody 前面。浏览器渲染时会自动把 tfoot 显示在表格底部，不受代码顺序影响。

tbody 是隐含的

如果你不写 tbody，浏览器会自动创建一个。打开开发者工具查看，会发现浏览器已经帮你加上了 tbody。

但建议显式写出 tbody，这样代码更清晰，也方便 CSS 选择器定位。

多个 tbody

一个表格可以有多个 tbody，用于把数据分成逻辑组：

<table>
  <thead>
    <tr><th>班级</th><th>姓名</th><th>成绩</th></tr>
  </thead>
  <tbody>
    <tr><td colspan="3">一班</td></tr>
    <tr><td>一班</td><td>张三</td><td>90</td></tr>
    <tr><td>一班</td><td>李四</td><td>85</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3">二班</td></tr>
    <tr><td>二班</td><td>王五</td><td>88</td></tr>
    <tr><td>二班</td><td>赵六</td><td>92</td></tr>
  </tbody>
</table>

每个 tbody 可以独立设置样式，比如交替背景色。

完整示例

<table>
  <caption>月度收支表</caption>
  <thead>
    <tr>
      <th scope="col">月份</th>
      <th scope="col">收入</th>
      <th scope="col">支出</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th scope="row">合计</th>
      <td>16500</td>
      <td>9700</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>一月</td>
      <td>5000</td>
      <td>3000</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>6000</td>
      <td>3500</td>
    </tr>
  </tbody>
</table>

小结

thead 包裹表头行
tbody 包裹数据行
tfoot 包裹汇总行
分组让样式控制更方便
tfoot 可以写在 tbody 前面

下一节，我们学习合并单元格：colspan 和 rowspan。