下面是一篇完整教程文章，详细讲解 HTML 表格合并（跨行、跨列） 的实现方式，适合博客 / WordPress / 自媒体平台使用，包含示例代码与应用场景说明。

HTML 表格合并的具体实现方式（跨行与跨列教程）

在网页开发中，HTML 表格（<table>）是展示数据最直观的方式。
但很多时候，我们希望合并单元格，让表格结构更清晰、内容更紧凑。

本文将详细讲解 跨列合并（colspan） 与 跨行合并（rowspan） 的具体实现方法，并附带示例。

一、基础表格结构

HTML 表格的基本结构如下：

&lt;table border="1">
  &lt;tr>
    &lt;th>姓名&lt;/th>
    &lt;th>年龄&lt;/th>
    &lt;th>性别&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>张三&lt;/td>
    &lt;td>25&lt;/td>
    &lt;td>男&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>李四&lt;/td>
    &lt;td>28&lt;/td>
    &lt;td>女&lt;/td>
  &lt;/tr>
&lt;/table>

效果：

姓名年龄性别
张三25男
李四28女

二、跨列合并（colspan）

跨列合并 是指某个单元格占据 多列宽度。

1️⃣ 语法

&lt;td colspan="列数">内容&lt;/td>

2️⃣ 示例：表头跨列

&lt;table border="1">
  &lt;tr>
    &lt;th colspan="3">学生信息表&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;th>姓名&lt;/th>
    &lt;th>年龄&lt;/th>
    &lt;th>性别&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>张三&lt;/td>
    &lt;td>25&lt;/td>
    &lt;td>男&lt;/td>
  &lt;/tr>
&lt;/table>

效果：

学生信息表
姓名年龄性别
张三25男

✅ 应用场景：

  • 表头合并
  • 总结行（如合并多列显示“总计”）
  • 数据分组

三、跨行合并（rowspan）

跨行合并 是指某个单元格占据 多行高度。

1️⃣ 语法

&lt;td rowspan="行数">内容&lt;/td>

2️⃣ 示例：相同类别跨行

&lt;table border="1">
  &lt;tr>
    &lt;th>班级&lt;/th>
    &lt;th>姓名&lt;/th>
    &lt;th>成绩&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td rowspan="2">一班&lt;/td>
    &lt;td>张三&lt;/td>
    &lt;td>90&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>李四&lt;/td>
    &lt;td>85&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td rowspan="2">二班&lt;/td>
    &lt;td>王五&lt;/td>
    &lt;td>88&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>赵六&lt;/td>
    &lt;td>92&lt;/td>
  &lt;/tr>
&lt;/table>

效果：

班级姓名成绩
一班张三90
李四85
二班王五88
赵六92

✅ 应用场景：

  • 相同分类合并
  • 分组表格
  • 数据统计或报表

四、跨行跨列结合使用

有时，我们需要同时跨行和跨列。

示例：

&lt;table border="1">
  &lt;tr>
    &lt;th rowspan="2" colspan="2">姓名&lt;/th>
    &lt;th>语文&lt;/th>
    &lt;th>数学&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;th>90&lt;/th>
    &lt;th>95&lt;/th>
  &lt;/tr>
&lt;/table>

效果：

姓名语文数学
9095

✅ 应用场景：

  • 表头复杂结构
  • 报表 / Excel 风格的表格
  • 分类统计数据

五、表格合并注意事项

  1. 跨行跨列不要超出表格总列数/总行数
  2. 合并单元格后，剩余行/列必须保持正确列数
  3. 避免 rowspan 与 colspan 重叠错误
  4. 视觉上尽量保持对齐和美观

六、总结

通过 colspan 和 rowspan，我们可以：

  • 简化表格布局
  • 实现报表、数据分组、合并表头
  • 提升表格可读性

示例小结：

功能HTML 属性
跨列合并colspan="列数"
跨行合并rowspan="行数"
同时跨行跨列两者结合即可

掌握这两个属性，你就能制作出任意复杂布局的表格，无需依赖额外插件。