colspan和rowspan分别实现HTML表格单元格的横向跨列与纵向跨行合并。colspan="n"使单元格横跨n列,常用于表头合并如“成绩汇总”覆盖多科;rowspan="n"让单元格纵跨n行,需删除下方被占单元格以防错位;两者可结合使用实现复杂布局,如同时跨2行2列,关键在于按序编写、结构对齐,确保表格清晰准确。

在HTML表格中,单元格合并通过 colspan 和 rowspan 属性实现。它们分别控制单元格横向和纵向的跨列或跨行显示。
横向合并:使用 Colspan
colspan 用于让一个单元格横跨多列。比如,你想让某一行中的一个单元格占两列宽度,就可以设置 colspan="2"。
常见场景:表头合并多个列,如“成绩汇总”覆盖“语文、数学、英语”三列。
跨3列的内容
纵向合并:使用 Rowspan
rowspan 让单元格纵向跨越多行。例如,某一列的“类别”信息适用于下面三行数据,可用 rowspan="3" 合并。
立即学习“前端免费学习笔记(深入)”;
注意:使用 rowspan 后,下方被合并的行中对应位置的单元格需要删除,否则会导致布局错乱。
跨3行的内容
同时跨行跨列的合并
可以同时使用 colspan 和 rowspan,适用于复杂表头或统计表格。
关键是理清表格结构,按行列顺序逐行编写,避免遗漏或重复单元格。
示例:一个单元格横跨2列且纵跨2行:
跨行又跨列
基本上就这些。合理使用 colspan 和 rowspan,能让表格更清晰,重点更突出,但要注意结构对齐,避免错位。











