scope属性仅用于th元素，取值col、row、colgroup、rowgroup，分别定义表头管辖列、行、列组或行组，提升屏幕阅读器对表格结构的理解；td上设置无效。
Scope 属性用于告诉浏览器和辅助技术（如屏幕阅读器）：某个表头单元格（<th>）具体“管”哪一行或哪一列的数据单元格（<td>）。它不作用于 <td>，只用于 <th>，且对复杂表格的可访问性至关重要。
Scope 的取值与对应关系
scope 有四个合法值，每个值定义了表头的作用范围：
-
row：该
<th>是所在行的标题，影响本行所有后续<td>（直到下一个<th scope="row">或行结束） -
col：该
<th>是所在列的标题，影响本列中下方所有<td>（直到表格底部或遇到新的列头） -
rowgroup：该表头适用于整个
<tbody>或<thead>中的当前行组（常用于多级行标题，如带分组的销售报表） -
colgroup：该表头适用于整个
<colgroup>定义的列组（适合列结构明确、含合并列的复杂表）
典型场景：二维表头（行列双维度）
当表格既有行标题又有列标题时，必须为每个 <th> 明确 scope，否则屏幕阅读器无法建立正确映射。例如一个学生成绩表：
<table>
<thead>
<tr>
<th scope="col">学生</th>
<th scope="col">语文</th>
<th scope="col">数学</th>
<th scope="col">英语</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">张三</th>
<td>85</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<th scope="row">李四</th>
<td>90</td>
<td>87</td>
<td>94</td>
</tr>
</tbody>
</table>
这里第一行所有 <th> 用 scope="col" 表明它们是列标题；每行第一个 <th> 用 scope="row" 表明它是该行的行标题。辅助技术就能准确读出：“张三，语文 85，数学 92…”
立即学习“前端免费学习笔记（深入）”；
处理多层表头（如带年级/班级的汇总表）
若表头分两行（如第一行是“年级”，第二行是“班级”+“科目”），建议结合 <colgroup> 和 scope="colgroup"：
<table>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th colspan="2" scope="colgroup">高一年级</th>
<th colspan="2" scope="colgroup">高二年级</th>
</tr>
<tr>
<th scope="col">1班</th>
<th scope="col">2班</th>
<th scope="col">1班</th>
<th scope="col">2班</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">语文平均分</th>
<td>78</td>
<td>82</td>
<td>85</td>
<td>80</td>
</tr>
</tbody>
</table>
顶层 <th scope="colgroup"> 告诉辅助工具：它统领接下来的 2 列（由 <colgroup span="2"> 定义），下层 scope="col" 再细化到具体列。这样逻辑层级清晰，不会混淆。
常见误区与检查要点
scope 不是装饰属性，错误使用会直接损害可访问性：
- 不要给
<td>添加 scope —— 浏览器忽略，W3C 验证失败 - 避免在简单表中滥用
rowgroup或colgroup，无明确分组时优先用row/col - 当使用
rowspan或colspan时，scope 必须与视觉结构一致；比如一个横跨两列的行标题，仍应设scope="row"，而非试图用colspan替代 scope - 用浏览器开发者工具检查
aria-describedby或使用屏幕阅读器（如 NVDA + Firefox）实测朗读效果，确认是否读出预期的行列关系
