先来看看原始表格
<table border="1 ">
<thead>
<tr >
<th>网站</th>
<th>资源</th>
<th>url</th>
<th>排名</th>
</tr>
<tbody>
<tr >
<td>淘宝网</td>
<td>大</td>
<td>www.taobao.com</td>
<td>25</td>
</tr>
<tr >
<td rowspan="2">京东</td>
<td>大</td>
<td>www.jingdong.com</td>
<td>25</td>
</tr>
<tr >
<td>大</td>
<td>www.jingdong.com</td>
<td>25</td>
</tr>
<tr >
<td colspan="4" style="text-align: right;">小小小</td>
</tr>
</tbody>
</thead>
</table>
效果图
其中 rowspan 属性规定单元格可横跨的行数。设置为rowspan:2 表示占2个单元格.colspan 属性规定单元格可横跨的列数,设置为colospan:4 就可以占用满列。大家看现在的table的边框和内容是有边距的,如果想消除边距,并且使border变细,可以使用
border-collapse:collapse属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse:collapse
}
</style>
</head>
<body>
<table border="1 ">
<thead>
<tr >
<th>网站</th>
<th>资源</th>
<th>url</th>
<th>排名</th>
</tr>
<tbody>
<tr >
<td>淘宝网</td>
<td>大</td>
<td>www.taobao.com</td>
<td>25</td>
</tr>
<tr >
<td rowspan="2">京东</td>
<td>大</td>
<td>www.jingdong.com</td>
<td>25</td>
</tr>
<tr >
<td>大</td>
<td>www.jingdong.com</td>
<td>25</td>
</tr>
<tr >
<td colspan="4" style="text-align: right;">小小小</td>
</tr>
</tbody>
</thead>
</table>
</body>
</html>
这样就好了