th标签的headers属性关联什么_HTML高级数据表单元格绑定-html教程-PHP中文网

headers属性只认id，不认class、文字或位置；必须与th元素的id精确匹配（大小写、空格敏感），空格分隔多个id，优先级高于scope，且ID须在td渲染前存在于DOM中。

th标签的headers属性关联什么_html高级数据表单元格绑定

headers 属性只认 `id`，不认 class、文字或位置

它不是靠“上下左右”自动推断表头，也不是匹配 class 名或单元格内容。浏览器和屏幕阅读器只通过 headers 的值（比如 "name email"）去 DOM 中查找对应 id 的 元素。哪怕你写 headers="姓名"，但没有，就完全失效。

常见错误包括：



姓名 配  —— 不生效

姓名 配  —— 大小写不一致，不匹配

姓名 被 v-if 或 ngIf 动态移除，但  还在 —— ID 不存在，关联断裂多个表头绑定用空格分隔，不是逗号或竖线
headers 的值是空格分隔的 id 列表，例如 headers="dept team level" 表示该单元格同时归属三个维度的表头。每个 id 必须唯一且真实存在，重复或拼错一个都会导致部分语义丢失。
典型场景是复合表头：



大区
    销售额
  

城市
    Q1
    Q2
  

北京
    120万
    135万
  

注意：headers="region sales" 和 headers="sales region" 等价，顺序无关；但不能写成 headers="region,sales" 或 headers="region|sales"。

											
												
												
													Html2md
													使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
												
												下载
												
											
										
headers 优先级高于 scope，冲突时后者被忽略
当一个  同时写了 scope 和 headers，所有主流读屏器（NVDA、VoiceOver、JAWS 2022+）都只按 headers 解析，scope 完全不生效。WAI-ARIA 明确规定这个优先级。
所以别混用，尤其不要为了“兼容老版本”硬加 scope。真实问题往往出在：


服务端渲染时生成了 id="name"，但客户端 hydration 后又动态改了 ID 或删了节点
组件库自动生成的  没暴露 id 配置项，导致你无法配对
用 CSS display: none 隐藏了某个 ，但它仍会被读屏器读出——造成重复播报调试必须看 Accessibility 面板，不能靠肉眼或 console.log
Chrome DevTools 的 **Accessibility** 标签页里，选中某个 ，右侧会显示 “Related headers”，列出它实际关联的 。这是唯一可信的验证方式。
别信这些：


页面看起来“对齐了” → 不代表语义正确

document.querySelector('td').headers 返回字符串 → 只说明属性值存在，不保证 ID 可达
用 VoiceOver 测试一次没报错 → 未必覆盖所有嵌套或动态场景

最容易被忽略的是：ID 必须在  渲染前就存在于 DOM 中。React/Vue 的条件渲染、Suspense fallback、SSR/CSR ID 不一致，都会让首次读取失败且无任何提示。