<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS表格设置</title>
<style type="text/css">
table,th,td{
border: 1px solid #333 }
table{
width: 60%;
text-align: center;
border-collapse: collapse;
margin: 50px auto;
box-shadow: 3px 3px 3px #666;
background-image: url(../../images/8.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption {
font-size: 1.8em;
font-weight: bolder;
margin-bottom: 20px;
}
th,td {
padding: 10px;
}
td img {
border-radius: 50%;
box-shadow:2px 2px 2px #666
}
th {
background-color: rgba(155,155,0,0.4);
color: brown;
}
.memo {
color: darkgreen;
font-weight: bolder;
font-size: 1.2em;
}
</style>
</head>
<body>
<table>
<caption>员 工 档 案 表</caption>
<tr>
<th>工号</th>
<th>姓名</th>
<th>照片</th>
<th>部门</th>
<th>职务</th>
<th>级别</th>
<th>兴趣爱好</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td><img src="../../images/11.jpg" width="50"></td>
<td>人事部</td>
<td>经理</td>
<td>2</td>
<td>篮球、键身</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td><img src="../../images/12.jpg" width="50"></td>
<td>人事部</td>
<td>文员</td>
<td>3</td>
<td>看电影、美食</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td><img src="../../images/13.jpg" width="50"></td>
<td>客服部</td>
<td>客服经理</td>
<td>2</td>
<td>乒乓球、游泳</td>
</tr>
<tr>
<td>004</td>
<td>赵六</td>
<td><img src="../../images/14.jpg" width="50"></td>
<td>客服部</td>
<td>客服文员</td>
<td>3</td>
<td>美容、健身</td>
</tr>
</tbody>
</table>
</body>
</html>
