一个 可通过 id 被多个 的 headers 属性引用（如 和 ），而单个 也可用空格分隔多个 id（如 headers="name age"）关联多个 ，其顺序决定读屏器播报次序。
HTML 表格中 <th> 怎么同时关联多个 <code><td>？
<p>单个 <code><th> 无法用 <code>id + headers 属性“绑定多个 <td>”，因为 <code>headers 是字符串，只能引用一个或多个 id，但前提是这些 id 必须真实存在于文档中，且每个 <td> 只能有一个 <code>headers 值（可含空格分隔的多个 id）。
真正可行的路径是：让多个 <td> 共享同一个 <code>headers 值，指向同一个 <th id="xxx">；或者让一个 <code><td> 显式关联多个 <code><th>（通过空格分隔多个 <code>id）。
-
<th id="name">姓名</th>和<th id="age">年龄</th>是两个独立表头 - 若某单元格同时属于这两列（比如跨行/跨列后的复合数据），应写成：
<td headers="name age">张三 28</td> - 浏览器会把该
<td> 同时关联到两个 <code><th>，读屏器会依次朗读“姓名 张三 28，年龄 张三 28”——注意语义是否合理 <h3> <code>headers属性值里多个id的顺序影响读屏结果吗？影响。读屏器（如 NVDA、VoiceOver）按
headers属性中id出现的**空格分隔顺序**依次读出对应<th> 的文本内容，再读 <code><td> 自身内容。 <ul> <li> <code><td headers="dept name">研发部 王五</td>→ 读作：“部门 研发部 王五，姓名 研发部 王五”（错误语义） - 正确应为：
<td headers="name dept">王五 研发部</td>→ “姓名 王五 研发部，部门 王五 研发部”（仍不理想，但顺序可控） - 更稳妥的做法：避免让一个
<td> 承载多维含义；优先用 <code><colgroup></colgroup>+<scope></scope>或嵌套表头结构（<thead> 多层 <code><tr>）表达层级关系 <h3>多层表头（如“季度”下分“Q1/Q2”）怎么用 <code>headers正确关联？多层表头本质是父子关系，不是并列
id拼接。此时不应强行让底层<td> 同时引用顶层和中间层 <code><th>，而应逐级建立语义链： <ul> <li>顶层 <code><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> 缺少表头关联”？
<p>常见原因不是语法错，而是 ID 不匹配或 DOM 未就绪：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/993" title="快写红薯通AI"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680183487839.png" alt="快写红薯通AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/993" title="快写红薯通AI" class="overflowclass">快写红薯通AI</a>
<p class="overflowclass">快写红薯通AI是一款专为小红书笔记创作和改写设计的 AI 文案工具。</p>
</div>
<a rel="nofollow" href="/ai/993" title="快写红薯通AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li><code><th id="sales"> 写成了 <code><th id="sale">（拼写差一个字母），<code><td headers="sales"> 就失效
<li>动态渲染表格（如 React/Vue）时，<code><th> 的 <code>id 在 <td> 渲染时尚未挂载，导致初始无障碍树缺失引用
<li>
<code>headers 值含不可见字符（如中文全角空格）、前后多余空格，例如 headers=" sales " → 浏览器不识别
.、冒号 :），未转义 —— 实际上 HTML ID 允许这些字符，但 CSS 选择器需转义；而 headers 属性值**不支持转义语法**，所以尽量只用字母、数字、连字符、下划线最易忽略的一点：表格必须有明确的 <table> 包裹，且不能被 <code>display: none 或 aria-hidden="true" 隐藏，否则整个语义链在无障碍 API 中不可见。
