HTML 表格合并单元格的实现方式主要通过两个属性完成：rowspan 和 colspan。
- rowspan：跨行合并（占用多行，垂直合并）
- colspan：跨列合并（占用多列，水平合并）
1. 基本语法
html
<td rowspan="n">内容</td> <!-- 合并 n 行 -->
<td colspan="m">内容</td> <!-- 合并 m 列 -->
- rowspan 和 colspan 的值必须是正整数（默认值为 1）。
- 被合并掉的单元格不要再写 <td> 或 <th>，否则会造成错位。
2. 简单示例：跨列合并（colspan）
html
<table border="1">
<tr>
<th colspan="3">表头：跨3列</th>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
</table>
效果：
| 表头：跨3列 | |
|---|---|
| A1 | A2 |
3. 简单示例：跨行合并（rowspan）
html
<table border="1">
<tr>
<th rowspan="3">跨3行</th>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>B3</td>
<td>C3</td>
</tr>
</table>
效果：
| 跨3行 | B1 | C1 |
|---|---|---|
| B2 | C2 | |
| B3 | C3 |
4. 综合示例：同时跨行 + 跨列
html
<table border="1" style="width: 100%; text-align: center;">
<tr>
<th rowspan="2">姓名</th>
<th rowspan="2">班级</th>
<th colspan="3">成绩</th>
</tr>
<tr>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>一班</td>
<td>95</td>
<td>88</td>
<td>183</td>
</tr>
<tr>
<!-- 张三 被 rowspan 合并，无需写 -->
<td>二班</td>
<td>92</td>
<td>90</td>
<td>182</td>
</tr>
<tr>
<td>李四</td>
<td>一班</td>
<td>78</td>
<td>85</td>
<td>163</td>
</tr>
</table>
效果（带样式更直观）：
| 姓名 | 班级 | 成绩 | ||
|---|---|---|---|---|
| 数学 | 英语 | 总分 | ||
| 张三 | 一班 | 95 | 88 | 183 |
| 二班 | 92 | 90 | 182 | |
| 李四 | 一班 | 78 | 85 | 163 |
5. 常见错误 & 避坑指南
| 错误情况 | 后果 | 正确做法 |
|---|---|---|
| 被合并的单元格还写了 <td> | 表格错位、单元格多出来 | 删除被合并掉的 <td> 或 <th> |
| rowspan/colspan 值写错了 | 表格高度/宽度不匹配 | 仔细计算实际占用的行数/列数 |
| 在 <th> 上用了 rowspan | 部分浏览器兼容性问题 | 现代浏览器都支持，但推荐 <td> 统一 |
| 嵌套表格时合并 | 容易混乱 | 尽量避免在复杂表格中使用嵌套 |
6. 现代增强：CSS 辅助美化
css
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
7. 总结：一句话记住“rowspan 管垂直（跨行），colspan 管水平（跨列）”
合并后一定删除被占用的 <td>，否则表格必错位！如果需要更复杂的表格（如多层表头、动态合并），也可以告诉我，我可以提供 JavaScript 动态生成或更高级的示例。