html 合并单元格

最新推荐文章于 2024-07-18 21:13:10 发布

神奇大叔

最新推荐文章于 2024-07-18 21:13:10 发布

阅读量513

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102559108

版权

html 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

	合并单元格学习:
		快捷生成表格
		table>tr*4>td*5 加tab,生成四行五列的表格
	合并单元格：其中一个单元格占据其单元格，然后删去其他单元格
	列合并两个单元格：
		<td colspan="2"></td> 

	行合并两个单元格：
		<td rowspan="2"></td>
	合并标题标签单元格时应注意，因为下面的单元格宽度是根据标题单元格设置，
	所以合并前为了不改变下面的单元格宽度，要倍数改变标题单元格的宽度
		<td width="200px" colspan="2" ></td>
	合并多个单元格，如四个，也是先两个两个合并，如列合并两次，然后再行合并

代码示例：

<html>
	<head>
		<title>表格标签学习</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		
	</head>
	<body>
			<h3 align="center">合并单元格的学习</h3>
		
		<table border="1px">
			<tr height="35px">
				<td width="100px"></td>
				<td width="100px"></td>
				<td width="100px"></td>
				<td width="200px" colspan="2" rowspan="2"></td>
				<!--<td width="100px"></td>-->
			</tr>
			<tr height="35px">
				<td colspan="2"></td>   <!--列合并，使其中一个单元格占2列，删掉另一个单元格-->
				<!--<td></td>-->
				<td></td>
			
				<!--<td></td>-->
			</tr>
			<tr height="35px">
				<td></td>
				<td></td>
				<td></td>
				<td rowspan="2"></td>   <!--行合并，第三行第四格和第四行第四格-->
				<td></td>
			</tr>
			<tr height="35px">
				<td></td>
				<td></td>
				<td></td>
				<!--<td></td>-->
				<td></td>
			</tr>
		</table>
		
		

	</body>
</html>