HTML表格表头标签详解 - thead、tbody、tfoot与caption使用指南

<table>
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>—</td>
      <td>汇总值</td>
    </tr>
  </tfoot>
</table>

caption {
  caption-side: top;    /* 标题在表格上方（默认值） */
  caption-side: bottom; /* 标题在表格下方 */
}

<table>
  <caption>2026年度员工信息统计表</caption>
  <thead>
    <tr>
      <th>工号</th>
      <th>姓名</th>
      <th>部门</th>
      <th>入职日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>E001</td>
      <td>张伟</td>
      <td>技术部</td>
      <td>2023-03-15</td>
    </tr>
    <tr>
      <td>E002</td>
      <td>李娜</td>
      <td>市场部</td>
      <td>2022-07-01</td>
    </tr>
    <tr>
      <td>E003</td>
      <td>王磊</td>
      <td>设计部</td>
      <td>2024-01-10</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">共计 3 名员工</td>
    </tr>
  </tfoot>
</table>

<table>
  <caption>2026年第一季度财务报表（单位：万元）</caption>
  <thead>
    <tr>
      <th>项目</th>
      <th>1月</th>
      <th>2月</th>
      <th>3月</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4" style="font-weight:bold;background:#d5e8d4;">收入</td>
    </tr>
    <tr>
      <td>产品销售</td>
      <td>120.5</td>
      <td>135.2</td>
      <td>148.8</td>
    </tr>
    <tr>
      <td>服务收入</td>
      <td>45.0</td>
      <td>52.3</td>
      <td>58.7</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td colspan="4" style="font-weight:bold;background:#f8d7da;">支出</td>
    </tr>
    <tr>
      <td>人力成本</td>
      <td>60.0</td>
      <td>60.0</td>
      <td>65.0</td>
    </tr>
    <tr>
      <td>运营费用</td>
      <td>25.3</td>
      <td>28.7</td>
      <td>30.1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>净利润</td>
      <td>80.2</td>
      <td>98.8</td>
      <td>112.4</td>
    </tr>
  </tfoot>
</table>

/* 标题在表格下方 */
.table-bottom-caption caption {
  caption-side: bottom;
  font-size: 0.9em;
  color: #7f8c8d;
  padding: 8px;
  font-style: italic;
}
/* 标题在表格上方 */
.table-top-caption caption {
  caption-side: top;
  font-size: 1.1em;
  font-weight: bold;
  color: #2c3e50;
  padding: 10px;
}

<!-- 不推荐：缺少分组 -->
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

<!-- 推荐：使用分组标签 -->
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

<!-- 不推荐 -->
<table>
  <thead>...</thead>
  <caption>标题</caption>
</table>

<!-- 推荐 -->
<table>
  <caption>标题</caption>
  <thead>...</thead>
</table>

<!-- 规范的表格结构 -->
<table>
  <!-- 1. caption 紧跟 table 开始标签 -->
  <caption>季度销售数据汇总</caption>

  <!-- 2. thead 包含列标题 -->
  <thead>
    <tr>
      <th>季度</th>
      <th>销售额（万元）</th>
      <th>同比增长</th>
    </tr>
  </thead>

  <!-- 3. tbody 包含主体数据 -->
  <tbody>
    <tr>
      <td>Q1</td>
      <td>320</td>
      <td>+12%</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>385</td>
      <td>+18%</td>
    </tr>
  </tbody>

  <!-- 4. tfoot 放在 tbody 之后（HTML5 推荐） -->
  <tfoot>
    <tr>
      <td>合计</td>
      <td>705</td>
      <td>+15%</td>
    </tr>
  </tfoot>
</table>

caption {
  text-align: left;
  padding: 8px 0;
  width: 100%;
  box-sizing: border-box;
}

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

<tbody class="income-section">
  <!-- 收入数据 -->
</tbody>
<tbody class="expense-section">
  <!-- 支出数据 -->
</tbody>

.income-section tr:first-child td {
  background-color: #d5e8d4;
  font-weight: bold;
}
.expense-section tr:first-child td {
  background-color: #f8d7da;
  font-weight: bold;
}