thead必须在tbody前因html规范强制解析顺序，tfoot可前置因浏览器自动重排；其生效需css声明和滚动设置；scope属性确保屏幕阅读器正确关联表头与数据；子元素仅限tr/th/td，否则引发渲染异常。
thead 和 tfoot 不是“可选装饰”，而是浏览器渲染逻辑和语义结构的关键节点——它们决定滚动时表头是否固定、打印时页脚是否重复、屏幕阅读器如何解析数据层级。
为什么thead必须写在tbody前面，但tfoot可以放在tbody前面？
HTML 规范强制渲染顺序为 thead → tbody → tfoot，无论源码中谁先谁后。这意味着：
- 你可以把
tfoot写在tbody之前（甚至紧挨着thead），浏览器仍会把它“挪”到末尾显示 - 但
thead必须出现在tbody和tfoot之前——否则解析失败，部分浏览器会静默忽略或重排 DOM，导致样式错乱 - 这个机制让服务端流式渲染成为可能：先吐出
thead和tfoot，再边生成边输出tbody行，用户不用等全部数据加载完就能看到结构
tfoot 在长表格中实际生效的两个前提
很多人写了 tfoot 却发现打印时不重复、滚动时没效果，问题通常出在这两点：
- 必须配合 CSS 的
display: table-footer-group（现代浏览器默认已设，但旧版 Safari 或 IE 需显式声明） - 表格高度需超出视口且启用滚动（
overflow-y: auto），且tbody要设display: block或使用position: sticky—— 仅靠tfoot标签本身不触发“浮动页脚”行为 - 打印场景下，
tfoot只在跨页表格中每页底部出现，前提是表格未被page-break-inside: avoid强制整页渲染
用scope配合thead提升可访问性
th 默认作用域是列（scope="col"），但复杂表头常需明确指定范围，否则屏幕阅读器会读错关联关系：
- 单层表头：直接写
<th>姓名</th>，浏览器自动推断为列头 - 多级表头（如“2024年销售额”下分“Q1/Q2”）：外层
th加scope="colgroup"，内层加scope="col" - 行标题（如第一列是“产品名称”）：用
<th scope="row">iPhone</th>，否则会被当成普通数据单元格 - 不写
scope也不加id/headers关联时，辅助技术可能无法将数据单元格与对应表头正确配对
常见错误：thead里塞td或tfoot里放tr以外的内容
thead 和 tfoot 的合法子元素只有 tr；tr 的合法子元素只能是 th 或 td。以下写法会导致验证失败或渲染异常：
-
<thead><div>标题</div></thead>——div不被允许，会被浏览器丢弃或包裹进隐式tr -
<tfoot><tr><td colspan="3">合计：<span id="total">¥7900</span> </td></tr></tfoot>——span可以存在，但若在里面调用document.getElementById("total")时 DOM 已就绪，没问题；但若依赖tfoot的渲染时机做计算，要注意它可能比tbody更早插入 DOM - 遗漏
tr直接写<thead> <th>A</th> <th>B</th> </thead>—— 浏览器会自动补一个tr，但结构不可控，CSS 选择器可能失效
真正容易被忽略的是：当用 JS 动态生成表格时，tfoot 的 DOM 插入顺序会影响 table.rows 的索引——rows[0] 总是 thead 里的 tr，rows[1] 开始才是 tbody 的行，而 tfoot 的 tr 会出现在 rows 数组末尾，但不在 tbody.rows 中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
