在HTML开发中，表格是展示结构化数据的常用组件，很多时候默认的表格布局无法满足需求，需要将多个单元格合并成更大的单元格，这时候就需要用到colspan和rowspan属性。
colspan属性：合并列
colspan的作用是让一个单元格横向跨越多个列，属性值表示要合并的列数。使用时只需要在目标<td>或<th>标签上添加colspan="n"，n为要合并的列的数量，被合并的后续列就不需要再单独写对应的单元格标签了。
比如要做一个表头跨3列的表格，代码如下：
<table border="1" width="500">
<tr>
<th colspan="3">学生成绩表</th>
</tr>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>95</td>
</tr>
</table>上面的代码中，第一行的表头单元格设置了colspan="3"，所以它会横向占满3列的位置，第二行只需要写3个表头就可以和第一行对齐。
rowspan属性：合并行
rowspan的作用是让一个单元格纵向跨越多个行，属性值表示要合并的行数。使用时在目标<td>或<th>标签上添加rowspan="n"，n为要合并的行数，后续行中对应位置的单元格就不需要再写了。
比如要合并两行的姓名列，代码如下：
<table border="1" width="500">
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>这里第一行的姓名单元格设置了rowspan="2"，所以它纵向占据两行的位置，第二行就不需要再写姓名单元格，表格依然可以正常对齐。
同时合并行和列
实际开发中经常会遇到需要同时合并行和列的场景，这时候可以同时使用colspan和rowspan属性。比如下面的表格同时合并了2行2列：
<table border="1" width="500">
<tr>
<td rowspan="2" colspan="2">合并2行2列</td>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
<tr>
<td>数据5</td>
<td>数据6</td>
<td>数据7</td>
<td>数据8</td>
</tr>
</table>注意事项
- 合并单元格后，要确保表格的总列数和总行数逻辑正确，避免出现单元格错位的情况。
colspan和rowspan的属性值必须是正整数，不能是0或者负数。- 这两个属性只能用在<td>和<th>标签上，用在其他表格标签上没有效果。
- 如果使用CSS的
display属性修改了<table>相关元素的显示类型，合并属性可能会失效，建议保持表格的默认显示模式。