HTML表格正确用法是：先写，再按→→顺序组织结构，禁用border等过时属性，用CSS控制样式，合并单元格时严格对齐行列。

标签本身没有“完整用法教程”这种东西——它只是语义容器，真正决定表格结构和可访问性的，是 、、、 的组合方式。HTML5 已彻底废弃所有样式类属性（如 border、cellpadding、align），硬编码在标签里只会让代码不可维护、语义混乱、屏幕阅读器误读。

为什么直接写 border="1" 会出问题

浏览器仍能渲染，但这是 HTML4 遗留写法，HTML5 规范中已不合法：border 属性只允许值 "1" 或空字符串，且仅用于向后兼容；现代项目中它会被 CSS 的 border 和 border-collapse 完全接管。更严重的是：border="1" 会让表格默认使用分离边框模型（separated），而实际需要的通常是折叠边框（collapsed）——不加 border-collapse: collapse，就会出现双线、间距错乱、打印时分页断裂等问题。

必须紧跟

、	和

，且只能有一个

这是 WCAG 可访问性硬性要求。

是表格的唯一语义标题，屏幕阅读器靠它识别表格用途。如果把它塞进 里，或写两个 ，会导致： - 辅助技术跳过或重复播报 - caption-side: bottom 失效（必须配合 CSS 使用） - 打印时标题可能不随表格一起分页 正确的写法只有这一种顺序：

.........

用户订单汇总（2026年4月）

、、 的顺序不能颠倒

HTML5 明确规定三者必须按 → → 出现。这不是风格建议，而是浏览器渲染逻辑依赖的顺序： - 滚动长表格时， 和 可被固定（需配合 position: sticky） - 打印多页表格时，每页自动重复页眉页脚 - 如果把 写在最前， 可能被忽略或位置错乱 另外注意： 和 内部必须包含至少一个 ，否则验证失败； 可以为空，但不能省略标签（否则语义断裂）。

合并单元格时 colspan 和 rowspan 的陷阱

这两个属性还在 HTML5 中保留，但用错会导致表格结构崩溃（尤其是辅助技术无法解析行列关系）： - colspan="2" 表示“占两列”，不是“跨到第2列”——它从当前列开始向右占满2个逻辑列位 - rowspan="3" 表示“占三行”，但后续两行对应列位置必须留空（即不写 ），否则行列错位 - 最容易踩的坑：在 里用 colspan 合并表头，但 对应列数没对齐，导致整列数据偏移 例如正确用法：

<thead>
<tr>
<th>商品</th>
    <th colspan="2">价格详情</th>
  </tr>
<tr>
<th></th>
    <th>单价</th>
    <th>折扣</th>
  </tr>
</thead>

这里第一行的 colspan="2" 占了后两列，第二行就必须提供两个 填满，否则语义错乱。

真正难的不是怎么写出来，而是怎么让表格在不同设备、不同辅助工具、不同打印场景下都保持结构清晰、语义准确。删掉所有过时属性，严格按语义分层，合并单元格前先画格子草图——这些动作比记住标签语法重要得多。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！