![{FR)S6Q_~)V]Q$V()_~4610.png](https://img.php.cn//upload/image/552/278/129/1522046691332596.png "1522046691332596.png")
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阴影背景练习</title>
<style type="text/css">
table,th,td{
border: 1px solid #333;
padding: 10px;
}
table{
border-collapse: collapse;
text-align: center;
width: 40%;
margin: 100px;
box-shadow: 5px 5px 6px #582;
background-image: url(../322/images/bg.png);
background-repeat: no-repeat;
background-size: cover;
}
td img{
width: 30px;
border-radius: 50%;
box-shadow: 3px 3px 3px #588;
}
th{
background-color: rgba(180,241,695,0.4);
}
caption{
font-size: 1.6em;
font-weight: bolder;
padding: 20px;
}
</style>
</head>
<body>
<table >
<caption>出差统计</caption>
<tr>
<th colspan="2" rowspan="2">姓名</th>
<th colspan="3">出差地区</th>
</tr>
<tr>
<th>北京</th>
<th>上海</th>
<th>广州</th>
</tr>
<tr>
<td><img src="../images/1.jpg"></td>
<td>张三</td>
<td>1天</td>
<td>3天</td>
<td>5天</td>
</tr>
<tr>
<td><img src="../images/2.jpg"></td>
<td>李四</td>
<td>2天</td>
<td>4天</td>
<td>6天</td>
</tr>
<tr>
<td><img src="../images/3.jpg"></td>
<td>王五</td>
<td>3天</td>
<td>6天</td>
<td>9天</td>
</tr>
<tr>
<td><img src="../images/4.jpg"></td>
<td>赵六</td>
<td>6天</td>
<td>9天</td>
<td>3天</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
