必须用 thead 和 tbody，因为裸表格缺乏语义结构，导致屏幕阅读器无法识别表头、导出错位、CSS 固定表头失效，且现代框架和组件依赖其结构实现排序筛选等功能。
为什么必须用 thead 和 tbody 而不只是 table
不加 thead 和 tbody 的表格在语义上是“裸表格”，浏览器和屏幕阅读器无法区分表头与数据行，导出为 PDF 或 Excel 时容易错位，CSS 样式（比如固定表头滚动）也基本失效。更关键的是：现代前端框架（React/Vue）或表格组件（如 DataTables、Ant Design）默认依赖这些结构才能正确渲染排序、筛选、分页功能。
thead 里只能放 tr，且必须包含 th 吗
不是必须全用 th，但强烈建议这么做：
-
th自带scope属性语义（如scope="col"），辅助工具能准确关联单元格与列含义 - 如果混用
td，部分读屏软件会跳过该单元格，导致残障用户无法理解表头作用 - 某些自动化测试工具（如 axe）会将缺失
th的thead视为可访问性缺陷 - 例外情况：多级表头中，顶层
th可带colspan，下层用th+scope="colgroup"，但底层数据行仍须对应到具体列
如何让 tbody 支持滚动而表头固定
纯 CSS 实现需满足三个硬条件：
-
table必须设display: block，否则tbody无法独立设置max-height和overflow-y -
thead和tbody需拆成两个独立table元素（或用div模拟），因为原生tbody不支持overflow - 列宽必须显式控制，否则两个
table的列会错位；推荐用width+table-layout: fixed，避免靠内容撑开
简例：
<div class="table-container">
<table><thead><tr><th style="width:120px">姓名</th><th style="width:80px">年龄</th></tr></thead></table>
<div class="tbody-wrapper">
<table><tbody><tr><td>张三</td><td>28</td></tr></tbody></table>
</div>
</div>再配 CSS：.tbody-wrapper { max-height: 200px; overflow-y: auto; }
常见错误：合并单元格破坏 thead/tbody 结构
一旦在 thead 或 tbody 中使用 rowspan/colspan，就极易引发以下问题：
- JavaScript 动态操作（如插入新行）时，
insertRow()可能因跨行单元格错位而报错IndexSizeError - 打印预览中，跨行表头可能被截断或重复出现在每页顶部
- 用
querySelector('tbody tr')获取行数时，返回值少于实际可视行数，因为合并单元格不生成独立tr - 修复思路：优先用 CSS Grid 或 Flex 布局替代跨行，实在需要则确保
rowspan不跨越thead/tbody边界
真正难处理的不是写法，而是当表格要同时满足可访问性、打印适配、JS 交互和响应式缩放时，thead/tbody 的结构约束会立刻暴露——这时候别硬扛，换用成熟表格库更省时间。
