必须按thead→tfoot→tbody顺序书写，这是HTML规范强制要求，否则会导致打印分页错乱、sticky表头失效、JS获取节点异常及屏幕阅读器语义读错；thead只能含tr和th，需scope="col"，tfoot唯一且须前置，多个tbody合法但不可配多个tfoot。
必须用 thead 包裹 tr，且只能出现在 table 内部、caption 和 colgroup 之后，tbody 之前 —— 否则解析行为不可靠，尤其在打印或滚动场景下会失效。
为什么 thead 里不能直接放 td 或空内容
浏览器强制要求 thead 的直接子元素必须是 tr，而 tr 内部应使用 th（语义正确）或 td（技术上允许但不推荐）。如果误写成：<thead><th>姓名</th></thead>，多数浏览器会静默修正 DOM 结构，导致样式错位或可访问性工具无法识别表头关联。
-
th自带scope="col"语义，屏幕阅读器能自动将列数据与表头关联；td没有此能力 - 若表格含多行表头（如分组标题），需嵌套多个
tr，每行对应一层逻辑层级 - 空
thead（如<thead></thead>）会导致部分旧版 Safari 渲染异常，打印时表头消失
和 tbody、tfoot 一起用时的顺序不能乱
HTML 规范明确要求三者共存时顺序必须是 thead → tfoot → tbody。这不是建议，而是解析前提：浏览器可能在收到全部 tbody 数据前就渲染 tfoot（比如流式加载大表格），顺序错乱会导致 tfoot 被忽略或插入到错误位置。
- 常见错误写法：
<table><tbody>...</tbody><thead>...</thead></table>—— 此时thead实际被提升为tbody的兄弟节点，失去语义分组作用 - 即使只用
thead和tbody，也禁止省略tfoot—— 规范没强制，但某些 PDF 打印库（如 jsPDF + autoTable）依赖三者完整结构才能跨页重复表头 -
tfoot必须写在tbody前，哪怕视觉上它显示在底部；CSS 可通过order调整显示顺序，但 HTML 结构不能变
打印和滚动场景下 thead 的真实行为依赖 CSS 配合
仅写 thead 标签不会自动实现“每页打印表头”或“固定表头滚动”，这些功能需要 CSS 显式启用。不同浏览器对同一 CSS 规则的支持程度差异较大，尤其在打印媒体查询中。
- 固定滚动：需配合
tbody { display: block; max-height: 300px; overflow-y: auto; }和thead > tr { position: sticky; top: 0; background: white; }—— 但 Safari 对sticky在表格中的支持不稳定 - 打印重复：必须用
@media print { thead { display: table-header-group; } }，否则 Chrome/Firefox 可能只在第一页显示thead - 避免用
display: grid或flex重写表格布局 —— 这会让thead语义彻底丢失，屏幕阅读器和打印引擎均无法识别
最容易被忽略的是：当表格动态生成（比如 Vue/React 渲染）时，thead 的存在与否会影响无障碍 API 的读取路径。哪怕视觉上没问题，缺失 thead 也会让视障用户无法通过快捷键跳转到表头区域 —— 这不是 bug，是规范强制要求的语义链断裂。
