HTML表格正确用法是：先写，再按→→顺序组织结构，禁用border等过时属性，用CSS控制样式，合并单元格时严格对齐行列。
<table> 标签本身没有“完整用法教程”这种东西——它只是语义容器，真正决定表格结构和可访问性的，是 <code><thead>、<code><tbody>、<code><tfoot>、<code><th>、<code><td> 和 <code><caption></caption> 的组合方式。HTML5 已彻底废弃所有样式类属性（如 border、cellpadding、align），硬编码在标签里只会让代码不可维护、语义混乱、屏幕阅读器误读。
为什么直接写 border="1" 会出问题
浏览器仍能渲染，但这是 HTML4 遗留写法，HTML5 规范中已不合法：border 属性只允许值 "1" 或空字符串，且仅用于向后兼容；现代项目中它会被 CSS 的 border 和 border-collapse 完全接管。更严重的是：border="1" 会让表格默认使用分离边框模型（separated），而实际需要的通常是折叠边框（collapsed）——不加 border-collapse: collapse，就会出现双线、间距错乱、打印时分页断裂等问题。
<caption></caption> 必须紧跟 <table>，且只能有一个<p>这是 WCAG 可访问性硬性要求。<code><caption></caption> 是表格的唯一语义标题，屏幕阅读器靠它识别表格用途。如果把它塞进 <thead> 里，或写两个 <code><caption></caption>，会导致：
- 辅助技术跳过或重复播报
- caption-side: bottom 失效（必须配合 CSS 使用）
- 打印时标题可能不随表格一起分页
正确的写法只有这一种顺序：<table>
<caption>用户订单汇总（2026年4月）</caption>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
<thead>、<code><tbody>、<code><tfoot> 的顺序不能颠倒<p>HTML5 明确规定三者必须按 <code><thead> → <code><tfoot> → <code><tbody> 出现。这不是风格建议，而是浏览器渲染逻辑依赖的顺序：
- 滚动长表格时，<code><thead> 和 <code><tfoot> 可被固定（需配合 <code>position: sticky）
- 打印多页表格时，每页自动重复页眉页脚
- 如果把 <tbody> 写在最前，<code><tfoot> 可能被忽略或位置错乱
另外注意：<code><thead> 和 <code><tfoot> 内部必须包含至少一个 <code><tr>，否则验证失败；<code><tbody> 可以为空，但不能省略标签（否则语义断裂）。<h3>合并单元格时 <code>colspan 和 rowspan 的陷阱
<thead>、<code><tbody>、<code><tfoot> 的顺序不能颠倒<p>HTML5 明确规定三者必须按 <code><thead> → <code><tfoot> → <code><tbody> 出现。这不是风格建议，而是浏览器渲染逻辑依赖的顺序：
- 滚动长表格时，<code><thead> 和 <code><tfoot> 可被固定（需配合 <code>position: sticky）
- 打印多页表格时，每页自动重复页眉页脚
- 如果把 <tbody> 写在最前，<code><tfoot> 可能被忽略或位置错乱
另外注意：<code><thead> 和 <code><tfoot> 内部必须包含至少一个 <code><tr>，否则验证失败；<code><tbody> 可以为空，但不能省略标签（否则语义断裂）。<h3>合并单元格时 <code>colspan 和 rowspan 的陷阱这两个属性还在 HTML5 中保留，但用错会导致表格结构崩溃（尤其是辅助技术无法解析行列关系）：
- colspan="2" 表示“占两列”，不是“跨到第2列”——它从当前列开始向右占满2个逻辑列位
- rowspan="3" 表示“占三行”，但后续两行对应列位置必须留空（即不写 <td>），否则行列错位
- 最容易踩的坑：在 <code><thead> 里用 <code>colspan 合并表头，但 <tbody> 对应列数没对齐，导致整列数据偏移
例如正确用法：<pre class="brush:php;toolbar:false;"><thead>
<tr>
<th>商品</th>
<th colspan="2">价格详情</th>
</tr>
<tr>
<th></th>
<th>单价</th>
<th>折扣</th>
</tr>
</thead></pre>
这里第一行的 <code>colspan="2" 占了后两列，第二行就必须提供两个 <th> 填满，否则语义错乱。<p>真正难的不是怎么写出来，而是怎么让表格在不同设备、不同辅助工具、不同打印场景下都保持结构清晰、语义准确。删掉所有过时属性，严格按语义分层，合并单元格前先画格子草图——这些动作比记住标签语法重要得多。</p>
</th>
