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

用 colspan 合并同一行中的多列

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

常见错误现象：

• 加了 colspan="2"，但同行列数没减 1，导致下一行错位或出现空白列
• 在已设 colspan 的单元格右侧又写一个空 <td></td>，被当成新列渲染
• 动态生成表格时，JS 插入了 colspan 却没同步删掉冗余 <td>，逻辑列数溢出 <p>实操要点：</p> <ul> <li> <code>colspan 必须是正整数，比如 colspan="3" 表示占三列宽度
• 该行其余单元格数量要减少 N−1 个（N 是 colspan 值）
• 只影响当前 <tr>，不影响其他行；后续行仍按原始列数定义 <li>建议用开发者工具检查 <code>table 渲染后的盒模型，确认每行“逻辑列总数”一致

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

浏览器不识别任何非标准手段：CSS 的 display: table-cell 配合 width、visibility: hidden、伪元素遮盖、甚至嵌套 <div> —— 这些都会破坏表格语义。 <p>后果很直接：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>屏幕阅读器无法正确播报结构，可访问性失效</li> <li>打印时样式丢失，合并区域可能断裂</li> <li>响应式断点下布局彻底不可控</li> <li>某些旧版邮件客户端直接忽略整个 <code><table> <p>真正安全的合并，只发生在 HTML 标签层级，且必须人工校验每行的单元格逻辑总数是否守恒。</p> <h3>合并多列时容易被忽略的细节</h3> <p>最常出问题的地方不在属性本身，而在于“被合并掉的位置是否真的空了”。例如：</p> <ul> <li>第一行：<code><th colspan="2">产品信息</th> <th>价格</th> → 这行共 3 列

• 第二行如果写成：<td>CPU</td> <td>GPU</td> <td>¥999</td> → 就变成 4 列，错位立刻发生
• 正确写法应是：<td>CPU</td> <td>¥599</td>（只留两个单元格）

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