HTML表格单元格合并：colspan与rowspan的使用方法
在HTML网页开发中，表格是展示结构化数据的重要元素。当我们需要让表格呈现更复杂的布局时，合并单元格是必备的操作。HTML提供了两个核心属性来实现单元格合并：colspan用于横向合并列，rowspan用于纵向合并行。本文将详细介绍这两个属性的用法、注意事项和实际案例。
一、基础概念：colspan与rowspan的作用
HTML表格由<table>标签定义，内部通过<tr>标签创建行，<td>标签创建普通单元格，<th>标签创建表头单元格。默认情况下，每个单元格占据一行中的一列、一列中的一行，而合并属性可以改变这个默认规则：
colspan：设置单元格横向跨越的列数，值为正整数，表示该单元格会占据对应数量的列宽度。
rowspan：设置单元格纵向跨越的行数，值为正整数，表示该单元格会占据对应数量的行高度。
需要注意的是，这两个属性只能用在<td>或<th>标签上，不能应用于<tr>或其他表格标签。
二、colspan：横向合并单元格
横向合并适用于需要将多列合并为一个单元格的场景，比如表格的标题行需要横跨所有列。
基础示例：合并表头列
下面是一个学生成绩表的示例，表头的第一行需要合并三列，显示“学生成绩统计”：
<table border="1" cellpadding="10" cellspacing="0"> <tr> <th colspan="3">学生成绩统计</th> </tr> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> </tr> <tr> <td>张三</td> <td>92</td> <td>88</td> </tr> <tr> <td>李四</td> <td>85</td> <td>95</td> </tr> </table>
上述代码中，第一个<tr>里的<th>标签设置了colspan="3"，表示这个表头单元格会横向占据3列的宽度，因此这一行不需要再写其他<th>或<td>标签，否则表格布局会错乱。
非表头行的横向合并
普通数据行也可以使用colspan，比如某一行需要显示一个跨多列的备注信息：
<table border="1" cellpadding="10" cellspacing="0"> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> <tr> <td>笔记本</td> <td>5000</td> <td>2</td> <td>10000</td> </tr> <tr> <td colspan="4">备注：所有商品享受7天无理由退换</td> </tr> </table>
这里备注行的<td>设置了colspan="4"，刚好覆盖表格的4列，实现了整行备注的效果。
三、rowspan：纵向合并单元格
纵向合并适用于单元格需要跨多行显示的场景，比如同一类别下的多个子项需要共享一个父类别单元格。
基础示例：合并分类行
下面是一个商品分类表的示例，电子产品分类下有两个商品，需要合并分类单元格：
<table border="1" cellpadding="10" cellspacing="0"> <tr> <th>分类</th> <th>商品名称</th> <th>价格</th> </tr> <tr> <td rowspan="2">电子产品</td> <td>鼠标</td> <td>89</td> </tr> <tr> <td>键盘</td> <td>199</td> </tr> <tr> <td rowspan="2">文具</td> <td>笔记本</td> <td>15</td> </tr> <tr> <td>钢笔</td> <td>45</td> </tr> </table>
上述代码中，“电子产品”的<td>设置了rowspan="2"，表示这个单元格会纵向占据2行的高度，因此第二行（鼠标行）不需要再写分类单元格，第三行（键盘行）也不需要；同理“文具”分类也合并了2行。
同时合并行和列
实际场景中也可以同时使用colspan和rowspan，实现更复杂的布局，比如下面的考勤表：
<table border="1" cellpadding="10" cellspacing="0"> <tr> <th rowspan="2">姓名</th> <th colspan="3">出勤情况</th> </tr> <tr> <th>迟到</th> <th>早退</th> <th>缺勤</th> </tr> <tr> <td>王五</td> <td>1次</td> <td>0次</td> <td>0次</td> </tr> <tr> <td>赵六</td> <td>0次</td> <td>1次</td> <td>0次</td> </tr> </table>
这里表头部分第一行“姓名”用了rowspan="2"纵向合并两行，“出勤情况”用了colspan="3"横向合并三列，第二行补充出勤的三个子项表头，实现了层级表头的效果。
四、使用注意事项
合并后需要删除多余单元格：使用colspan合并了n列，那么当前行除了被合并的单元格外，需要减少n-1个<td>或<th>；使用rowspan合并了n行，那么后续n-1行中需要减少1个对应位置的单元格，否则表格会出现空白或错乱。
属性值为正整数：colspan和rowspan的值必须是1及以上的整数，默认值为1，即不合并。
不要过度合并：虽然合并单元格可以实现复杂布局，但过度使用会让表格代码难以维护，同时可能影响屏幕阅读器等无障碍工具的解析。
兼容所有浏览器：colspan和rowspan是HTML的规范属性，所有主流浏览器都支持，不需要额外兼容处理。
五、常见问题解答
问：colspan和rowspan可以用在<tr>标签上吗？
答：不可以，这两个属性只能用于<td>（普通单元格）和<th>（表头单元格）标签，用在<tr>上不会生效。
问：合并单元格后表格边框显示异常怎么办？
答：通常是因为表格的border-collapse属性设置问题，可以在<table>的样式中设置border-collapse: collapse，让边框合并为单一边框，避免双重边框问题。示例代码如下：
<table style="border-collapse: collapse;" border="1" cellpadding="10"> <tr> <th colspan="2">测试合并</th> </tr> <tr> <td>列1</td> <td>列2</td> </tr> </table>
注意这里的style属性仅作为示例说明，实际开发中建议将样式写在外部CSS文件中，避免在HTML标签内联样式。
掌握colspan和rowspan的使用，就可以灵活实现各种复杂的HTML表格布局，满足不同场景的数据展示需求。