代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>富豪排行榜</title>
<style type="text/css">
/*1.给整个表格和内部的左右单元格加上边框*/
table,th,td{
border: 1px solid black;
}
/*2.将表格和内部的边框线结合*/
table{
border-collapse: collapse;
text-align: center;
margin: 0 auto;
width: 60%;
box-shadow: 5px 5px 5px black;
background-image:url(./image/jinqian.jpg);
background-repeat: no-repeat;
background-size: cover;
font-weight: bolder;
/*border-radius: 10%;*/
}
th,td{
padding: 10px;
}
th {
background-color: rgba(155,155,0,0.3);
color: red;
}
.caifu{
color: blue;
font-size: 1.2em;
font-weight: bolder;
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
#mht{
color: blue;
}
</style>
</head>
<body>
<table>
<caption><h2>§ 福布斯中国富豪排行榜 §<small><a href="">添加</a></small></h2></caption>
<tr>
<th>中国排名</th>
<th>中文名</th>
<th>头像</th>
<th>财富(亿美元)</th>
<th>年龄</th>
<th>财富来源</th>
</tr>
<tr>
<td>1</td>
<td id="mht">马化腾</td>
<td><img src="./image/1.jpg" width="30"></td>
<td class="caifu">501</td>
<td>46</td>
<td>网络服务</td>
</tr>
<tr>
<td>2</td>
<td>马云</td>
<td><img src="./image/2.jpg" width="30"></td>
<td class="caifu">396</td>
<td>53</td>
<td>电子商务</td>
</tr>
<tr>
<td>3</td>
<td>许家印</td>
<td><img src="./image/3.jpg" width="30"></td>
<td class="caifu">391</td>
<td>59</td>
<td>房地产</td>
</tr>
<tr>
<td>4</td>
<td>李嘉诚</td>
<td><img src="./image/3.jpg" width="30"></td>
<td class="caifu">367</td>
<td>89</td>
<td>多元化经营</td>
</tr>
<tr>
<td>5</td>
<td>王健林</td>
<td><img src="./image/3.jpg" width="30"></td>
<td class="caifu">255</td>
<td>63</td>
<td>房地产</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码如下：
