html的headers属性专为可访问性设计，通过空格分隔的精确id匹配同表内元素，建立语义归属关系，优先级高于scope，仅作用于已渲染的同表，大小写、空格、拼写均敏感。
HTML 的 headers 属性不是用来“建立动态关联”的，而是为屏幕阅读器等辅助技术声明数据单元格（<td>）**语义上归属哪些表头（<code><th>）**。它不改变样式、不触发 JS 事件、也不影响布局，只提供可访问性语义链。
<h3>必须用 id 精确匹配，不能靠 class 或文字</h3>
<p><code>headers 只通过字符串精确查找同表格内已存在的 <th id="xxx"> 元素。大小写、空格、拼写全部敏感：
<ul>
<li>
<code><th id="region">地区</th> ✅ 配 <td headers="region">北京</td>
<th class="region">地区</th> ❌ 即使 class 相同，headers="region" 也无效<th id="Region">地区</th> ❌ 大小写不一致，匹配失败<th id="region name">地区</th> ❌ ID 中含空格，非法，浏览器无法识别多维关联靠空格分隔多个合法 id
一个数据单元格可同时归属多个维度，比如「产品 + 季度 + 地区」，只需在 headers 中用**空格**列出对应 <th> 的 id：
<ul>
<li><code><th id="prod">产品</th>
<th id="q2">Q2</th><th id="shanghai">上海</th><td headers="prod q2 shanghai">85万元</td> ✅ 三者全部生效<td headers="prod,q2,shanghai"> ❌ 逗号分隔，只当一个 ID 查找，失败
<h3>作用范围严格限定在当前 table 内</h3>
<p><code>headers 只能引用**同一 <table> 中已渲染的 <code><th id>**，不支持跨表、不支持跨 <code><tbody>、不支持隐藏后又复用的 ID：
<ul><li>不同 <code><tbody> 中的 <code><th id="year"> 视为不同元素，不能互相引用
<li>
<code>display: none 或 aria-hidden="true" 的 <th> 仍会被读屏器播报——可能造成重复或误导，建议移除 id 或改用 <code>aria-label 直接标注
<th id> 在 <code><td headers> 挂载前已存在于 DOM，否则首次无障碍树无法建立连接
<h3>别和 scope 混用，优先级明确且互斥</h3>
<p>如果 <code><td> 同时写了 <code>headers 和 scope，所有主流读屏器（NVDA、VoiceOver、JAWS 2022+）都会**忽略 scope，只按 headers 解析**。WAI-ARIA 规范明确规定：显式 headers > 隐式 scope。
- 简单二维表（行列分明）：用
scope="row"/scope="col"更轻量、更可靠 - 复杂多维表（如带分组、嵌套汇总的财务报表）：才真正需要
headers - 绝对不要为了“兼容旧读屏器”而保留
scope—— 现代工具都支持headers，且更准确
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
