scope="colgroup"必须配合才生效，否则屏幕阅读器无视；多级列头中子级须显式设scope="col"；rowspan表头必须设scope；scope不支持多值，应改用headers+id。
scope="colgroup"必须配合才生效
很多人写了scope="colgroup"却没加<colgroup></colgroup>，结果屏幕阅读器完全无视——它不是“语义开关”，而是结构契约。浏览器只在<colgroup></colgroup>真实存在且<th scope="colgroup"></th>位于其覆盖列范围内时，才认可这个作用域声明。
- 错误写法：
<th colspan="4" scope="colgroup">2024年</th>（无<colgroup></colgroup>） - 正确写法：先定义
<colgroup span="4"></colgroup>，再让<th scope="colgroup">2024年</th>出现在对应列位置 - 旧版 JAWS 会直接跳过没配
<colgroup></colgroup>的scope="colgroup"，连警告都不报
多级列头里子级必须用scope="col"，不能继承父级
“年份 → 季度 → 月份”这种三级结构，顶层scope="colgroup"只管组，中间和底层必须各自声明scope="col"。屏幕阅读器不递归推导，它只认当前<th>的<code>scope值和 DOM 位置。
- 第二行的
<th scope="col">Q1</th>必须显式写，不能指望上层<th scope="colgroup">2024年</th>自动覆盖 - 如果漏掉某一个
scope="col"，该列所有<td>将失去列归属，读屏时只报数值，不报“Q1销售额” <li>动态渲染时别用“父级有scope就跳过子级”逻辑——每个<code><th>都要独立判断并设置 <h3>当表头同时承担行列角色时，scope完全失效</h3> <p>左上角单元格（第1行第1列）既要管列又要管行？<code>scope不支持多值，硬写scope="row col"是非法语法，浏览器会忽略整个属性。此时唯一解法是弃用scope，改用headers+id。- 给列头加
id="month"，行头加id="product" - 数据单元格写
<td headers="month product">1200</td>（空格分隔，不是逗号） -
headers优先级永远高于scope，一旦出现，scope被彻底绕过
rowspan超过1的表头必须显式设scope，哪怕只是2
哪怕只是
rowspan="2"的列标题，不加scope="col"，屏幕阅读器大概率把第二行数据全算作第一行表头的下属，漏掉真正的列关系。这不是“建议”，是 HTML5 规范强制要求的语义绑定。- 错误：
<th rowspan="2">销售额</th> - 正确：
<th rowspan="2" scope="col">销售额</th> -
scope写在<td>上无效——HTML5 明确禁止，所有浏览器都会静默丢弃 真正容易被忽略的是：只要表格用了<code>rowspan或colspan，哪怕只有一处，你就已经跨过了scope的适用边界；此时该立刻切换到headers+id方案，而不是试图用scope="colgroup"打补丁。
- 给列头加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
