使用rowspan和colspan属性可实现HTML表格的单元格合并，1. colspan用于横向合并，使单元格横跨多列，如表头“学生基本信息”占两列；2. rowspan用于纵向合并，让单元格跨越多行，如“一班”合并两行显示；3. 建议合理规划布局，避免结构错乱，保持每行总单元格数一致，结合CSS提升样式与可读性，掌握这些技巧能有效优化表格展示效果。
在HTML表格中实现单元格合并，主要是通过 rowspan 和 colspan 属性来完成。这两个属性分别控制单元格跨越的行数和列数，合理使用可以优化表格布局结构，使信息展示更清晰、美观。
1. 使用 colspan 实现横向单元格合并
当需要将一个单元格横跨多列时，使用 colspan 属性。例如，表头需要合并前两列为一个标题：
<table border="1"><tr>
<th colspan="2">学生基本信息</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>85</td>
</tr>
</table>
这里“学生基本信息”占两列，下方对应两列数据，布局更清晰。
2. 使用 rowspan 实现纵向单元格合并
当某一内容在垂直方向上适用于多行时，使用 rowspan。比如同一班级多名学生共享一个班级名称：
立即学习“前端免费学习笔记（深入）”；
<table border="1"><tr>
<th>班级</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">一班</td>
<td>李四</td>
<td>78</td>
</tr>
<tr>
<td>王五</td>
<td>82</td>
</tr>
</table>
“一班”这个单元格纵向合并两行，避免重复显示。
3. 合并单元格时的布局优化建议
合理使用合并能提升可读性，但需注意结构清晰与语义正确：
- 确保合并后的单元格不影响表格逻辑结构，避免错位或空白单元格遗漏
- 复杂合并时先画草图规划行列分布，防止出现跨行跨列冲突
- 尽量保持每行的单元格总数一致（考虑被合并掉的单元格）
- 结合CSS样式增强视觉效果，如居中对齐文本：
text-align: center; - 对于数据量大的表格，避免过度合并，以免影响可维护性和响应式显示
基本上就这些。掌握 rowspan 和 colspan 的用法，并结合清晰的结构设计，就能有效优化HTML表格的布局表现。不复杂但容易忽略细节，多练习几种常见场景会更熟练。
