下面是一篇完整教程文章，详细讲解 HTML 表格合并（跨行、跨列） 的实现方式，适合博客 / WordPress / 自媒体平台使用，包含示例代码与应用场景说明。
HTML 表格合并的具体实现方式（跨行与跨列教程）
在网页开发中，HTML 表格（<table>）是展示数据最直观的方式。
但很多时候，我们希望合并单元格，让表格结构更清晰、内容更紧凑。
本文将详细讲解 跨列合并（colspan） 与 跨行合并（rowspan） 的具体实现方法，并附带示例。
一、基础表格结构
HTML 表格的基本结构如下：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>女</td>
</tr>
</table>
效果：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 25 | 男 |
| 李四 | 28 | 女 |
二、跨列合并（colspan）
跨列合并 是指某个单元格占据 多列宽度。
1️⃣ 语法
<td colspan="列数">内容</td>
2️⃣ 示例：表头跨列
<table border="1">
<tr>
<th colspan="3">学生信息表</th>
</tr>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
</table>
效果：
| 学生信息表 | ||
|---|---|---|
| 姓名 | 年龄 | 性别 |
| 张三 | 25 | 男 |
✅ 应用场景：
- 表头合并
- 总结行（如合并多列显示“总计”）
- 数据分组
三、跨行合并（rowspan）
跨行合并 是指某个单元格占据 多行高度。
1️⃣ 语法
<td rowspan="行数">内容</td>
2️⃣ 示例：相同类别跨行
<table border="1">
<tr>
<th>班级</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">一班</td>
<td>张三</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
</tr>
<tr>
<td rowspan="2">二班</td>
<td>王五</td>
<td>88</td>
</tr>
<tr>
<td>赵六</td>
<td>92</td>
</tr>
</table>
效果：
| 班级 | 姓名 | 成绩 |
|---|---|---|
| 一班 | 张三 | 90 |
| 李四 | 85 | |
| 二班 | 王五 | 88 |
| 赵六 | 92 |
✅ 应用场景：
- 相同分类合并
- 分组表格
- 数据统计或报表
四、跨行跨列结合使用
有时，我们需要同时跨行和跨列。
示例：
<table border="1">
<tr>
<th rowspan="2" colspan="2">姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<th>90</th>
<th>95</th>
</tr>
</table>
效果：
| 姓名 | 语文 | 数学 | |
|---|---|---|---|
| 90 | 95 |
✅ 应用场景：
- 表头复杂结构
- 报表 / Excel 风格的表格
- 分类统计数据
五、表格合并注意事项
- 跨行跨列不要超出表格总列数/总行数
- 合并单元格后，剩余行/列必须保持正确列数
- 避免 rowspan 与 colspan 重叠错误
- 视觉上尽量保持对齐和美观
六、总结
通过 colspan 和 rowspan，我们可以：
- 简化表格布局
- 实现报表、数据分组、合并表头
- 提升表格可读性
示例小结：
| 功能 | HTML 属性 |
|---|---|
| 跨列合并 | colspan="列数" |
| 跨行合并 | rowspan="行数" |
| 同时跨行跨列 | 两者结合即可 |
掌握这两个属性，你就能制作出任意复杂布局的表格，无需依赖额外插件。