thead / tbody / tfoot

使用语义分区让表格结构更清晰

概念说明

表格可通过 thead、tbody、tfoot 分区，明确表头、主体与表尾。这不仅提升可读性，还方便浏览器和辅助技术理解内容。

常见坑：tfoot 在源码中可以放在 tbody 之前，浏览器会自动调整渲染顺序。同一张表允许多个 tbody，用于分组数据，但脚本遍历时要注意层级变化。

thead：列标题区域
tbody：数据主体区域
tfoot：汇总或备注区域

基础语法

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

演示

分区表格预览

项目	数量	金额
设计服务	2	¥ 8,000
开发服务	1	¥ 12,000
维护服务	3	¥ 4,500
总计		¥ 24,500

多个 tbody 分组

团队	任务	状态
产品组
需求梳理	任务拆解	进行中
研发组
接口联调	功能开发	排期中
设计组
视觉规范	组件评审	已完成

<table>
  <thead>
    <tr>
      <th>项目</th>
      <th>数量</th>
      <th>金额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>设计服务</td>
      <td>2</td>
      <td>¥ 8,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计</td>
      <td>¥ 24,500</td>
    </tr>
  </tfoot>
</table>

<thead>...</thead>
<tbody>
  <tr><th colspan="3">产品组</th></tr>
  <tr>...</tr>
</tbody>
<tbody>
  <tr><th colspan="3">研发组</th></tr>
  <tr>...</tr>
</tbody>