th 与 scope

用表头单元格明确行列关系

概念说明

th 表示表头单元格，scope 用来说明表头关联的范围。常见值包括 col（列头）和 row（行头）。

表头的概念：表头既包括“列头”，也包括“行头”，两者都是表格的标题单元格。

直白解释：scope 对视觉样式几乎没有影响，它的作用是把“这格表头管哪一行/哪一列” 说明白，方便辅助技术或数据解析。若只做视觉展示，scope 不会改变页面效果，但依旧建议保留语义。

常见理解误区：表头不只存在于 thead。tbody 里的第一列也可以是行表头，应使用 th scope="row" 表示“这一整行的标题”。

常见坑：scope 只适用于结构简单的表格。当存在多级表头或合并单元格时，应该用 headers + id 建立精确关系，否则屏幕阅读器可能读错上下文。

scope="col"：该表头作用于整列
scope="row"：该表头作用于整行
scope="colgroup"：列组表头，范围由 colspan 决定
scope="rowgroup"：行组表头，范围由 rowspan 决定

基础语法

<th scope="col">姓名</th>
<th scope="row">张三</th>

<th scope="colgroup" colspan="2">2024</th>
<th scope="rowgroup" rowspan="3">华东大区</th>

演示

scope 示例

成员	角色	状态
林晓	产品经理	在岗
李宁	前端开发	休假
周琪	设计师	在岗

对视觉效果没有差异，但给表格“标注关系”：列头/行头对应哪一组数据。

列组表头（colgroup）

指标	2024		2025
类别	Q1	Q2	Q1	Q2
订单量	120	150	130	170

<thead>
  <tr>
    <th scope="col">成员</th>
    <th scope="col">角色</th>
    <th scope="col">状态</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">林晓</th>
    <td>产品经理</td>
    <td>在岗</td>
  </tr>
</tbody>

<th scope="colgroup" colspan="2">2024</th>
<th scope="colgroup" colspan="2">2025</th>