scope属性是专为表格表头设计的语义化属性，取值为col、row、colgroup、rowgroup，用于明确表头关联的数据范围，提升屏幕阅读器对复杂表格结构的理解。

scope 属性本身不是 HTML5 新增的，而是从早期 HTML 规范沿用至今的语义化属性，专为表格（<th> 元素）设计，用于明确表头单元格所关联的数据范围——这对屏幕阅读器准确播报“哪一列/行对应什么数据”至关重要。在复杂表格（如多级表头、跨行跨列表头）中，正确使用 <code>scope 能显著提升盲人用户对结构的理解效率。

明确 scope 的取值与适用场景

scope 有四个合法值，必须严格匹配表头的实际作用范围：

• col：该 <th> 是**一列**的标题（常见于第一行表头）； <li> <strong>row</strong>：该 <code><th> 是**一行**的标题（常见于第一列的行标识，如“北京”“上海”）； <li> <strong>colgroup</strong>：该 <code><th> 概括一组列（需配合 <code><colgroup></colgroup> 使用）；
• rowgroup：该 <th> 概括一组行（需配合 <code><tbody> 或 <code><thead> 的分组逻辑）。 <h3>避免仅依赖 colspan/rowspan，主动声明 scope</h3> <p>仅用 <code>colspan 或 rowspan 创建合并单元格，屏幕阅读器无法自动推断其语义归属。必须为每个 <th> 显式设置 <code>scope。

  例如，一个带分组的销售统计表：

  立即学习“前端免费学习笔记（深入）”；

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载

  <table>
    <thead>
      <tr>
        <th scope="col">地区</th>
        <th colspan="2" scope="colgroup">Q1 销售</th>
        <th colspan="2" scope="colgroup">Q2 销售</th>
      </tr>
      <tr>
        <th scope="col"></th>
        <th scope="col">线上</th>
        <th scope="col">线下</th>
        <th scope="col">线上</th>
        <th scope="col">线下</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">华北</th>
        <td>120</td><td>85</td><td>135</td><td>92</td>
      </tr>
    </tbody>
  </table>

  其中顶层“Q1 销售”设 scope="colgroup"，表明它统领下方两列；子级“线上”“线下”设 scope="col"；左侧“华北”设 scope="row"——屏幕阅读器读到“华北”单元格时，会连带播报当前行所有数据对应的列名（如“华北，线上 Q1 销售：120”）。

  慎用 scope="rowgroup"，优先用语义化分组

  scope="rowgroup" 要求配合明确的 <tbody> 或 <code><thead> 分组，且该 <code><th> 必须位于分组首行首列。实践中容易误用，反而造成混淆。更推荐的做法是： <ul><li>用多个 <code><tbody> 划分逻辑区块，并为每个区块首行添加 <code>scope="row" 行标题；

• 配合 aria-labelledby 或 aria-describedby 补充上下文（如“2023年度汇总”），比强行用 rowgroup 更可靠；
• 若表格极复杂，考虑拆分为多个语义清晰的独立表格，比强撑一个“全能表”更利于辅助技术解析。

验证是否生效：别只靠肉眼检查

打开 NVDA 或 VoiceOver，进入表格后按 T（NVDA）或 Ctrl+Option+Shift+Down Arrow（VoiceOver）导航，听其如何播报单元格的行列关系。重点关注：

• 移动到“线上 Q1 销售”单元格时，是否被识别为列标题；
• 移动到“华北”单元格时，是否被识别为行标题；
• 读取数据单元格（如“120”）时，是否能自动关联到正确的行名和列名（例如：“华北，线上 Q1 销售：120”）。

可借助浏览器开发者工具检查元素是否含有 scope 属性，但最终以屏幕阅读器实际播报为准——属性存在不等于被正确理解。