scope="row"明确告诉屏幕阅读器该th是所在整行所有后续td的标题，如“营收：120万”；必须用于tbody中标识行整体含义的首列th，不可用于thead或空白单元格，且不适用于td。

scope="row" 不是“给行表头加语义”，而是**明确告诉屏幕阅读器：这个

是它所在整行所有后续 的标题**。不设，或设错，视障用户就听不到“营收：120万”这种自然语义，只听到“营收 120万”两个割裂的词。

什么时候必须用 scope="row"

只要

出现在数据行（ 中）的最左侧、且用于标识该行整体含义，就必须加 scope="row"：

• 财务报表里“营收”“成本”“利润”这类横向指标名
• 人员列表里“张三”“李四”这类实体名（作为行首标题，不是列名）
• 动态渲染时，不能只靠 i === 0 就统一加——得判断当前循环的是 还是 ，是列头还是行头

  scope="row" 的作用范围怎么算

  它不是只管紧邻右边一个

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  ，而是从自身开始，向右覆盖本行所有后续 ，直到遇到下一个 或行尾：

  <tr>
  <th scope="row">营收</th>
    <td>120万</td>
    <td>135万</td>
    <td>142万</td>
  </tr>

  上面三个

  都会被读作“营收：120万”“营收：135万”“营收：142万”。如果中间插了个 ，那它之后的 就归它管。

  常见错误和兼容性注意点

  容易踩的坑集中在结构混淆和值滥用上：

  • 在 里给列标题误写 scope="row" —— 应该是 scope="col"
  • 为左上角空白单元格加 scope="row"（或 scope="col"）—— 它既不描述行也不描述列，建议留空或根据上下文用 id+headers 显式关联
  • 把 scope="rowgroup" 当成“更高级的 row”来用 —— 它只在 内部、且该 是整个分组总标题时才有效，硬套会破坏 JAWS 等旧版读屏器解析
  • 在 上写 scope —— 属性只对 有效，浏览器直接忽略

    真正难的不是写对那一行 scope="row"，而是保持整个表格结构中 /

    分区清晰、 位置与语义严格对应——结构一乱，scope 就失去依据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！