HTML中合并多列的唯一合法方式是给<td>或<th>添加colspan属性，它语义化声明单元格横跨N列，需同步减少该行其余单元格数量N−1个，否则导致错位；CSS或JS模拟会破坏语义与可访问性。

用 colspan 合并同一行中的多列

HTML 里合并多列单元格，唯一合法方式是给 <td> 或 <th> 加 colspan 属性。它不是“视觉拉伸”，而是语义上声明该单元格横跨 N 列——浏览器会据此重算整行的列布局。

常见错误现象：

• 加了 colspan="2"，但同行列数没减 1，导致下一行错位或出现空白列
• 在已设 colspan 的单元格右侧又写一个空 <td></td>，被当成新列渲染
• 动态生成表格时，JS 插入了 colspan 却没同步删掉冗余 <td>，逻辑列数溢出

实操要点：

• colspan 必须是正整数，比如 colspan="3" 表示占三列宽度
• 该行其余单元格数量要减少 N−1 个（N 是 colspan 值）
• 只影响当前 <tr>，不影响其他行；后续行仍按原始列数定义
• 建议用开发者工具检查 table 渲染后的盒模型，确认每行“逻辑列总数”一致

为什么不能靠 CSS 或 JS 模拟合并

浏览器不识别任何非标准手段：CSS 的 display: table-cell 配合 width、visibility: hidden、伪元素遮盖、甚至嵌套 <div> —— 这些都会破坏表格语义。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

后果很直接：

• 屏幕阅读器无法正确播报结构，可访问性失效
• 打印时样式丢失，合并区域可能断裂
• 响应式断点下布局彻底不可控
• 某些旧版邮件客户端直接忽略整个 <table>

真正安全的合并，只发生在 HTML 标签层级，且必须人工校验每行的单元格逻辑总数是否守恒。

合并多列时容易被忽略的细节

最常出问题的地方不在属性本身，而在于“被合并掉的位置是否真的空了”。例如：

• 第一行：<th colspan="2">产品信息</th><th>价格</th> → 这行共 3 列
• 第二行如果写成：<td>CPU</td><td>GPU</td><td>¥999</td> → 就变成 4 列，错位立刻发生
• 正确写法应是：<td>CPU</td><td>¥599</td>（只留两个单元格）

复杂点不在写法，而在于合并后整张表的行列对齐必须靠人工推算——浏览器不会报错，但错一位，整行就塌陷。别信“差不多看着对”。