HTML表格单元格合并怎么实现？HTML表格Colspan、Rowspan用法详解
在网页开发中，表格是展示结构化数据最常用的元素之一。很多时候我们需要让一个单元格跨越多列或者多行，来合并单元格实现复杂的表格布局，这时候就需要用到HTML表格的colspan和rowspan属性。本文将详细介绍这两个属性的用法，帮助你快速掌握单元格合并的实现方法。
一、colspan属性：实现单元格跨列合并
colspan是<td>和<th>标签的可选属性，用于指定当前单元格需要横跨的列数。默认情况下，每个单元格只占1列，设置colspan的值后，该单元格会横向合并指定数量的相邻列，合并后这些列原本的单元格就不需要再写了。
举个例子，我们要做一个简单的课程表表头，第一行是“课程表”三个字跨3列显示，第二行是星期一到星期三的表头，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>colspan用法示例</title>
<style>
table {
border-collapse: collapse;
width: 300px;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<!-- 第一行：课程表跨3列 -->
<tr>
<th colspan="3">课程表</th>
</tr>
<!-- 第二行：星期一到星期三的表头 -->
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
</table>
</body>
</html>上述代码中，第一行的<th>设置了colspan="3"，所以这个表头单元格会横向合并3列，整行就只有这一个单元格，和第二行的3个表头列对齐。需要注意的是，如果设置了colspan="3"，那么这一行就不需要再写其他<td>或<th>了，否则表格结构会出错。
二、rowspan属性：实现单元格跨行合并
rowspan同样是<td>和<th>标签的可选属性，用于指定当前单元格需要纵跨的行数。默认每个单元格只占1行，设置rowspan的值后，该单元格会纵向合并指定数量的相邻行，合并后这些行对应位置的单元格就不需要再写了。
我们延续上面的课程表例子，给星期一添加两节课，让“星期一”这个表头跨2行显示，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>rowspan用法示例</title>
<style>
table {
border-collapse: collapse;
width: 300px;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">课程表</th>
</tr>
<tr>
<!-- 星期一表头跨2行 -->
<th rowspan="2">星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<!-- 这一行不需要再写星期一的单元格，因为已经被上一行的rowspan合并了 -->
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>英语</td>
<td>体育</td>
<td>美术</td>
</tr>
</table>
</body>
</html>上述代码中，第二行的“星期一”表头设置了rowspan="2"，表示这个单元格会纵向合并接下来的2行，所以第三行的第一个单元格就不需要写了，否则会出现多余的单元格。这里要注意，被合并的行中，对应位置的单元格要删除，不能保留，否则表格的列数会不一致。
三、colspan和rowspan同时使用
实际开发中经常需要同时用到跨行和跨列合并，比如做一个学生成绩表，表头有“姓名”跨2行，“科目”跨3列，“总分”跨2行，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>colspan和rowspan同时使用示例</title>
<style>
table {
border-collapse: collapse;
width: 400px;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<!-- 姓名跨2行 -->
<th rowspan="2">姓名</th>
<!-- 科目跨3列 -->
<th colspan="3">科目</th>
<!-- 总分跨2行 -->
<th rowspan="2">总分</th>
</tr>
<tr>
<!-- 这一行是科目的子表头，不需要再写姓名和总分 -->
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>95</td>
<td>88</td>
<td>273</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>92</td>
<td>90</td>
<td>267</td>
</tr>
</table>
</body>
</html>这个例子中，第一行的“姓名”和“总分”都设置了rowspan="2"，所以这两列的单元格会跨2行，第二行就不需要再写这两个单元格；“科目”设置了colspan="3"，横向合并3列，第二行刚好是这3列的子类目标头。后续的学生数据行就按照正常的列数填写即可，结构非常清晰。
四、使用注意事项
colspan和rowspan的值必须是正整数，不能是0或者负数，否则属性无效。- 合并单元格后，被合并的位置不要再写对应的
<td>或<th>，否则会导致表格列数/行数不匹配，出现布局错乱。 - 这两个属性只能用在
<td>和<th>标签上，其他表格相关标签不支持。 - 如果表格使用了
border-collapse: collapse样式，合并后的单元格边框会正常合并，不会出现重复边框的问题，建议表格都加上这个样式。
掌握colspan和rowspan的用法后，就可以轻松实现各种复杂的HTML表格布局了，在实际开发中多练习几次就能熟练运用。
HTML表格单元格合并colspan属性rowspan属性跨行跨列 本作品最后修改时间：2026-05-22 06:39:44