欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML-table-合并单元格

程序员文章站 2022-05-14 07:54:20
...

如图的表格:

HTML-table-合并单元格

合并单元格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>

合并结果如图:

HTML-table-合并单元格

相关标签: html tr td