label 标签不能用于 table 行或单元格内替代 th，因其仅用于关联表单控件，强行在 td 中使用会破坏表格语义与可访问性；正确用法是为表格内的 checkbox 等表单控件提供绑定，且须确保 id 唯一、控件可聚焦。
label 标签不能直接用于 table 行或单元格内部作为“表格列标题”来替代 th；它只负责关联表单控件，不是语义化表格结构的工具。强行在 td 里套 label 不仅无效，还会破坏表格可访问性。
为什么 table > td > label 是错的
浏览器和屏幕阅读器把 table 当作独立的语义容器，th 和 td 的角色（行头、数据单元）由其位置和属性（如 scope、headers）定义。label 的唯一职责是建立“文本 ↔ 可聚焦表单控件”的绑定关系。把它塞进 td 里：
- 不会让该单元格变成表头，
th才是正确选择 - 点击它不会触发任何控件（除非你额外塞了个
input，但那就不是“为表格服务”，而是“在表格里放表单”） - 会误导辅助技术：label 暗示后面/内部有个控件要被聚焦，但实际没有，导致朗读混乱或焦点丢失
真正需要 label 的场景：表格里的表单控件
当表格某列是操作列（如“启用开关”“状态切换”“批量勾选”），里面嵌了 input[type="checkbox"] 或自定义开关组件时，label 才有意义——它的目标是那个 checkbox，不是整行或整列。
- 优先用隐式包裹：
<label><input type="checkbox" name="item_1">启用</label>，简洁、无 id 冲突风险 - 显式绑定只在布局受限时用（比如 checkbox 在一列，文字描述在另一列）：
<label for="item_1_status">启用</label>+<input id="item_1_status" type="checkbox">，务必确保id全局唯一且大小写完全一致 - 别给
input[type="hidden"]加label：辅助技术直接忽略，纯属冗余
表格中 label 的常见失效点
即使你正确写了 label，以下情况仍会让点击无反应或无障碍失效：
立即学习“前端免费学习笔记（深入）”；
-
input被设为display: none或visibility: hidden：视觉隐藏请改用position: absolute; clip: rect(1px, 1px, 1px, 1px); - 动态渲染（React/Vue）中重复使用相同
id：每行 checkbox 必须有唯一 id，比如用索引或 item.id 拼接：id="item-${index}-enabled" - label 包裹了非表单元素（如
div、span、自定义组件但没透传tabindex或role）：键盘无法聚焦，点击也不触发状态变更 - 表格用了
role="grid"等 ARIA 表格模式：此时原生label机制可能被绕过，应优先用aria-labelledby显式指向文字节点
表格的语义靠 th、scope、headers 和 ARIA 属性撑起来；label 只在它该出现的地方起作用——也就是紧贴着那个你能 tab 进去、能空格切换、能被屏幕阅读器读出“用途”的表单控件旁边。
