scope属性用于明确th元素所描述的数据范围：scope="col"表示该表头关联其所在列的所有td，适用于顶部列标题；scope="row"表示关联其所在行的所有td，适用于左侧行标题；仅限th使用，复杂表格应改用headers+id。
scope 属性用于明确 <th> 元素所描述的数据范围，它不决定“整行”或“整列”的物理结构，而是告诉浏览器和辅助技术：这个表头单元格是为**它所在行的其余单元格**（row）服务，还是为**它所在列的其余单元格**（col）服务。
scope="col"：表示该表头描述一整列
当 <th> 出现在表格第一行（如列标题行），且它下面的单元格都属于同一类数据（例如“姓名”“年龄”“城市”），就应设为 scope="col"。屏幕阅读器读到该表头时，会将其与下方同列的每个 <td> 关联起来。
- 常见于表格顶部的列标题行
- 每个
<th scope="col">对应其正下方所有<td> - 示例：
<th scope="col">产品名称</th>表明该列所有数据都是产品名称
scope="row"：表示该表头描述一整行
当 <th> 出现在某行最左侧（如行标题），用于说明该行其他单元格的含义（例如“第一季度”“第二季度”），就用 scope="row"。它关联的是该行右侧的所有 <td>。
- 常见于表格首列的行标题列
- 每个
<th scope="row">对应其右侧同行的所有<td> - 示例：
<th scope="row">2024年Q1</th>表明该行数据都属于2024年第一季度
不推荐依赖 scope 的几种情况
如果表格结构复杂（如多级表头、跨行跨列表头），scope 无法准确表达语义关系，此时应改用 <thead>/<tbody> 结构配合 id 和 headers 属性显式关联。
立即学习“前端免费学习笔记（深入）”；
-
scope只适用于简单线性表头（单层行/列标题） - 不能跨多行或多列自动推断范围；它只作用于紧邻的行或列方向
- 避免在非表头单元格（如
<td>）上误用scope
验证是否用对了 scope
最直接的方法是用屏幕阅读器（如 NVDA + Firefox 或 VoiceOver + Safari）朗读表格，观察是否能正确将每个数据单元格与对应的表头关联。也可借助浏览器开发者工具检查无障碍树（Accessibility Tree）中 th 的 rowheader 或 columnheader 角色是否被正确识别。
- 正确设置后，
scope="col"的<th>在无障碍树中表现为columnheader -
scope="row"应显示为rowheader - 缺失或错误的
scope可能导致数据单元格无表头上下文，影响可访问性
