在html5的表单开发中，经常会遇到需要在表单内嵌入表格来对齐输入项、规整布局的情况，当表格的行列结构需要调整时，就需要用到td标签的colspan和rowspan属性来合并单元格。
colspan和rowspan的基本作用
colspan用于设置单元格横向合并的列数，rowspan用于设置单元格纵向合并的行数，两个属性都只能用在<td>或者<th>标签上，取值为大于等于1的整数。
- colspan：表示当前单元格会占据指定数量的列宽，原本该位置的后续列单元格需要相应减少
- rowspan：表示当前单元格会占据指定数量的行高，原本该位置的后续行单元格需要相应减少
表单内表格单元格合并示例
下面是一个用户信息表单的示例，表单内嵌入了表格，同时使用colspan和rowspan合并了部分单元格：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单内表格合并示例</title>
<style>
table {
border-collapse: collapse;
width: 500px;
}
td {
border: 1px solid #333;
padding: 8px;
}
.label {
width: 120px;
text-align: right;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form action="submit.php" method="post">
<table>
<tr>
<td class="label">用户名</td>
<td colspan="2"><input type="text" name="username" style="width: 100%;"></td>
</tr>
<tr>
<td class="label" rowspan="2">联系方式</td>
<td class="label">手机号</td>
<td><input type="tel" name="phone"></td>
</tr>
<tr>
<td class="label">邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td class="label">备注</td>
<td colspan="2"><textarea name="remark" rows="3" style="width: 100%;"></textarea></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
代码解析
上述示例中，各合并属性的作用如下：
- 第一行的用户名输入框单元格使用了
colspan="2"，横向合并了原本的两列，让输入框占据更宽的宽度 - 联系方式标签单元格使用了
rowspan="2"，纵向合并了两行，对应下方的手机号和邮箱两个输入项行 - 备注行的文本域单元格使用
colspan="2"横向合并两列，和用户名行保持一致的宽度 - 最后一行的提交按钮单元格使用
colspan="3"横向合并全部三列，让按钮居中显示
使用注意事项
在表单内表格使用合并属性时，需要注意以下几点：
- 合并后的单元格总数要和表格的原始行列数匹配，避免出现多余的单元格导致表格结构错乱
- rowspan合并行时，后续行的对应位置不需要再写被合并的<td>标签，否则会多出多余的单元格
- colspan合并列时，当前行的后续单元格数量要相应减少，保证一行内的单元格总占比等于表格的总列数
- 合并后的单元格内如果需要放置表单输入项，正常写入对应的<input>、<select>等表单标签即可，不影响表单数据的提交
常见问题说明
很多开发者会疑惑合并后的单元格提交表单时会不会有问题，实际上单元格合并只是视觉上的布局调整，不会影响表单内输入项name属性的正常提交，只要输入项有正确的name属性，提交时就会正常携带对应的值。
另外需要注意，colspan和rowspan是html5原生的表格属性，不需要额外的css或者js支持，兼容性很好，在所有现代浏览器中都可以正常使用。