html单元格拆分与合并相关案例

最新推荐文章于 2023-02-10 11:24:35 发布

Aaron莫言

最新推荐文章于 2023-02-10 11:24:35 发布

阅读量1.4k

点赞数 3

文章标签：单元格合并

本文链接：https://blog.csdn.net/aoxiangzhe/article/details/97513764

版权

【效果一】如图所示：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1" cellspacing="0" width="50%" height="150">
		<caption>纵向合并单元格</caption>
		<tr>
			<th rowspan="2">日期</t>
			<th rowspan="2">姓名</th>
			<th colspan="2">年龄</th>
			<th colspan="6">资格统计</th>
			<th colspan="2">技能统计</th>
		</tr>
		<tr>	
			<th>年龄1</th>
			<th>电话</th>
			<th>A</th>
			<th>B</th>
			<th>C</th>
			<th>D</th>
			<th>E</th>
			<th>F</th>
			<th>名称</th>
			<th>人数</th>
		</tr>
		
		<!--rowspan中必须指定要合并的列数目，是两行还是三行等等-->
		<tr>
			<td rowspan="3">602班</td>
			<td rowspan="3">张三</td>
			<td rowspan="3">26</td>
			<td rowspan="3">123456789</td>
			<td rowspan="3">9</td>
			<td rowspan="3">124</td>
			<td rowspan="3">77</td>
			<td rowspan="3">93</td>
			<td rowspan="3">142</td>
			<td rowspan="3">66</td>
			<td>教育1</td>
			<td>8</td>
		</tr>
		<tr>
			<td>教育1</td>
			<td>8</td>
		</tr>
		<tr>
			<td>教育1</td>
			<td>8</td>
		</tr>
	</table>
</body>
</html>

【效果二】如图所示：

代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1" cellspacing="0" width="50%" height="150">
		<caption>纵向合并单元格</caption>
		<tr>
			<th rowspan="2">日期</t>
			<th rowspan="2">姓名</th>
			<th colspan="2">年龄</th>
			<th colspan="6">资格统计</th>
			<th colspan="6">技能统计</th>
		</tr>
		<tr>
			
			<th>年龄</th>
			<th>电话</th>
			<th>A</th>
			<th>B</th>
			<th>C</th>
			<th>D</th>
			<th>E</th>
			<th>F</th>
			<th>名称</th>
			<th>人数</th>
		</tr>
		<tr>
			<td rowspan="2">601班</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>教育1</td>
			<td>8</td>
		</tr>
		<tr>
			<td>Tom</td>
			<td>22</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>教育1</td>
			<td>8</td>
		</tr>
		<!--rowspan中必须指定要合并的列数目，是两行还是三行等等-->
		<tr>
			<td rowspan="3">602班</td>
			<td>Rose</td>
			<td>22</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>教育1</td>
			<td>8</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>25</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>教育1</td>
			<td>8</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>25</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>Jack</td>
			<td>24</td>
			<td>123456789</td>
			<td>教育1</td>
			<td>8</td>
		</tr>
	</table>
</body>
</html>

Aaron莫言

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html单元格拆分与合并相关案例

【效果一】如图所示：代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <table border="1" cellspa...
复制链接

扫一扫