scope="colgroup"必须配合结构才生效，它仅在显式包裹对应列数时才表示管辖关系，不能用colspan替代；scope="rowgroup"仅限tbody内使用，且需与实际行组语义匹配。
scope="colgroup" 必须配 才生效
很多人写 <th scope="colgroup">2024年</th> 后发现屏幕阅读器根本不认，问题几乎总是出在没配真实的 <colgroup></colgroup> 结构。scope="colgroup" 不是视觉分组开关，而是语义绑定信号：它只在 <colgroup span="4"></colgroup> 显式包裹了 4 列的前提下，才表示“这个表头管这 4 列”。
常见错误现象：<th scope="colgroup">Q1</th> 单独放在 <thead> 里，下方没有 <code><colgroup></colgroup>，结果被所有主流读屏软件忽略。
- 必须先定义
<colgroup span="3"></colgroup>（或多个<col>）来划定列范围 <th scope="colgroup"> 要放在该 <code><colgroup></colgroup>对应的列位置上（比如三列宽的<colgroup></colgroup>，上方<th> 就得跨三列或对齐首列） <li>不能用 <code>colspan替代<colgroup></colgroup>—— 后者是结构层，前者只是渲染层- 必须配合
colspan或与<tbody> 内列数一致，否则语义断裂 <li>NVDA、JAWS 当前版本不会播报 “进入行组”，但它能确保 DOM 中的父子关系可被解析工具识别</li> <h3>跨多行/跨多列的表头别硬套 scope</h3> <p>当一个 <code><th rowspan="3" colspan="2"> 同时覆盖 3 行 2 列时，<code>scope="col"或scope="row"都无法准确表达它的管辖范围。此时 scope 已超出设计能力，强行使用会导致读屏错乱（比如把第三行数据全归到第一列下）。真正可行的做法是放弃 scope，改用
headers+id显式绑定：- 把合并单元格拆成多个语义明确的
<th id="q1-sales">、<code><th id="q1-ops"> 等 <li>每个 <code><td> 用 <code>headers="q1-sales q1-ops"明确列出所归属的所有表头 ID -
headers优先级高于scope，且 W3C 明确推荐为复杂表格兜底方案
左上角总标题不能加 scope
表格最左上角那个单元格（
<thead><tr><th></th></tr></thead>）既不描述某列，也不描述某行，它是二维结构的原点。加scope="col"或scope="row"都会误导辅助技术，认为它“管第一列”或“管第一行”，从而破坏后续所有列/行的自动推断链。正确做法是保留空
<th>，不设任何 <code>scope，也不替换成<td> —— 后者直接切断语义连接，比留空更糟。 <p>最容易被忽略的细节：哪怕表格只有两列、三行，只要用了 <code>rowspan或colspan，就必须检查每个<th> 是否有匹配的 <code>scope；而一旦出现行列双维度合并，headers就不是“可选优化”，是唯一可靠路径。 - 把合并单元格拆成多个语义明确的
scope="rowgroup" 只能在 tbody 内部使用
scope="rowgroup" 不是给任意“行标题”用的。它只对嵌套在 <tbody> 标签内部的 <code><th> 有效，且该 <code><th> 必须是整组行的统称（比如“华东区订单”），不能出现在 <code><thead> 或 <code><tfoot> 中。
<p>典型误用：<code><thead><tr><th scope="rowgroup">汇总</th></tr></thead> —— 这个属性会被完全忽略，因为 <thead> 不构成“行组”语义容器。
<ul>
<li>正确位置：<code><tbody><tr><th scope="rowgroup" colspan="5">华北区</th></tr></tbody>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
