**
主要是用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> <a href="#">贴吧</a> <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> <a href="#">贴吧</a> <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> <a href="#">贴吧</a> <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> <a href="#">贴吧</a> <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> <a href="#">贴吧</a> <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> <a href="#">贴吧</a> <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> <a href="#">贴吧</a> <a href="#">图片</a></td>
</tr>
</table>
</body>
</html>
对比: