必须显式写出 thead、tfoot、tbody 且顺序为 thead→tfoot→tbody，因浏览器渲染、打印、JS 获取、屏幕阅读器及 CSS 选择器均依赖此源码顺序；thead 内必须含至少一个 tr，tbody 不可省略，否则导致样式失效、JS 报错、无障碍支持中断及性能下降。
必须显式写出 thead、tbody、tfoot，且顺序只能是 thead → tfoot → tbody，否则打印、滚动、JS 获取和屏幕阅读器都会出问题。
为什么 tfoot 必须写在 tbody 前面
不是“语义上像脚就放下面”，而是浏览器渲染和打印机制依赖这个源码顺序：
- 浏览器可在
tbody内容还没加载完时，先渲染thead和tfoot（比如统计行），提升首屏感知速度 -
@media print依赖该结构实现每页重复显示表头和页脚；顺序错乱会导致页脚只出现在第一页底部 - JS 中
table.tFoot返回的是 DOM 中的节点位置，但浏览器实际渲染时会把错位的tfoot“挪”到底部——造成 JS 读取顺序与视觉/打印不一致 - CSS 的
:nth-child()选择器按源码顺序计算，tfoot放后面会让原本第 3 个tr变成第 1 个，样式意外失效
thead 里不能空着，哪怕只有一行也要有 tr
HTML 规范强制要求 thead 必须包含至少一个 tr，否则会被浏览器忽略或自动补全，导致样式丢失、无障碍支持中断：
- 错误写法：
<thead></thead>或<thead><div>...</div></thead>—— 浏览器直接跳过，th不再被识别为列头 - 正确写法：
<thead><tr> <th>姓名</th> <th>年龄</th> </tr></thead> - 即使整行要隐藏（比如响应式折叠），也得用
visibility: hidden或opacity: 0，不能用display: none，否则破坏列关联逻辑 - 屏幕阅读器靠
thead+th自动把列名绑定到对应列的td，没这层结构就得手动加scope属性补救
tbody 看似可省略，但动态操作时一定会踩坑
浏览器确实会把没包进 thead/tfoot 的 tr 自动归入隐式 tbody，但这只是解析兜底行为，不可控：
立即学习“前端免费学习笔记（深入）”；
- JS 插入新行时，
document.querySelector('tbody').appendChild(row)在没显式tbody时返回null，直接报错 - 想让内容区独立滚动：
tbody { max-height: 300px; overflow-y: auto; }—— 隐式结构无法被 CSS 选中 - 某些框架（如 Bootstrap）的表格样式规则明确写成
table tbody tr:hover，没tbody就不生效 - 服务端模板（如 Django、Vue SFC）中，循环生成
tr时若漏掉tbody，容易因嵌套层级错乱导致 HTML 解析异常
固定表头 + 滚动主体的 CSS 写法陷阱
常见需求是表头不动、数据区滚动，但直接给 tbody 加 overflow 会崩布局，因为 display: table-row-group 不支持 overflow：
- 正确姿势：给
tbody设display: block，再给内部tr、td、th显式设回display: table-row/table-cell - 必须同步设置
table-layout: fixed和列宽（比如th:first-child { width: 200px; }），否则block后列宽塌陷、对不齐 -
thead要保持默认display: table-header-group，才能配合position: sticky; top: 0固定 - 别忘了加
vertical-align: top到td/th，否则单元格内容上下不对齐
最常被忽略的一点：当表格由 JS 动态拼接大量 tr 字符串时，如果漏写 tbody，innerHTML += '<tr>...</tr>' 会不断触发重排，性能断崖式下跌；显式包裹 tbody 后，可一次性插入整个片段，DOM 操作更可控。
