scope属性仅适用于单层表头的简单表格，复杂表格必须用headers+id组合实现可靠数据关联；多级表头、跨行列合并等场景需显式绑定，且必须配caption提供整体语义。
scope 属性不是“定义数据关联”的万能开关，它只在简单表格中起作用；真正可靠的数据关联必须靠 headers + id 组合来实现。
scope="col" 和 scope="row" 仅适用于单层表头
当表格只有第一行是列标题、第一列是行标识时，scope 才能被屏幕阅读器稳定识别。比如：
<table>
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">城市</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">张三</th>
<td>28</td>
<td>北京</td>
</tr>
</tbody>
</table>
-
scope="col"告诉读屏：这一列所有<td>都属于“姓名”列 -
scope="row"告诉读屏：这一行所有<td>都属于“张三”这行 - 但一旦出现
colspan="2"或嵌套<thead>，scope就无法准确表达归属关系
headers 属性才是复杂表格的唯一可靠方案
多级表头、跨行列合并、分组汇总类表格，必须用 headers 显式绑定每个 <td> 到对应 <th id="xxx">。
- 每个
<th>必须带合法id（不能含空格、不能重复） -
<td headers="year q1 beijing">中的多个id必须用空格分隔，不能用逗号或引号 - 动态渲染时，要确保
<th id="xxx">在<td headers="xxx">渲染前已挂载到 DOM - 浏览器不会自动推断
colspan覆盖范围，不写headers就等于没关联
scope="colgroup" 和 scope="rowgroup" 极少真正生效
这两个值理论上用于关联 <colgroup> 或 <tbody> 分组，但实际支持度极低：
立即学习“前端免费学习笔记（深入）”；
- NVDA、VoiceOver 对
scope="colgroup"基本忽略，即使配合<colgroup>也常无播报 -
scope="rowgroup"要求严格匹配<tbody>边界，稍有嵌套或 JS 动态插入就会失效 - MDN 明确标注：该值“很少被辅助技术使用”，建议直接放弃，改用
headers
最容易被忽略的一点：即使写了 scope 或 headers，如果表格缺少 <caption>，屏幕阅读器用户仍可能不知道这张表整体是干什么的——caption 是语义链的第一环，缺了它，后续所有关联都像没有地基的楼。
