th 的 scope 属性用于明确表头与数据单元格的语义关联，提升可访问性；仅适用于 th 元素，取值包括 col、row、colgroup、rowgroup，分别对应列标题、行标题、列组标题和行组标题。
th 和 td 的 scope 属性，核心作用是明确单元格与表头之间的语义关联，提升表格可访问性——尤其对屏幕阅读器用户至关重要。正确配置能帮辅助技术准确播报“哪一列/行的数据对应哪个标题”，而不是机械读出整行或整列。
scope 属性该用在哪儿？
只应在 th 元素上设置 scope；td 不支持该属性，加了也无效。它描述的是这个表头单元格“管”谁：是管它下面的一列（scope="col"），还是右边的一行（scope="row"），或是某个局部区域（scope="colgroup" 或 scope="rowgroup"）。
常见 scope 值及适用场景
-
scope="col"：用于列标题，即位于表格顶部（
<thead>）的 <strong>th</strong>，表示它统领下方整列数据。多数单层表头都用这个。 <li> <font color="blue"><strong>scope="row"</strong></font>：用于行标题，即每行开头的 <strong>th</strong>（常在 <code><tbody> 中），表示它说明本行后续所有 <strong>td</strong> 的含义，比如“姓名”“年龄”“城市”这类左侧标签。 <li> <font color="blue"><strong>scope="rowgroup"</strong></font>：当使用 <code><tbody> 分组多行、且该 <strong>th</strong> 是整个分组的总标题时使用，比如“2024年销售数据”作为一组5行的统称。 <li> <font color="blue"><strong>scope="colgroup"</strong></font>：配合 <code><colgroup></colgroup>使用，表示该 th 管理一组列，例如“Q1销售额”“Q2销售额”共同隶属于“季度业绩”这一列组。 - 不要滥用
scope="auto"：HTML5 已废弃该值，浏览器行为不一致，一律显式写col或row。 - 嵌套表头（如多级表头）不用 scope 解决，应改用 id / headers 属性组合标注关系。
- 如果一个 th 同时是行和列标题（如左上角单元格），scope 只能选其一，此时更推荐用 headers 指向多个表头ID，语义更精确。
- 验证是否生效：用屏幕阅读器（如NVDA + Firefox）朗读表格，听它是否自然说出“姓名 列：张三”，而非“第一行第一列：张三”。
避坑要点
简单但关键的检查习惯
每加一个 th，立刻问自己：它是标一列、还是一行、还是一个区块？然后配上对应的 scope。没有 scope 的表头，对无障碍用户来说就像没贴标签的抽屉——内容都在，但找不到归属。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
