th 的 scope 属性必须显式声明表头作用范围：scope="col"用于列标题（管下方整列），scope="row"用于行标题（管右侧同行列），复杂嵌套表头则需改用 headers/id 绑定。
th 标签的 scope 属性到底怎么用？
th 默认只表示“这是表头”，但浏览器和读屏软件无法自动判断它管哪一行/列。必须靠 scope 显式声明作用范围，否则语义不完整、无障碍支持失效。
常见错误是直接写 <th>姓名</th> 却没加 scope，或者误以为 colspan/rowspan 能替代它——它们控制的是视觉合并，和语义范围无关。
-
scope="col"：该表头对应下方所有数据行的同一列（最常用） -
scope="row"：该表头对应右侧所有单元格（常用于首列分类项） -
scope="colgroup"或scope="rowgroup"：仅当存在<colgroup></colgroup>或多层表头时才需使用，普通表格极少用
单行表头 + 多行数据：必须用 scope="col"
这是最典型场景：第一行是列名，下面全是数据。每个 th 必须明确告诉辅助技术“我管下面这一整列”。
<table>
<tr>
<th scope="col">ID</th>
<th scope="col">姓名</th>
<th scope="col">城市</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>北京</td>
</tr>
</table>
漏掉 scope="col"，读屏软件可能把“姓名”只关联到紧邻的“张三”，而忽略后面所有行的“姓名”列内容。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
首列为表头（如带分类的表格）：用 scope="row"
当第一列是行标题（比如“男生”“女生”），其他列是数值，这时 th 在行首，需声明它管本行其余单元格。
- 不能写
scope="col"—— 那会误导为“这列所有值都归它管” - 不要依赖 CSS 视觉对齐来暗示语义，
scope是唯一可靠依据
<table>
<tr>
<th scope="row">男生</th>
<td>25</td>
<td>87</td>
</tr>
<tr>
<th scope="row">女生</th>
<td>28</td>
<td>92</td>
</tr>
</table>
复杂表头嵌套时，scope 容易失效，改用 headers/id
当表头跨多行或多列（比如“成绩”下分“语文”“数学”），scope 无法精准指向，此时必须放弃 scope，改用 id + headers 显式绑定。
例如：<th id="math">数学</th> 和 <td headers="math">95</td> —— 这种一对一或一对多的硬关联，比 scope 更可控。
很多人卡在这里：试图用 scope="col" 硬撑多层结构，结果读屏跳读错乱。只要出现 rowspan > 1 或 colspan > 1 的 th，优先考虑 headers 方案。
