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