scope属性仅适用于简单线性表格，跨行跨列或多层表头时必须改用headers+id显式绑定；scope="col"用于第一行标题（管整列），scope="row"用于第一列标题（管整行）；左上角总标题不可加scope；headers优先级高于scope，且需确保id唯一有效。
scope 属性只适用于简单线性表格，一遇到跨行、跨列或多层表头就失效；真正能兜底的只有 headers + id 显式绑定。
scope="col" 和 scope="row" 怎么选？看它管的是“竖着一列”还是“横着一行”
判断依据非常直接：如果 <th> 在第一行（比如“销售额”“部门”），它描述的是整列数据，就用 scope="col"；如果在第一列（比如“张三”“李四”），它描述的是整行数据，就用 scope="row"。
常见错误现象：
- 把第一列的姓名表头写成
scope="col"，屏幕阅读器会把“张三”当成“第1列标题”，读到“销售额:2024年Q1”时却关联不到“销售额”，而是错误绑定到“张三”上 - 动态生成表格时，在循环里写
if (i === 0) scope="row"却没区分是行索引还是列索引，结果所有首行表头都被当成了行标题 - 左上角那个总标题单元格（如“销售数据汇总”）乱加
scope——它既不属某列也不属某行，加了反而误导
什么时候必须放弃 scope，改用 headers + id？
当表格出现以下任一情况时，scope 就不再可靠：
立即学习“前端免费学习笔记（深入）”；
-
rowspan或colspan跨单元格 - 多层
<thead>嵌套（比如年份 → 季度 → 月份） -
<th>不在标准行列位置（例如右对齐的列标题、斜向表头） - 某个
<th>同时是行头和列头（如第一行第一列）——scope不支持多值
这时必须手动建立映射：
- 给每个相关
<th>加唯一id（如id="sales"、id="dept"、id="q1-2024"） - 在对应
<td>上用空格分隔多个id：headers="sales dept q1-2024" - 别依赖视觉对齐来猜测关系——屏幕阅读器只认
headers值
headers 和 scope 同时存在时，谁起作用？
headers 优先级永远高于 scope。WAI-ARIA 规范明确要求：显式 headers > 隐式 scope。
这意味着：
- 如果一个
<td>同时有scope和headers，浏览器和读屏软件会忽略scope，只按headers指向的<th id>列表解析归属关系 - 调试时可打开 Chrome DevTools 的 Accessibility 面板，检查 “Related headers” 是否列出预期的
id - 如果
id重复或不存在，headers就被完全忽略，屏幕阅读器不会读出任何关联信息
复杂表格里最容易被忽略的细节
真正难的不是写对 scope 或 headers，而是坚持在每一处 <th> 出现时都问一句：“它管的是行还是列？”——这个习惯比任何工具都管用。
更隐蔽的问题是：分组标题（如“Hospitalization”）如果只是视觉加粗或 <td colspan="4">，屏幕阅读器根本不知道它是节标题。正确做法是把它包裹进 <h2> 并放在 <tbody> 首行，再配合 aria-labelledby 或 headers 关联后续数据行。
