colspan和rowspan是html表格合并单元格的唯二标准方式；colspan向右合并同行多列，需减少同行动态单元格数；rowspan向下合并同列多行，后续行对应位置必须留空；二者可组合实现矩形合并，但须严格校验行列总数守恒。

colspan 和 rowspan 是 HTML 表格合并单元格的唯二标准方式，没有其他合法手段。浏览器不识别“合并单元格”按钮、CSS 伪类或 JS 模拟结构——那些只会让表格渲染错乱或语义失效。

用 colspan 向右合并同一行中的列

当你需要一个表头或数据单元格横跨多列（比如“产品信息”占两列），就在对应 <td> 或 <code><th> 标签里加 <code>colspan="N"，N 是要覆盖的列数。

关键点：

Article To Html

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

下载

• 该行其余单元格数量必须减少 N−1 个，否则总列数会超预期，导致后续行错位
• colspan 只影响当前行，不影响下面各行的布局
• 不要在已设 colspan 的单元格右侧再放一个空 <td></td>，那不是“留空”，而是新增一列

示例：<th colspan="2">产品信息</th> <th>价格</th> —— 这行总共只有 3 列，不是 4 列。

用 rowspan 向下合并同一列中的行

当你需要一个单元格纵向占据多行（比如左侧“类别”栏固定显示两行），就在第一行对应位置的 <td> 或 <code><th> 加 <code>rowspan="N"。

关键点：

• 从第二行开始，该列位置必须完全留空（不写 <td>），否则会打断跨行结构 <li>合并区域内的其他行，该列不能有内容、不能有样式占位、也不能靠 <code>visibility: hidden 伪装
• rowspan 值必须是整数，且不能超过该列实际剩余行数，否则最后一行可能被截断

示例：第一行写 <td rowspan="2">硬件</td> <td>CPU</td>，第二行就只写 <td>GPU</td>，不能再出现第 1 个 <td>。 <h3>同时用 <code>colspan 和 rowspan 合并矩形区域

比如左上角单元格要覆盖 2 列 × 3 行，就设 colspan="2" rowspan="3"，然后严格按“从上到下、从左到右”顺序删掉被覆盖区域中其余所有 <td>。 <p>最容易出问题的地方：</p> <ul><li>行列总数不守恒：每行 <code><td> + <code>colspan 贡献的“虚拟列”必须等于表格定义的列宽（通常由第一行决定）

• 嵌套表格或 <div> 里强行模拟合并，会导致可访问性崩溃、打印样式丢失、屏幕阅读器无法理解结构 <li>动态生成时没同步删掉冗余单元格，比如用 JS 插入 <code>rowspan="2" 却忘了移除下一行同列的 <td> <p>真正安全的合并，永远只发生在静态 HTML 结构层面，且必须手动校验每一行的单元格逻辑总数。</p> <p>复杂点不在属性本身，而在于合并后整张表的行列对齐必须靠人工推算——浏览器不会报错，但错一位，整行就塌陷。别信“差不多看着对”，打开开发者工具看 <code>table 渲染后的盒模型，才是唯一验证方式。