HTML 的 ＜thead＞ 元素

1. 引言

在 HTML 表格中，<thead> 元素用于定义表格的表头分组。它通常与 <tbody>（表体）和 <tfoot>（表尾）一起使用，将表格内容按语义划分为三个部分。合理使用 <thead> 不仅能让 HTML 结构更清晰，还能提升无障碍访问体验，并为 CSS 样式和 JavaScript 操作提供便利。

2. 基本语法

<thead> 元素必须作为 <table> 的直接子元素，并且应出现在 <tbody> 和 <tfoot> 之前。其内部通常包含一个或多个 <tr> 行，行内使用 <th> 定义表头单元格。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

3. 与 tbody、tfoot 的分工

一个完整的语义化表格可以由三个分组元素构成：

• <thead>：表头，通常包含列标题，可重复出现在打印的每一页顶部。
• <tbody>：表体，存放主要数据行，一个表格可包含多个 <tbody>。
• <tfoot>：表尾，通常放置汇总信息，如合计、平均值等。

<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>销量</th>
      <th>金额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>键盘</td>
      <td>120</td>
      <td>¥6,000</td>
    </tr>
    <tr>
      <td>鼠标</td>
      <td>200</td>
      <td>¥5,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>320</td>
      <td>¥11,000</td>
    </tr>
  </tfoot>
</table>

4. 使用场景与注意事项

4.1 长表格滚动时固定表头

当表格数据较多、页面需要滚动时，可以结合 CSS 让 <thead> 固定在可视区域顶部，提升阅读体验。

thead th {
  position: sticky;
  top: 0;
  background: #f5f5f5;
}

4.2 无障碍访问

屏幕阅读器会依据 <thead> 识别表头区域，配合 <th scope="col"> 或 <th scope="row"> 可更准确地描述单元格与表头的关系。

<thead>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">年龄</th>
  </tr>
</thead>

4.3 注意事项

• <thead> 内部只能包含 <tr> 元素，不能直接放置 <td> 或其它内容。
• 一个 <table> 中最多只能有一个 <thead>。
• 若省略 <thead>，浏览器会自动将表格首行视为表头行，但显式使用语义更清晰。

5. 总结

<thead> 是 HTML 表格语义化的重要组成部分，它把表头从数据中分离出来，便于样式控制、脚本操作和无障碍访问。在实际开发中，建议始终显式使用 <thead>、<tbody> 和 <tfoot> 三个分组元素，让表格结构更规范、更易维护。