一个 <th> 可通过 id 被多个 <td> 的 headers 属性引用（如 <td headers="name"> 和 <td headers="name">），而单个 <td> 也可用空格分隔多个 id（如 headers="name age"）关联多个 <th>，其顺序决定读屏器播报次序。
HTML 表格中 <th> 怎么同时关联多个 <td>？
单个 <th> 无法用 id + headers 属性“绑定多个 <td>”，因为 headers 是字符串，只能引用一个或多个 id，但前提是这些 id 必须真实存在于文档中，且每个 <td> 只能有一个 headers 值（可含空格分隔的多个 id）。
真正可行的路径是：让多个 <td> 共享同一个 headers 值，指向同一个 <th id="xxx">；或者让一个 <td> 显式关联多个 <th>（通过空格分隔多个 id）。
-
<th id="name">姓名</th>和<th id="age">年龄</th>是两个独立表头 - 若某单元格同时属于这两列（比如跨行/跨列后的复合数据），应写成：
<td headers="name age">张三 28</td> - 浏览器会把该
<td>同时关联到两个<th>，读屏器会依次朗读“姓名 张三 28，年龄 张三 28”——注意语义是否合理
headers 属性值里多个 id 的顺序影响读屏结果吗？
影响。读屏器（如 NVDA、VoiceOver）按 headers 属性中 id 出现的**空格分隔顺序**依次读出对应 <th> 的文本内容，再读 <td> 自身内容。
-
<td headers="dept name">研发部 王五</td>→ 读作：“部门 研发部 王五，姓名 研发部 王五”（错误语义） - 正确应为：
<td headers="name dept">王五 研发部</td>→ “姓名 王五 研发部，部门 王五 研发部”（仍不理想，但顺序可控） - 更稳妥的做法：避免让一个
<td>承载多维含义；优先用<colgroup>+<scope>或嵌套表头结构（<thead>多层<tr>）表达层级关系
多层表头（如“季度”下分“Q1/Q2”）怎么用 headers 正确关联？
多层表头本质是父子关系，不是并列 id 拼接。此时不应强行让底层 <td> 同时引用顶层和中间层 <th>，而应逐级建立语义链：
- 顶层
<th id="quarter">季度</th> - 中间层
<th id="q1" headers="quarter">Q1</th>（显式声明它属于“季度”） - 数据单元格
<td headers="q1">120</td>—— 它只直接归属 Q1，但因 Q1 已关联 quarter，语义链自动成立 - 不要写
headers="quarter q1"：这会让读屏器重复读“季度 Q1 120，Q1 Q1 120”，造成冗余和混淆
为什么用了 headers 还被 Lighthouse 报“<td> 缺少表头关联”？
常见原因不是语法错，而是 ID 不匹配或 DOM 未就绪：
-
<th id="sales">写成了<th id="sale">（拼写差一个字母），<td headers="sales">就失效 - 动态渲染表格（如 React/Vue）时，
<th>的id在<td>渲染时尚未挂载，导致初始无障碍树缺失引用 -
headers值含不可见字符（如中文全角空格）、前后多余空格，例如headers=" sales "→ 浏览器不识别 - ID 值含特殊字符（如点号
.、冒号:），未转义 —— 实际上 HTML ID 允许这些字符，但 CSS 选择器需转义；而headers属性值**不支持转义语法**，所以尽量只用字母、数字、连字符、下划线
最易忽略的一点：表格必须有明确的 <table> 包裹，且不能被 display: none 或 aria-hidden="true" 隐藏，否则整个语义链在无障碍 API 中不可见。
