thead和tbody是语义化必需结构，非可选标签：显式书写确保屏幕阅读器正确识别、CSS精准匹配、打印内容不丢失，且避免浏览器自动补全导致的DOM错乱与JS操作异常。
thead 和 tbody 不是可有可无的“美化标签”，而是语义化必需结构——没有它们，表格在屏幕阅读器中可能被读错顺序，CSS 选择器定位也会失效，打印或导出时还容易丢内容。
为什么必须显式写 thead 和 tbody
浏览器会自动补全缺失的 thead/tbody，但补全逻辑不可控：比如你只写 <table>
<tr><th>A</th></tr>
<tr><td>B</td></tr>
</table>，Chrome 可能把第一行塞进 tbody 而不是 thead，导致样式 thead th 完全不生效。
-
thead必须包裹所有表头行（<tr> 中含 <code><th> 的行），且只能出现一次 <li> <code>tbody包裹所有数据行，可多个（比如分页渲染时用多个tbody隔离） - 如果省略
thead，<th> 仍会加粗居中，但语义丢失，<code>aria-labelledby或 JS 动态操作列时易出错 -
tfoot虽然可选，但若存在，必须写在tbody之后（不是之前），否则会被浏览器移到末尾，破坏预期布局 - 所有
<th> 和 <code><td> 必须严格嵌套在 <code><tr> 内 <li><code><tr> 必须在 <code><thead>、<code><tbody> 或 <code><tfoot> 内，不能直接挂在 <code><table> 下 <li>同一行内 <code><th> 和 <code><td> 可混用（如首列为 <code><th scope="row">），但列数要对齐，否则视觉错位 <li>空单元格别留空白字符，写 <code><td></td>或<td> </td>都行，但不要只换行不写标签 - 边框必须用 CSS：
table { border-collapse: collapse; }+th, td { border: 1px solid #ccc; }，缺collapse会出现双线间隙 - 对齐别碰
align="center"，改用th { text-align: center; }或整表table { text-align: right; }（th会继承但保持加粗） - 列宽控制优先用
<col>标签：<col style="width: 120px"> <col style="width: auto">，比给每个td加width更稳定 - 响应式表格慎用
overflow-x: auto包裹，它会让position: sticky的表头失效；真要横向滚动，用display: block+white-space: nowrap更可控
th 和 td 的嵌套规则不能破
常见错误是把 <th> 直接扔进 <code><table>，或者漏掉 <code><tr>：比如 <code><table>
<th>姓名</th>
<td>张三</td>
</table>。这会导致 DOM 结构断裂，CSS tr:nth-child(odd) 失效，JS 获取 rows 集合时跳过这些“孤儿单元格”。
现代项目里边框和对齐怎么写才不翻车
HTML5 已废弃 border、align、cellpadding 等属性，硬写进去浏览器会忽略，但控制台不报错——这是最坑的静默失败。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：即使结构完全正确，thead 在滚动时固定表头仍需配合 position: sticky 和 top: 0，且父容器不能是 transform 或 perspective 触发的层叠上下文——这点连很多 UI 框架都踩过坑。
