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