WEB代码：表格、列合并、行合并、图片在div中下面多出5px边距、

最新推荐文章于 2024-07-09 23:24:46 发布

hahahafree

最新推荐文章于 2024-07-09 23:24:46 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： WEB

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/95205918

Web 专栏收录该内容

80 篇文章

订阅专栏

博客围绕WEB相关内容，介绍了表格的列合并和行合并操作，还提及图片在div中下面会多出5px边距的情况，这些都是前端开发中可能遇到的问题。

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

1、表格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>超链接a</title>
	<style type="text/css">
		*{
			font-family: 微软雅黑；
		}
	</style>
</head>
</body>
	<table border="1px" width="700px" height="300px" cellspacing="0" align="center" >
		<tr>
			<th>编号</th>
			<th>用户名</th>
			<th>密码</th>
			<th>年龄</th>

		</tr>
		<tr>
			<td>1</td>
			<td>小法</td>
			<td>123</td>
			<td>15</td>
		</tr>
		<tr>
			<td>2</td>
			<td>小狗</td>
			<td>123</td>
			<td>20</td>
		</tr>
		<tr>
			<td>3</td>
			<td>小猪</td>
			<td>123</td>
			<td>23</td>
		</tr>
		<tr>
			<td>4</td>
			<td>小米</td>
			<td>123</td>
			<td>65</td>
		</tr>
	</table>
</body>

</html>

2、列合并

<td colspan="2">1</td>

3、行合并

<td rowspan="2">1</td>

4、图片在div中下面多出5px边距

<title>图片在div中下面多出5px边距</title>
	<style type="text/css">
		*{
			font-family: 微软雅黑；
		}
		div{
			background: #272822;
			border: 5px solid #f00;
		}
		img{
			display: block;
		}
	</style>
</head>
</body>
	<div>
		<img src="/img/cs.jpg" width="1340px">
	</div>
</body>