HTML如何合并表格单元格？colspan和rowspan怎么用？-html教程-PHP中文网

HTML如何合并表格单元格？colspan和rowspan怎么用？

星降

发布： 2025-08-13 19:57:01

原创

737人浏览过

使用colspan和rowspan可合并HTML表格单元格，colspan横向合并列，rowspan纵向合并行，常用于表头分组、数据汇总、日程安排等场景，需注意单元格数量匹配、避免过度合并及响应式兼容性问题，结合CSS可控制边框、背景、对齐等样式，提升表格可读性与美观性。

html如何合并表格单元格？colspan和rowspan怎么用？

HTML合并表格单元格主要通过

colspan

登录后复制

和

rowspan

登录后复制

属性来实现，

colspan

登录后复制

用于横向合并列，

rowspan

登录后复制

用于纵向合并行。掌握这两个属性，就能灵活地创建各种复杂的表格布局。

解决方案：

使用

colspan

登录后复制

和

rowspan

登录后复制

属性可以轻松合并HTML表格单元格。

colspan

登录后复制

属性定义单元格应横跨的列数，而

rowspan

登录后复制

属性定义单元格应横跨的行数。

<!DOCTYPE html>
<html>
<head>
<title>HTML表格单元格合并</title>
</head>
<body>

<table border="1">
  <tr>
    <th colspan="2">合并列的例子</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

<br>

<table border="1">
  <tr>
    <th rowspan="2">合并行的例子</th>
    <td>单元格1</td>
  </tr>
  <tr>
    <td>单元格2</td>
  </tr>
</table>

<br>

<table border="1">
  <tr>
    <th></th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
  </tr>
  <tr>
    <th rowspan="2">上午</th>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>英语</td>
    <td>语文</td>
  </tr>
  <tr>
    <th rowspan="2">下午</th>
    <td>英语</td>
    <td>语文</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
  </tr>
</table>

</body>
</html>

登录后复制

代码解释：

立即学习“前端免费学习笔记（深入）”；

第一个表格使用了
```
colspan="2"
```
登录后复制
，使得表头单元格横跨两列。
第二个表格使用了
```
rowspan="2"
```
登录后复制
，使得表头单元格纵跨两行。
第三个表格展示了
```
rowspan
```
登录后复制
在更复杂场景下的应用，例如课程表。

colspan和rowspan的常见使用场景有哪些？

colspan

登录后复制

和

rowspan

登录后复制

在创建复杂表格布局时非常有用，例如：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

表头分组： 使用
```
colspan
```
登录后复制
可以将表头分成多个逻辑组，提高表格的可读性。比如，一个包含个人信息的表格，可以用
```
colspan
```
登录后复制
将姓名、联系方式、地址等分成不同的组。
数据汇总： 在数据表格中，可以使用
```
colspan
```
登录后复制
或
```
rowspan
```
登录后复制
来显示汇总数据，例如总计、平均值等。
日程安排： 像课程表、会议安排表等，
```
rowspan
```
登录后复制
可以用来表示某个活动持续的时间段。
产品规格： 在电商网站上，可以用
```
colspan
```
登录后复制
和
```
rowspan
```
登录后复制
来清晰地展示产品的各种规格参数。

合并单元格时需要注意什么？有没有可能导致表格布局混乱？

合并单元格时，需要仔细规划表格的结构，避免出现以下问题：

单元格数量不匹配： 如果某一行或列的单元格数量与预期不符，会导致表格布局错乱。需要确保每一行和每一列的单元格数量是正确的，包括那些被
```
colspan
```
登录后复制
或
```
rowspan
```
登录后复制
合并的单元格。
过度合并： 过度使用
```
colspan
```
登录后复制
和
```
rowspan
```
登录后复制
可能会使表格结构过于复杂，难以维护。应该尽量保持表格结构的简洁和清晰。
响应式设计问题： 在响应式设计中，合并单元格可能会导致在小屏幕设备上显示问题。需要使用CSS媒体查询来调整表格的布局，例如将合并的单元格拆分，或者使用滚动条。

一些老的浏览器可能对

colspan

登录后复制

和

rowspan

登录后复制

的支持不太好，需要注意兼容性问题。现在的主流浏览器一般没有问题。

如何使用CSS更好地控制合并单元格的样式？

虽然

colspan

登录后复制

和

rowspan

登录后复制

控制了单元格的合并，但CSS可以用来更精细地控制合并单元格的样式，例如：

边框样式： 可以使用CSS来设置合并单元格的边框样式，例如颜色、粗细、类型等。
背景颜色： 可以为合并的单元格设置不同的背景颜色，以突出显示。
文本对齐： 可以使用CSS来控制合并单元格中的文本对齐方式，例如水平对齐和垂直对齐。
内边距和外边距： 可以使用CSS来调整合并单元格的内边距和外边距，以控制单元格内容与边框之间的距离。

<!DOCTYPE html>
<html>
<head>
<title>CSS控制合并单元格样式</title>
<style>
table {
  border-collapse: collapse; /* 合并边框 */
  width: 50%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th[colspan] {
  background-color: #f2f2f2;
  text-align: center;
}

td[rowspan] {
  background-color: #e6f7ff;
  vertical-align: top; /* 垂直方向顶部对齐 */
}
</style>
</head>
<body>

<table >
  <tr>
    <th colspan="2">产品信息</th>
  </tr>
  <tr>
    <td rowspan="2">产品A</td>
    <td>规格1</td>
  </tr>
  <tr>
    <td>规格2</td>
  </tr>
</table>

</body>
</html>

登录后复制

这个例子展示了如何使用CSS来设置合并单元格的背景颜色和文本对齐方式。注意