必须手动加scope的场景包括：含rowspan/colspan的th、多层表头、动态生成时索引错乱；scope="col"管正下方td，scope="row"管同行右侧td；左上角空th不加scope；复杂结构需改用headers+id绑定。

不设 scope，屏幕阅读器就只能靠位置猜表头管谁——它不报错，但用户听到的是错的归属关系。

什么时候必须手动加 scope，不能依赖浏览器自动推断

浏览器对 th 的语义推断极其有限，尤其在非标准结构下基本失效。以下情况必须显式声明：

• 任何带 rowspan 或 colspan 的 th（哪怕只是 rowspan="2"）
• 表格含多个 <tbody>、<code><thead> 或用了 <code><colgroup></colgroup>
• 第一行和第一列同时存在表头（即二维表头），例如“学生”+“科目”结构
• 动态生成时循环索引没区分行/列方向，导致 scope 被批量写错

scope="col" 和 scope="row" 怎么选：只看“它管谁”，不看“它在哪一行”

错误常源于凭文字内容或视觉位置瞎猜。正确判断方式非常机械：


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• scope="col" → 该 th 正下方所有 td 都归它管（典型位置：<thead> 内的 <code>tr 中）
• scope="row" → 该 th 同一行右侧所有 td 都归它管（典型位置：<tbody> 每行第一个 <code>th）
• 左上角那个空 <th></th> 不要加 scope，它既不属列也不属行，加了反而误导
• 把第一列姓名 <th>张三</th> 设成 scope="col"，屏幕阅读器会把整列数据都当成“张三”的子项，而非“张三”这一行的数据

scope="colgroup" 和 scope="rowgroup" 不是装饰，用错等于没写

这两个值有严格结构前提，不是为“看起来分组了”而加：

立即学习“前端免费学习笔记（深入）”；

• scope="colgroup" 必须配合 <colgroup span="N"></colgroup> 使用，且 th 必须位于该 colgroup 所覆盖的列范围内
• scope="rowgroup" 必须放在 <thead>、<code><tbody> 或 <code><tfoot> 内部的 <code>th 中，且该 th 是整个分组的总标题（如 <tbody class="urgent"><tr><th scope="rowgroup">紧急订单</th></tr></tbody>）
• 没有 <colgroup></colgroup> 却硬加 scope="colgroup"，旧版 JAWS 会直接忽略；没包 <tbody> 却设 <code>scope="rowgroup"，等同于没写

  复杂表格里真正难的不是语法，而是每加一个 th 都得问一句：“它管哪几行？哪几列？”

  当出现跨多行的 th、多层嵌套 thead、或某个 th 同时承担行列双重角色时，scope 就不再可靠。这时候必须切换到 headers + id 显式绑定：

  • 给每个关键 th 加唯一 id（如 id="sales"、id="q1-2024"）
  • 在对应 td 上用空格分隔多个 id：headers="sales q1-2024"
  • headers 优先级永远高于 scope，且一旦 id 重复或不存在，整个绑定就失效