thead和tbody不是可有可无的装饰，必须严格遵循html规范：thead须紧接caption和colgroup之后、位于tbody之前，仅含tr/th；tbody是唯一允许js动态操作的区域；tfoot须在tbody之前而非之后。
thead 和 tbody 不是“可有可无的装饰”，它们的位置、嵌套和内容都有硬性规范。写错会导致固定表头失效、打印分页错乱、屏幕阅读器读不出列名，甚至某些旧浏览器直接忽略样式。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
thead必须紧接在caption和colgroup之后，且严格在tbody之前
HTML 规范要求 thead 是 table 的首个内容子元素（caption 和 colgroup 属于元信息，不算“内容”）。如果把 tbody 写在 thead 前面，哪怕视觉上没差别，浏览器解析时可能：
- 忽略 thead 的 position: sticky 行为（尤其 Safari 15.6 及更早）
- 在打印多页表格时，不重复输出表头
- W3C 验证器报错：Element tbody must not appear before element thead
thead里只能放tr，且每个tr内必须用th而非td
th 和 td 的语义完全不同：th 表示“该单元格定义了它所在列（或行）的数据含义”，而 td 只是普通数据容器。
- 屏幕阅读器靠 th + scope="col" 关联后续所有 td，若误用 td，辅助技术只会读“张三”，不会说“张三——姓名列”。
- 即使加了 role="columnheader"，也无法完全替代 th 的原生语义保障。
- 多级表头（如“销售额”下分“Q1”“Q2”）可用 rowspan/colspan，但顶层 th 仍必须在 thead 内，不能塞进 tbody 里“模拟”。
tbody是唯一允许JS动态操作的区域
所有增删行、批量渲染、分页加载，都必须限定在 tbody 内部。常见错误包括：
- 直接调用 table.insertRow() —— 它可能插到 tfoot 里，破坏结构
- 用 table.rows 遍历全部行 —— 会混入 thead 和 tfoot 的 tr，导致逻辑错乱
- 模板引擎（如 Vue 的 v-for）把循环包裹在 table 标签下，而非 tbody —— 渲染后 thead 被挤到中间，DOM 结构非法
正确做法：
- document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>')
- 查询数据行统一用 document.querySelectorAll('tbody tr')
tfoot位置容易被误解：必须写在tbody前面，但渲染仍在底部
很多人以为 tfoot 得放在 tbody 后面才“看起来对”。其实规范强制要求它出现在 tbody 之前（和 thead 同级，顺序为 thead → tfoot → tbody）。原因很实际：
- 浏览器流式加载时，先看到 tfoot 就能预留汇总行高度，避免 tbody 数据加载中页面反复重排
- 打印时，每页底部自动复现 tfoot 内容（比如“合计：¥7900”），前提是它在 DOM 中位于 tbody 之前
- 若你把它写在 tbody 后，Chrome 会照常渲染到底部，但 Safari 可能跳过打印页脚，W3C 验证器也会警告
最容易被忽略的是：即使你只写了一个 tr，也必须显式包裹 thead 和 tbody。浏览器虽会自动补全隐式 tbody，但不会补 thead，也不保证语义完整性。结构一旦松动，后续所有可访问性、滚动、打印、JS 操作都会变成“玄学问题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
