HTML中合并三个单元格必须先确认其构成完整矩形，仅支持1×3、3×1等矩形情形；L形或不规则组合不可行，应改用CSS Grid或Flexbox替代。
合并三个单元格必须先明确方向和形状
HTML 里没有“直接选中三个单元格然后一键合并”的语法。colspan 和 rowspan 只能定义一个单元格的横向或纵向跨度，而三个单元格的组合可能呈 L 形、直线（横或竖）、或不相邻——但只有矩形区域能被合法合并。所以第一步永远是：画出你要合并的区域，确认它是否构成一个完整矩形（比如 1×3、3×1 或 2×2 中缺一个角？那不行）。
常见可合并的三种矩形情形：
- 同一行连续三列 → 用
colspan="3" - 同一列连续三行 → 用
rowspan="3" - 2 行 × 2 列共四个位置，只填其中三个？不能只合并三个——必须填满整个矩形，或重新设计布局
同一行合并三列：colspan="3" 的写法和易错点
这是最直观的情形，比如表头“姓名”要覆盖“姓”“名”“英文名”三列。
- 把
colspan="3"加在目标<th>或<td>标签上，例如：<th colspan="3">姓名</th> - 这一行后续不能再有三个
<td>，否则总列数会超——本该由三个单元格占的位置，现在被一个撑满了 - 下一行仍需保持逻辑列数一致，比如上行是 3 列（因 colspan 合并），下行也得是 3 列内容（哪怕拆成
<td></td><td></td><td></td>）
同一列合并三行：rowspan="3" 必须删掉后续两行对应位置的单元格
这是最容易出错的地方：写了 rowspan="3" 却没删单元格，表格立刻错位。
立即学习“前端免费学习笔记（深入）”；
- 在第一行该列的
<td>上加rowspan="3"，例如：<td rowspan="3">部门</td> - 第二行、第三行中，**同一列位置必须完全不写任何
<td>或<th>**——不是留空，是彻底删除标签 - 如果第二行你仍写了
<td>销售</td>，浏览器会把它当成新列，导致整行向右偏移，视觉上断开 - 第四行起，该列才恢复正常使用
想合并非矩形的三个单元格？别硬套 colspan/rowspan
比如想把 (1,1)、(1,2)、(2,1) 这三个位置合并（L 形），HTML 原生不支持。强行用 rowspan 和 colspan 混合会破坏表格结构，最终渲染不可预测。
- CSS Grid 或 Flexbox 是更可控的替代方案，尤其适合不规则分组
- 若必须用
<table>，可考虑拆成两个独立小表，或用border和background视觉模拟“合并感”，但语义上仍是分离单元格 - 导出为 Excel 或打印时，非矩形合并几乎必然失败——这点常被忽略
