headers 与 id
复杂表格中精确建立表头关联
概念说明
当表格存在多级表头或跨列标题时，可以使用 id 与
headers 显式指定每个数据单元格的表头。 这能让辅助技术准确读出数据的上下文。
常见坑：id 必须全局唯一，headers 里需要按空格列出相关表头的 id。
如果只写部分表头，会导致读屏缺失上下文；同时不要把 headers 写在表头单元格上。
- id：给表头单元格一个唯一标识
- headers：在数据单元格中引用相关表头
基础语法
<th id="h-2024">2024</th>
<td headers="row-marketing h-2024 h-2024-q1">120</td>演示
多级表头关联
| 部门 | 2024 | 2025 | ||
|---|---|---|---|---|
| 预算项 | Q1 | Q2 | Q1 | Q2 |
| 市场 | 120 | 150 | 130 | 170 |
| 研发 | 200 | 240 | 220 | 260 |
headers 允许一个数据单元格关联多个表头，适合多级表头场景。
<th id="h-2024" colspan="2">2024</th>
<th id="h-2024-q1">Q1</th>
<th id="row-marketing" scope="row">市场</th>
<td headers="row-marketing h-2024 h-2024-q1">120</td>