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