HTML表格中如何合并相邻的几行（基础教程）-html教程-PHP中文网

rowspan属性用于让单元格向下跨行合并，必须写在最上方单元格中，值为跨行数，后续对应列位置不得再出现或，否则导致错行或空白列。

html表格中如何合并相邻的几行（基础教程）

直接用 rowspan 属性，不是加样式、不是写 JS，也不是套嵌套表格——它就写在 <td> 或 <code><th> 标签里，值填数字就行。 <h3>rowspan 是什么，为什么必须写在最上面那个单元格里</h3> <p><code>rowspan 的作用是让当前单元格“向下占位”，跨过下面 N−1 行。它只对当前行生效，且后续对应列位置不能再出现 <td>，否则浏览器会当成新单元格渲染，导致错行或空白列。 <ul><li>错误写法：<code><tr><td rowspan="2">A</td></tr> <tr><td>B</td></tr> → 第二行又写了 <td>，实际渲染成两行各一个单元格，<code>rowspan 失效

正确写法：

<tr>
<td rowspan="2">A</td>
<td>X</td>
</tr>
<tr><td>Y</td></tr>

→ 第二行同一列位置不写

<td>，留空即可
<li>如果合并 3 行，就写 <code>rowspan="3"

，后面连续两行的该列都得删掉

<td>


<h3>常见错位现象和排查方向</h3>
<p>表格突然多出一列、某行内容塌陷、边框断开——八成是 <code>rowspan

和实际行数没对齐。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

检查每行 <td> + <code><th> 的总数量（含被 <code>colspan 占位的）是否一致；rowspan 不影响本行计数，但会影响后续行的列布局
用浏览器开发者工具选中单元格，看 computed 中 height 是否异常，或元素树里有没有意外多出来的 <td> <li>如果用了 <code>border-collapse: collapse 却仍有双线，说明有相邻单元格没删干净，导致边框重复绘制

和 colspan 混用时的关键约束

同一个 <td> 可以同时写 <code>rowspan 和 colspan，但必须同步调整周围单元格数量，否则逻辑列数会崩。

例如：<td rowspan="2" colspan="3">标题</td> → 它占 2 行 × 3 列，那么：
- 本行其余位置要少写 2 个 <td>（因为已占 3 列） <li>下一行对应这 3 列的位置，一个 <code><td> 都不能写 <li>不要指望 CSS 能“修复”结构错误；<code>display: table-cell 等模拟表格行为对 rowspan 无效
- 服务端生成 HTML 时，动态计算 rowspan 值容易漏删后续单元格，建议先生成完整二维数组再转 HTML

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！