rowspan属性实现垂直合并,指从当前行起向下占据n行高度;设rowspan="n"后,该列后续n-1行须跳过对应单元格,否则结构错乱;需严格匹配实际行数,并可与colspan搭配使用。

用 rowspan 属性就能实现垂直方向的单元格合并,关键不是“跨几行”,而是“占几行高度”——从当前单元格所在行开始,向下连续占据指定数量的行位置,包括自己那一行。
rowspan 的基本用法
在 <td> 或 <code><th> 标签里写 <code>rowspan="N",N 就是这个单元格要覆盖的行数。比如:
-
<td rowspan="2">分类A</td>:该单元格占据当前行 + 下一行,共两行高; -
<td rowspan="4">前端</td>:从当前行起,向下占满四行高度。
被合并的列必须跳过后续行
这是最容易出错的地方。一旦某个单元格设了 rowspan="3",它所在列的后两行(即第2、第3行)就不能再出现 <td> 或 <code><th>,否则表格结构会错乱。
<ul>
<li>✅ 正确:第1行写 <code><td rowspan="3">前端</td>
<td>HTML</td>;第2行只写 <td>CSS</td>(不写左侧单元格);第3行只写 <td>JS</td>;
<td>,浏览器可能自动修正,导致内容偏移或空白。
<h3>行数必须严格匹配</h3>
<p>rowspan 的数值要和实际需要覆盖的行数完全一致。比如分类标签要对应 5 行数据,就必须设 <code>rowspan="5",且后续 4 行都跳过该列。- 如果只写了 3 行数据但设了
rowspan="5",最后两行会留空; - 如果写了 6 行数据但只设
rowspan="5",第6行的该列会多出一个未合并的单元格,破坏对齐。
常和 colspan 搭配使用
复杂表头经常同时用到两个属性。例如第一行左上角单元格既要跨 2 行又要跨 2 列,就写:<th rowspan="2" colspan="2">课程信息</th>。注意顺序无关,但必须确保整张表的行列总数仍保持逻辑一致。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











