必须用thead包裹表头行，否则语义结构断裂——浏览器和屏幕阅读器依赖thead识别标题行而非th本身，缺失会导致打印跨页无表头、position:sticky失效、辅助技术无法建立列关联、ui库功能异常。
必须用 thead 包裹表头行，否则语义结构就断了——不是“可加可不加”，而是“不加就等于没写表头”。
为什么thead不能省略？
浏览器和屏幕阅读器靠 thead 识别“哪些行是标题”，而不是靠 th 标签本身。如果直接把 th 塞进 table 或丢进 tbody，后果包括：
- 打印长表格时，每页顶部不会自动重复表头
- 滚动时
position: sticky失效（thead不是直接子元素，sticky 无从锚定） - 辅助技术无法建立单元格与列标题的语义关联，读屏器可能读成“张三 28 北京”，而非“姓名：张三；年龄：28；城市：北京”
- Ant Design、Element Plus 等 UI 库的表格组件内部依赖
thead结构做列排序、筛选逻辑，缺失会导致功能异常
thead 的位置和嵌套规则
thead 必须是 table 的**直接子元素**，且 DOM 顺序必须为：thead → tfoot → tbody。这个顺序不是建议，是 HTML5 规范强制要求。
- 错误写法：
<table><tbody><tr><th>姓名</th></tr></tbody></table>（th被当成普通数据单元格） - 错误写法：
<table><tbody><thead><tr><th>姓名</th></tr></thead></tbody></table>（thead不在正确层级，解析被忽略） - 正确写法：
<table> <thead><tr> <th>姓名</th> <th>年龄</th> </tr></thead> <tbody><tr> <td>张三</td> <td>28</td> </tr></tbody> </table>
scope 属性该不该加？加什么值？
要加，尤其当表格有辅助访问需求时。scope 是告诉读屏器“这个 th 管哪一列或哪一行”的关键属性。
- 单层列标题（最常见）→ 全部设
scope="col" - 首列为行标识（如“产品A”“产品B”）→ 该列
th设scope="row" - 不要用
scope="auto"（已废弃），也不要乱填scope="colgroup"，除非你真用了colgroup并做了列分组 - 不加
scope时，某些旧版读屏器会完全忽略表头关联，只读数值
固定表头（position: sticky）为什么不起作用？
常见失效原因不是 CSS 写错，而是 DOM 或父容器破坏了 sticky 生效条件：
-
thead不是table的直接子元素 → sticky 完全不触发 - 表格父容器设置了
overflow: hidden或transform→ 创建新层叠上下文，阻断 sticky 定位流 -
th没设background→ 滚动时文字悬空，底色透出难看 -
z-index没设或太低 → 被后续内容遮盖（哪怕只是 1 也得显式写） - Safari 旧版本对
thead + sticky支持不稳定 → 更稳妥做法是给th单独加position: sticky; top: 0;，而非只作用于thead
最容易被忽略的一点：即使你只想要结构语义，不打算滚动或打印，thead 仍必须存在——因为现代框架（如 React/Vue 的表格组件）、搜索引擎爬虫、Lighthouse 可访问性审计都默认检查它。缺了，不是“少个标签”，而是“整个表头语义链断裂”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
