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