通过rowspan和colspan属性可实现HTML表格单元格的跨行跨列合并。1. colspan用于横向合并,如colspan="3"使单元格占三列;2. rowspan用于纵向合并,如rowspan="2"让单元格占两行;3. 可同时使用两者合并矩形区域,需注意行列布局匹配,避免错位,合理规划表格结构即可实现清晰排版。

在HTML表格中,合并单元格是常见的布局需求。通过rowspan和colspan属性,可以轻松实现单元格的跨行或跨列合并,让表格结构更清晰、排版更灵活。
colspan:横向合并单元格(跨列)
当需要将一个单元格横跨多列时,使用colspan属性。它的值表示该单元格要占据的列数。
例如,一个三列的表格中,标题需要居中并覆盖所有列:
<table border="1"><tr>
<td colspan="3" align="center">学生成绩表</td>
</tr>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
</table>
这里colspan="3"让第一个<td>占据三列宽度。
立即学习“前端免费学习笔记(深入)”;
rowspan:纵向合并单元格(跨行)
如果希望一个单元格在垂直方向上跨越多行,使用rowspan。其值为要合并的行数。
比如,某学生有多科成绩,姓名只需显示一次:
<table border="1"><tr>
<td rowspan="2">张三</td>
<td>数学</td>
<td>85</td>
</tr>
<tr>
<td>英语</td>
<td>90</td>
</tr>
</table>
rowspan="2"使“张三”这个单元格占两行高度,避免重复。
同时使用rowspan和colspan
复杂表格中常需同时跨行跨列。注意总行列数匹配,避免错位。
示例:一个2x2区域被一个单元格占据:
<table border="1"><tr>
<td rowspan="2" colspan="2" align="center">合并区域</td>
<td>右1</td>
</tr>
<tr>
<td>右2</td>
</tr>
</table>
此例中,rowspan="2"和colspan="2"共同作用,合并了左上角2行2列的空间。
掌握rowspan与colspan的关键是理解表格的网格结构,合理规划每行每列的单元格数量。基本上就这些,不复杂但容易忽略细节。











