为表格行组添加表头的正确HTML语义化与可访问性标记

核心实现要点 #

• 保留<tbody>划分行组：你已经用多个<tbody>区分不同行组，这本身就是语义化的基础，辅助技术能识别这些分组结构。
• 行组表头添加scope="rowgroup"：每个跨列的行组标题<th>必须加这个属性，明确它是下方整个行组的表头，让屏幕阅读器知道该标题对应所有行数据。
• 顶部列表头添加scope="col"：<thead>里的列标题<th>要加这个属性，明确它们是对应列的表头，和行组表头形成清晰的层级关联。
• <td>和<tbody>无需额外属性：<td>本身就是数据单元格，不需要特殊标记；<tbody>的语义已经足够划分组，不用再加其他属性。

修改后的完整代码示例 #

table { border-collapse: collapse; text-align: center }
thead { background: #ccc }
th, td { padding: 0.25em 0.5em; border: 1px solid #ddd }
tbody th { background: #eee }

<table>
  <thead>
    <tr>
      <th scope="col">A</th>
      <th scope="col">B</th>
      <th scope="col">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3" scope="rowgroup">Group 1</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3" scope="rowgroup">Gruppe 2</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3" scope="rowgroup">Gruppe 3</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

关键作用说明 #

• 语义明确：scope属性消除了视觉布局依赖，让浏览器和辅助技术能准确理解表头与数据的归属关系。
• 可访问性提升：屏幕阅读器用户浏览单元格时，会同时听到对应的列表头（A/B/C）和行组表头（Group 1/2/3），清晰知晓当前数据的所属类别和分组。
• 兼容性可靠：scope="rowgroup"是W3C规范推荐用法，所有现代屏幕阅读器（如NVDA、VoiceOver）和浏览器都支持。

内容的提问来源于stack exchange，提问作者Svish