HTML-table-合并单元格

最新推荐文章于 2025-05-26 22:15:18 发布

竹蜻蜓dd

最新推荐文章于 2025-05-26 22:15:18 发布

阅读量3.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html tr td

本文链接：https://blog.youkuaiyun.com/wzcyamadie/article/details/80561357

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何使用HTML实现表格中单元格的合并，并通过具体示例代码展示了跨列和跨行合并的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图的表格：

合并单元格11+12

合并单元格22+32

合并单元格33+34+43+44

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格-合并单元格</title>		
	</head>
	
	<body>
		<table border="1px" width="200px" height="200px" align="center" cellspacing="0" cellpadding="0"> <!--4行4列(tr->行 td->列)-->
		<!--cellspacing:边框间距离（如果不为0，则表格边框间有空隙)-->
		<!--cellpadding:表格内容距离边框距离（内边距）-->
			<tr>
				<td colspan="2" align="center">11</td><!--跨列合并单元格-->
				<!--<td>12</td> 合并第一行，第一，二列 需要删除第二列-->
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td rowspan="2" align="center">22</td><!--跨行合并单元格-->
				<!--把第二列的二，三行合并-->
				<td>23</td>
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				<!--把第二列的二，三行合并,删除“<td>32</td>”-->
				<td rowspan="2" colspan="2" align="center">33</td><!--合并单元格33，34，43，44-->				
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>				
				
			</tr>			
		</table>
	</body>
</html>

合并结果如图：