表格中scope="col"用于列标题单元格,标识其正下方整列数据;scope="row"用于行标题单元格,标识其右侧同行列数据;左上角空单元格不加scope,合并单元格须显式声明,复杂结构应改用headers+id。

scope="col" 用在顶部列标题行
当你把 <th> 放在 <code><thead> 里、作为表格第一行的单元格(比如“姓名”“年龄”“城市”),它描述的是**正下方一整列数据**,必须设 <code>scope="col"。不设的话,屏幕阅读器读到第二行第二个 <td> 时,可能只报“25”,而不是“年龄:25”。
<ul>
<li>常见位置:<pre class="brush:php;toolbar:false;"><thead><tr><th scope="col">产品</th><th scope="col">销量</th></tr></thead></li>
<li>即使该列有 <code>rowspan="2"</pre>,也得显式写 <code>scope="col",否则读屏软件会漏掉第二行对应列的数据
scope——<th> 的语义不靠样式生效
<h3>scope="row" 用在每行最左侧的行标题</h3>
<p>当 <code><th> 出现在 <code><tbody> 每行第一个位置(比如“张三”“李四”“Q1汇总”),它描述的是**同一行右侧所有 <code><td>**,应设 <code>scope="row"。
- 典型结构:
<tr> <th scope="row">张三</th> <td>85</td> <td>92</td> </tr> - 左上角那个空
<th>(<code><th></th>)别加scope,它既不属行也不属列,加了反而误导辅助技术 - 动态渲染时,别用
v-for或.map()只传 label 就完事——必须根据上下文判断是列循环还是行循环,分别注入scope="col"或scope="row" -
rowspan超过 1 的列标题 → 统一用scope="col" -
colspan覆盖多列的顶层标题(如“2024年”跨 Q1–Q4)→ 优先考虑scope="colgroup"+<colgroup span="4"></colgroup>,而不是硬塞scope="col" - 如果用了
scope="colgroup"却没配真实<colgroup></colgroup>结构,JAWS 和 NVDA 都会直接忽略该声明 - 正确做法:给合并表头加
id,比如<th id="q1-revenue">Q1营收</th> - 每个
<td> 显式绑定多个表头:<code><td headers="q1-revenue q1-cost"></td> -
headers优先级高于scope,且支持一对多、跳格、非线性关联
真正容易被忽略的不是“怎么写”,而是“什么时候不该写”:左上角空单元格不加
带 rowspan/colspan 的 th 必须手动声明 scope
浏览器对合并单元格的语义推断极不可靠。一个 rowspan="3" 的列标题,如果不写 scope="col",屏幕阅读器很可能把第三行数据全归到第一行表头下,导致归属错乱。
复杂表格别硬套 scope,改用 headers + id
当出现跨多行+跨多列的 <th rowspan="2" colspan="3">,或者多层 <code><thead>、右对齐列标题等非标准布局时,<code>scope 已经超出设计能力。强行使用会导致读屏错报,且 WCAG 检测工具不会报错,但视障用户实际无法理解数据关系。
立即学习“前端免费学习笔记(深入)”;
scope,<td> 上永远别用 <code>scope(HTML5 不支持),以及动态生成时 scope 类型必须随数据结构走,不能靠位置硬猜。



















