scope属性是屏幕阅读器识别表头归属的唯一依据，必须显式设置：scope="col"管正下方所有单元格，scope="row"管右侧同tr内单元格；左上角空th不加scope；rowspan/colspan需显式声明scope；多级表头须逐层声明；同时管行列时须改用headers+id。

scope 属性不是“帮”屏幕阅读器识别表头，而是它唯一能靠的依据——没设或设错，读屏时就报不出“这是哪一列的数据”，只念数字和文字。

scope="col" 和 scope="row" 怎么选？只看管辖方向

判断不看位置、不看内容、不看视觉样式，只问一句：“它管谁？”

• scope="col"：该 <th> 正下方所有 <code><td> 都归它管。常见于 <code><thead> 里，比如“姓名”“销售额”“入职日期” <li> <code>scope="row"：该 <th> 右侧所有同 <code><tr> 内的 <code><td> 都归它管。常见于 <code><tbody> 每行第一个单元格，比如“张三”“华东区”“2024-Q1” <li>左上角空 <code><th>（<code><th></th>）不要加 scope，它既不属列也不属行，加了反而误导

  带 rowspan/colspan 的 th 必须显式设 scope

  浏览器不会根据合并自动推断语义。哪怕只是 rowspan="2" 的列标题，不加 scope="col"，屏幕阅读器大概率把第二行数据全算作第一行表头的下属，漏掉真正的列归属。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 所有 rowspan > 1 的列标题，一律用 scope="col"
  • colspan > 1 的顶层表头，如果统领一组列（如“2024年”覆盖 Q1–Q4），优先用 scope="colgroup"，但必须配合真实存在的 <colgroup span="4"></colgroup>
  • 没写 <colgroup></colgroup> 却写了 scope="colgroup"，旧版 JAWS 会直接跳过，连警告都不报

  多级表头里子级必须各自声明 scope，不能继承

  “年份 → 季度 → 月份”这种结构，屏幕阅读器不递归推导。它只认当前 <th> 的 <code>scope 值和 DOM 位置。

  • 顶层 <th scope="colgroup">2024年</th> 只负责“组”的语义，不覆盖子列
  • 中间层 <th scope="col">Q1</th> 和底层 <th scope="col">1月</th> 都得显式写 scope="col"
  • 漏掉任意一个 scope="col"，对应列的所有 <td> 就失去列归属，读屏时只报数值，不报“1月销售额” <h3>当表头同时承担行列角色时，scope 完全失效</h3> <p><code>scope 不支持多值。硬写 scope="row col" 是非法语法，浏览器会忽略整个属性。
    • 左上角单元格（第1行第1列）既要管列又要管行？必须弃用 scope，改用 headers + id
    • 给列头加 id="month"，行头加 id="product"，数据单元格写 <td headers="month product">1200</td>（空格分隔）
    • headers 优先级永远高于 scope，一旦出现，scope 被彻底绕过

    最难的不是写对某一行 scope，而是在每次插入 <th> 时都条件反射地问一句：“它管的是列，还是行？”——这个习惯一旦建立，比任何检测工具都管用。复杂表格里，<code>scope 往往只是起点，真正要靠 id 和 headers 把关系钉死。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！