web前端-----细线表格(table)的制作

**

主要是用border属性中的 border-collapse 再加个属性值:collapse即可

**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			} 
			.tab{
				width: 500px;
				height: 249px;
				border-collapse: collapse;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<table class="tab" <!-- align="center" border="1" width="500" height="249" cellspacing="0" -->>
			<tr><!-- 第一行   th表头  加粗和居中-->
				<th>排名</th>
				<th>关键词</th>
				<th>趋势</th>
				<th>进入搜索</th>
				<th>排最近七日</th>
				<th>相关链接</th>
			</tr>
			<tr><!-- 第二行 -->
				<td>1</td>
				<td>鬼吹灯</td>
				<td><img src="images/down.jpg" ></td>
				<td>345</td>
				<td>123</td>
				<td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td>
			</tr>
			<tr><!-- 第三行 -->
				<td>2</td>
				<td>西游记</td>
				<td><img src="images/up.jpg" ></td>
				<td>122433</td>
				<td>123</td>
				<td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td>
			</tr>
			<tr><!-- 第四行 -->
				<td>3</td>
				<td>盗墓笔记</td>
				<td><img src="images/down.jpg" ></td>
				<td>34</td>
				<td>12233</td>
				<td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td>
			</tr>
			<tr><!-- 第五行 -->
				<td>4</td>
				<td>东游记</td>
				<td><img src="images/up.jpg" ></td>
				<td>34235</td>
				<td>6123</td>
				<td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td>
			</tr>
			<tr><!-- 第六行 -->
				<td>5</td>
				<td>甄嬛传</td>
				<td><img src="images/up.jpg" ></td>
				<td>34512</td>
				<td>12323</td>
				<td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td>
			</tr>
			<tr><!-- 第七行 -->
				<td>6</td>
				<td>水浒传</td>
				<td><img src="images/down.jpg" ></td>
				<td>34235</td>
				<td>12563</td>
				<td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td>
			</tr>
			<tr><!-- 第八行 -->
				<td>7</td>
				<td>三国演义</td>
				<td><img src="images/up.jpg" ></td>
				<td>34235</td>
				<td>1263</td>
				<td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td>
			</tr>
		</table>
	</body>
</html>


对比:
在这里插入图片描述


在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值