th必须嵌套在tr中,正确结构为table→thead/tbody→tr→th;单行表头需设scope="col",首列分类项用scope="row";多级表头须用headers/id关联,不可依赖colspan替代语义。

th 标签本身不定义完整文档结构,它只负责语义化地标识表头单元格;真正决定结构规范的是 table 内部的层级关系与属性配合。
th 必须嵌套在 tr 里,不能直接丢进 table
常见错误是写成 <table><th>姓名</th></table> —— 这会触发浏览器自动纠错,但语义已损坏,读屏软件可能完全忽略该表头。正确路径只有一条:
-
table→thead或tbody→tr→th - 即使最简表格,也要有
tr包裹:<tr><th>姓名</th><th>年龄</th></tr> - 不用
thead不违法,但加上它能让结构更清晰、CSS 更易定位,且部分辅助技术更倾向依赖它
scope 属性不是可选的,而是可访问性的刚需
只写 <th>姓名</th> 看似能渲染,但对屏幕阅读器来说,它不知道这个“姓名”管的是哪一列数据。浏览器不会自动推断作用范围。
- 单行表头 + 多行数据 → 每个
th都必须带scope="col" - 首列为分类项(如“男生”“女生”)→ 对应
th用scope="row",不能错写成scope="col" -
colspan或rowspan只影响视觉合并,和scope无关;二者要独立设置
复杂表头必须用 headers/id,别硬撑 scope
当出现多级表头(比如“成绩”下分“语文”“数学”,再往下是具体分数),scope 就不够用了。它只能表达“整列”或“整行”,无法指定“只管第2、第4、第6列”这种非连续关联。
立即学习“前端免费学习笔记(深入)”;
- 给顶层
th加id,如<th id="math">数学</th> - 给底层数据单元格
td的headers属性填上对应id,如<td headers="math">89</td> - 一个
td可以同时关联多个表头:headers="grade math term1"
很多人以为加了 th 就算完成语义化,其实漏掉 scope 或乱用 colspan 替代语义,会让表格在无障碍场景中彻底失效。这不是样式问题,是信息映射断裂。



















