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

&lt;table border="1">
  &lt;tr>
    &lt;th colspan="3">表头：跨3列&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>A1&lt;/td>
    &lt;td>A2&lt;/td>
    &lt;td>A3&lt;/td>
  &lt;/tr>
&lt;/table>

效果：

表头：跨3列
A1A2

3. 简单示例：跨行合并（rowspan）

html

&lt;table border="1">
  &lt;tr>
    &lt;th rowspan="3">跨3行&lt;/th>
    &lt;td>B1&lt;/td>
    &lt;td>C1&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>B2&lt;/td>
    &lt;td>C2&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>B3&lt;/td>
    &lt;td>C3&lt;/td>
  &lt;/tr>
&lt;/table>

效果：

跨3行B1C1
B2C2
B3C3

4. 综合示例：同时跨行 + 跨列

html

&lt;table border="1" style="width: 100%; text-align: center;">
  &lt;tr>
    &lt;th rowspan="2">姓名&lt;/th>
    &lt;th rowspan="2">班级&lt;/th>
    &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 rowspan="2">张三&lt;/td>
    &lt;td>一班&lt;/td>
    &lt;td>95&lt;/td>
    &lt;td>88&lt;/td>
    &lt;td>183&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;!-- 张三 被 rowspan 合并，无需写 -->
    &lt;td>二班&lt;/td>
    &lt;td>92&lt;/td>
    &lt;td>90&lt;/td>
    &lt;td>182&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>李四&lt;/td>
    &lt;td>一班&lt;/td>
    &lt;td>78&lt;/td>
    &lt;td>85&lt;/td>
    &lt;td>163&lt;/td>
  &lt;/tr>
&lt;/table>

效果（带样式更直观）：

姓名班级成绩
数学英语总分
张三一班9588183
二班9290182
李四一班7885163

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 动态生成或更高级的示例。