代码：
![$]UJMMGIA0KK6(1WPAELGWV.jpg](https://img.php.cn//upload/image/282/834/420/1521803982497843.jpg "1521803982497843.jpg")
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>女性消费者最喜爱车型TOP10</title>
<style type="text/css">
table,th,td {
border: 0.5px solid #333;
}
table {
border-collapse: collapse;
text-align: center;
margin: 30px auto;
width: 50%;
box-shadow: 3px 3px 3px #888;
background-image: url(../images/背景.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
table caption {
font-size: 2.5em;
font-weight: bolder;
margin-bottom: 25px;
}
th,td {
padding: 10px;
}
td img {
border-radius: 30%;
box-shadow: 1px 1px 1px #888;
}
th {
background-color: rgba(155,155,0,0.2);
}
td {
font-size: 1.1em;
}
th {
font-size: 1.3em;
}
</style>
</head>
<body>
<table>
<caption>2018年度最受女性消费者喜爱车型TOP10排行榜</caption>
<tr>
<th colspan="3">车辆信息</th>
<th colspan="3">车辆数据</th>
<th colspan="2" rowspan="2">操作</th>
</tr>
<tr>
<th>ID</th>
<th>名称</th>
<th>图片</th>
<th>发动机</th>
<th>油耗(L/100km)</th>
<th>售价(万)</th>
</tr>
<tr>
<td>01</td>
<td>minicooper</td>
<td><img src="../images/minicooper.jpg" width="80"></td>
<td>1.2T/1.5T</td>
<td>5.3/5.4</td>
<td>18.50-28.50</td>
<td><a href="">加入购物车</a></td>
<td><a href="">去购物车结算</a></td>
</tr>
<tr>
<td>02</td>
<td>甲壳虫</td>
<td><img src="../images/甲壳虫.jpg" width="80"></td>
<td>1.2T/1.4T</td>
<td>5.6/5.7</td>
<td>19.58-27.46</td>
<td><a href="">加入购物车</a></td>
<td><a href="">去购物车结算</a></td>
</tr>
<tr>
<td>03</td>
<td>宾利欧陆</td>
<td><img src="../images/宾利.jpg" width="80"></td>
<td>4.0T/6.0T</td>
<td>10.6/14.6</td>
<td>288.00-459.80</td>
<td><a href="">加入购物车</a></td>
<td><a href="">去购物车结算</a></td>
</tr>
<tr>
<td>04</td>
<td>路虎极光(进口)</td>
<td><img src="../images/路虎.jpg" width="80"></td>
<td>2.0T</td>
<td>11</td>
<td>69.80</td>
<td><a href="">加入购物车</a></td>
<td><a href="">去购物车结算</a></td>
</tr>
<tr>
<td>05</td>
<td>保时捷911</td>
<td><img src="../images/保时捷.jpg" width="80"></td>
<td>3.0T/3.8T</td>
<td>7.8/-</td>
<td>131.80-414.20</td>
<td><a href="">加入购物车</a></td>
<td><a href="">去购物车结算</a></td>
</tr>
</table>
<p align="center">
<a href="">首页</a>
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">...</a>
<a href="">下一页</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
