在HTML表格开发中，合并单元格是调整表格布局的常见操作，主要通过<td>或<th>标签的两个核心属性实现，分别是用于纵向合并的rowspan和用于横向合并的colspan。
一、rowspan属性：纵向合并单元格
rowspan属性用于指定当前单元格纵向跨越的行数，取值为大于等于1的整数，默认值为1。使用rowspan合并单元格时，需要注意被合并的后续行中，要删除对应位置的单元格标签，否则表格结构会错乱。
基本使用示例
下面的代码实现了一个3行3列的表格，其中第一列的第一个单元格纵向合并了3行：
<table border="1" width="300">
<tr>
<td rowspan="3">纵向合并3行</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<!-- 这里不需要再写第一列的td，因为已经被上面的rowspan合并 -->
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<!-- 这里同样不需要写第一列的td -->
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
使用注意事项
- rowspan的取值不能超过当前列剩余的总行数，否则表格渲染会出现异常
- 合并后，被跨越的行中对应位置的<td>或<th>必须删除，不能保留空标签
- rowspan也可以用在<th>表头标签上，实现表头的纵向合并
二、colspan属性：横向合并单元格
colspan属性用于指定当前单元格横向跨越的列数，取值同样为大于等于1的整数，默认值为1。使用colspan合并时，需要删除当前行中后续被合并列的单元格标签。
基本使用示例
下面的代码实现了一个3行3列的表格，其中第一行的第一个单元格横向合并了3列：
<table border="1" width="300">
<tr>
<td colspan="3">横向合并3列</td>
<!-- 这里不需要再写第二、第三列的td，因为已经被colspan合并 -->
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
使用注意事项
- colspan的取值不能超过当前行的总列数，超出会导致表格列数不匹配
- 合并后，当前行中被跨越列的<td>或<th>必须删除，不能留空
- 同一行可以同时存在多个colspan合并的单元格，只要总列数符合表格定义即可
三、rowspan与colspan混合使用
实际开发中经常需要同时实现横向和纵向的合并，只需要同时给单元格添加rowspan和colspan属性即可，注意要同时删除被合并的所有对应单元格。
下面的代码实现了一个混合合并的表格：
<table border="1" width="400">
<tr>
<td rowspan="2" colspan="2">合并2行2列</td>
<td>第一行第三列</td>
<td>第一行第四列</td>
</tr>
<tr>
<!-- 第一、第二列的td已经被合并，不需要再写 -->
<td>第二行第三列</td>
<td>第二行第四列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
</tr>
</table>
四、常见问题排查
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 表格列数不对齐 | 合并后未删除多余的单元格标签，或者合并跨度超过表格总列数/总行数 | 检查每行的总列数是否一致，删除被合并的多余单元格，调整合并跨度取值 |
| 合并的单元格内容显示异常 | 合并属性写在了错误的单元格上 | 确认rowspan写在纵向第一个单元格，colspan写在横向第一个单元格 |
| 表格边框显示不完整 | 合并后相邻单元格边框重叠 | 给table添加border-collapse: collapse样式，合并边框显示 |
掌握rowspan和colspan的使用方法后，就可以灵活调整HTML表格的布局，满足各种数据展示的需求，实际使用时注意先规划好表格的结构，再添加合并属性，能有效减少结构错误。