html表格规范结构必须满足语义、可访问性、解析鲁棒性三重底线：table需包裹thead/tbody/tr，th/td不可混用，caption须紧贴table开头，colspan/rowspan须精准计算格数，border-collapse:collapse必设，scope属性为可访问性硬性门槛。
HTML 表格的规范结构不是“能渲染出来就行”，而是必须满足语义、可访问性、解析鲁棒性三重底线——缺一不可。不按规范写，轻则 CSS 样式失效、border-collapse 不生效，重则屏幕阅读器读错行列关系，甚至老浏览器（如 IE11 或某些邮件客户端）直接跳过整张表。
table/thead/tbody/tr/th/td 这六个标签一个都不能少
很多人以为只要 <table> 包住几行 <code><tr> 和 <code><td> 就算合法，其实不是。现代规范要求：
<ul><li><code><thead> 必须存在且包裹至少一行 <code><tr>，里面只能用 <code><th>（不能混用 <code><td>）
<li><code><tbody> 必须显式写出，不能省略；即使只有一行数据，也要包在 <code><tbody> 里
<li><code><tfoot> 可选，但如果用了，必须写在 <code><tbody> 之前（HTML 解析顺序要求）
<li>
<code><caption></caption> 必须紧贴 <table> 开始标签后第一行，否则会被部分辅助技术忽略
<p>错误示例：<code><table>
<tr><th>姓名</th></tr>
<tr><td>张三</td></tr>
</table> —— 缺 <thead> 和 <code><tbody>，语义断裂，<code>display: table-header-group 等 CSS 机制会失效。
colspan 和 rowspan 容易引发结构错位
合并单元格不是“加个属性就完事”，它会改变表格的隐式网格结构，一旦计算错被合并单元格占据的格子数，后续行就会错列或塌陷。
- 横向合并用
colspan="n"，该单元格实际占用了 n 列宽度，同一行中后续<th>/<code><td> 数量要相应减少 <li>纵向合并用 <code>rowspan="m"，该单元格跨 m 行，那么它下方 m−1 行里对应列位置必须留空（即不写该列的<td>） <li>常见错误：<code><th colspan="2">合计</th> <td>100</td> <td>200</td>—— 这行实际有 3 个单元格，但表头只声明了 2 列，导致最后一列对不齐 - HTML 表格默认使用
border-collapse: separate，单元格之间有间隙，border只画在各自边界上 - 想让边框连成一片、消除间隙，必须显式设置
table { border-collapse: collapse; } - 如果忘了这句，
padding、background-color、斑马线（tbody tr:nth-child(odd)）都可能表现异常 - 注意：
border-collapse只对<table> 元素本身生效，不能写在 <code><tr> 或 <code><td> 上 <p>顺带提醒：<code>cellspacing和cellpadding已是废弃 HTML 属性，任何新项目都不该出现。scope 属性是可访问性的硬性门槛
没有
scope的<th>，对屏幕阅读器来说只是“加粗文字”，不是“这一列数据的标题”。尤其在多维表头（比如带分组的报表）中，缺失 <code>scope会导致读屏软件完全无法定位数据归属。- 单层表头用
scope="col"（列头）或scope="row"（行头） - 嵌套表头（如先分大类再分小类）必须配合
id+headers属性联动，仅靠scope不够 - 错误写法：
<th>销量</th>—— 没scope，辅助技术无法判断它是列头还是行头 - 正确写法：
<th scope="col">销量</th>或<th scope="row">华东区</th>
复杂表格真正难的从来不是写代码，而是把每一处
scope、headers、rowspan的逻辑校验清楚——这些地方出错，测试时肉眼几乎看不出来，但对真实用户就是不可用。 - 单层表头用
验证方法：用浏览器开发者工具查看 Elements 面板中的表格 DOM 结构，确认每行 <tr> 下的单元格总数一致（考虑 <code>colspan/rowspan 折算后）。
border-collapse: collapse 是样式生效的前提
很多人写了边框 CSS 却看不到效果，根本原因是没处理表格默认的“分离边框模型”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
