重点未知：
border-collapse: collapse（取消表格重叠的间隙）
background-size: cover;（平铺且按背景格子大小铺满）
font-size: 3em;（字体大小设置）
font-weight: bold;（字体加粗，缩小设置）
border-radius:50%;（背景/图片，设置成为圆球）
box-shadow：box-shadow:0 0 8px 3px #888（设置阴影，值分别为：X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色）
代码部分：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海贼王最新战力排行</title>
<style type="text/css">
table {
border: solid black 1px;
margin: 80px auto;
border-collapse: collapse;
width: 1100px;
height: 500px;
background-image: url(images/QQ图片20180316130637.jpg);
background-repeat: no-repeat;
background-size: cover;
}
caption {
color: #DC143C;
margin-bottom: 30px;
font-size: 3em;
font-weight: bold;
}
td {
height: 40px;
border: solid black 1px;
text-align: center;
}
.tr1>td{
width:10%;
}
img{
width: 80px;
border-radius:50%;
}
.td6{
width: 40%;
}
colgroup{
background: #008B8B;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="4">
<colgroup span="1"></colgroup>
<caption>
海贼王最新战力排行
</caption>
<thead>
<tr class="tr1">
<td>海贼名称</td>
<td>海贼logo</td>
<td class="td6">战力指数</td>
<td>海贼事迹</td>
<td>恶魔果实</td>
<td>擅长武器</td>
</tr>
</thead>
<tbody>
<tr class="tr2">
<td>雷利</td>
<td><img src="logo321/雷利.jpg"/></td>
<td>1600</td>
<td class="td6">辅佐曾经的海贼王</td>
<td>无果实</td>
<td>刀</td>
</tr>
<tr class="tr3">
<td>索隆</td>
<td><img src="logo321/索隆.jpg"/></td>
<td>800</td>
<td class="td6">打败鹰眼</td>
<td>无果实</td>
<td>刀</td>
</tr>
<tr class="tr4">
<td>女帝</td>
<td><img src="logo321/女帝.png"/></td>
<td>1000</td>
<td class="td6">嫁给路飞</td>
<td>魅力果实</td>
<td>无武器</td>
</tr>
<tr class="tr5">
<td>罗</td>
<td><img src="logo321/罗.jpg"/></td>
<td>900</td>
<td class="td6">成为野心家</td>
<td>手术果实</td>
<td>刀</td>
</tr>
<tr class="tr5">
<td>路飞</td>
<td><img src="logo321/路飞.jpg"/></td>
<td>1300</td>
<td class="td6">成为海贼王</td>
<td>橡胶果实</td>
<td>拳头</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄部分：
