colspan和rowspan是唯一合法、无需JS的原生表格合并方案，其他CSS伪装方式会破坏语义与可访问性；colspan需保证行内单元格总数不变，rowspan则必须删除后续行对应位置的单元格，混合使用时须精确计算并清除覆盖区域内的所有td。
直接说结论：colspan 和 rowspan 是唯一合法、无需 JS 的原生方案，其他方式（比如用 CSS 伪装合并）会破坏语义、损害可访问性，且在屏幕阅读器或打印时大概率出错。
colspan 水平合并列：填对数字，别漏删后续单元格
当你想让一个 <td> 或 <th> 占据多列，就加 colspan="n"。关键不是“写上去就行”，而是要确保整行的列总数不变——否则浏览器会自动补空单元格，导致错位。
常见错误现象：
- 表格右边突然多出一列空白
- 下一行内容整体右移一格
- 边框线断开或重叠
实操建议：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
colspan="3"表示这个单元格“吃掉”它右边连续的 2 个单元格位置（共占 3 列） - 同一行中，所有
colspan值 + 普通单元格数必须等于该表定义的总列数（比如表头<th>有 4 个，则这一行所有colspan和单格加起来得是 4） - 不需要手动删其他
<td>，因为它是“横向覆盖”，只影响当前行
示例（正确）：
<table border="1">
<tr>
<th colspan="2">姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>李四</td>
<td>30</td>
</tr>
</table>rowspan 垂直合并行：目标单元格写属性，后续行必须删对应 td
rowspan 是初学者翻车最多的地方。它不光要设属性，还强制要求你「主动删掉」后面几行里本该出现的单元格——否则浏览器会把它们当真实内容渲染，直接撑乱结构。
常见错误现象：
- 合并单元格下方多出重复文字
- 某列突然变宽，其他列被压缩
- 表格高度异常，出现多余空行
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
rowspan="2"表示该单元格向下“占用”下一行同一列的位置，因此下一行的该列<td>必须删除 - 目标单元格永远是最上面那个（跨行合并从上往下算）
- 如果合并 3 行，就要删掉接下来 2 行中同一列的
<td>，一个都不能留
示例（正确）：
<table border="1">
<tr>
<td rowspan="2">部门</td>
<td>张三</td>
</tr>
<tr>
<td>李四</td>
</tr>
</table>⚠️ 错误写法（多写了第二行第一个 <td>）：
<tr> <td rowspan="2">部门</td> <td>张三</td> </tr> <tr> <td>【这里不能有】</td><!-- 这个 td 必须删掉 --> <td>李四</td> </tr>
colspan + rowspan 混合使用：先定目标，再数格子，最后清场
一个单元格既跨行又跨列时，两个属性可以同时写在同一个 <td> 上，但逻辑更脆：稍有计算偏差，整个表格就偏移。这不是语法问题，是布局建模问题。
使用场景：
- 报表左上角汇总标题（如“Q2 销售数据”横跨 3 列纵跨 2 行）
- 带分组的嵌套表格（如“技术部”下面并列“前端”“后端”，各自再列人员）
实操要点：
- 先画草图，标出每行每列实际应有几个“逻辑单元格”
- 确定目标单元格（最左上那个），填
rowspan="X"和colspan="Y" - 从目标单元格起，向下 X−1 行、向右 Y−1 列范围内的所有
<td>都要删掉 - 避免在
<thead>和<tbody>交界处跨行合并，容易触发解析歧义
示例（2×2 合并）：
<table border="1">
<tr>
<td rowspan="2" colspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>最容易被忽略的点：合并后的单元格内容如果较多，vertical-align 和 padding 会影响视觉居中效果；而 table-layout: fixed 虽能稳定列宽，但会让 colspan 单元格无法自动适应内容——这些细节不报错，却让表格在不同设备上看起来“不太对”。
