代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工工资明细表</title>
<style>
table,th,td{
border: 1px solid #31A100;
}
table{
width:60%;
text-align: center;
margin:50px auto;
border-collapse: collapse;
box-shadow: 3px 3px 3px #5A5A58;
background-color: #E6D2B3;
background-image: url(bac.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption{
margin-bottom: 20px;
font-size: 1.6em;
}
th,td{
padding:12px;
}
td img{
border-radius: 50%;
width:50px;
box-shadow: 2px 2px 2px #534D56;
}
th{
background-color: #BFD48C;
}
.talcol{
color: #B20700;
font-size: 1.2em;
}
</style>
</head>
<body>
<table>
<caption>员工工资明细表</caption>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">头像</th>
<th colspan="3">工资明细</th>
<th rowspan="2">合计</th>
<th colspan="2" rowspan="2">编辑</th>
</tr>
<tr>
<th>基本工资</th>
<th>福利补贴</th>
<th>绩效工资</th>
</tr>
<tr>
<td>1</td>
<td>李小伟</td>
<td><img src="../image/2.jpg" alt=""></td>
<td>2800</td>
<td>400</td>
<td>800</td>
<td class="talcol">4000</td>
<td><a href="">修改</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>陈小清</td>
<td><img src="../image/3.jpg" alt=""></td>
<td>3200</td>
<td>400</td>
<td>1200</td>
<td class="talcol">4800</td>
<td><a href="">修改</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>谭小华</td>
<td><img src="../image/4.jpg" alt=""></td>
<td>3200</td>
<td>400</td>
<td>600</td>
<td class="talcol">4200</td>
<td><a href="">修改</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>钟小霜</td>
<td><img src="../image/5.jpg" alt=""></td>
<td>3200</td>
<td>400</td>
<td>800</td>
<td class="talcol">4400</td>
<td><a href="">修改</a></td>
<td><a href="">删除</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果:
手抄代码：
