实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table,th,td {
border: 1px solid #555;
}
table {
border-collapse: collapse;
text-align: center;
margin: 50px auto;
width: 60%;
box-shadow: 3px 3px 3px #666;
background-image: url(images/timg.jpeg);
background-repeat:no-repeat;
}
table caption {
font-size: 1.5em;
font-weight: bolder;
margin-bottom: 20px;
}
th,td {
padding: 5px;
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 2px #999;
}
table caption {
font-size: 1.5em;
}
th {
background-color: #eaeaea;
}
.green {
color: #f55;
}
</style>
</head>
<body>
<table>
<caption>员工信息表</caption>
<tr>
<th>工号</th>
<th>照片</th>
<th>姓名</th>
<th>姓别</th>
<th>年龄</th>
<th>毕业学校</th>
<th>专业</th>
<th>岗位</th>
</tr>
<tr>
<td>A001</td>
<td><img src="images/1.jpg" width="50"></td>
<td>王大清</td>
<td>男</td>
<td>35</td>
<td>清华</td>
<td>计算机</td>
<td class="green">总经理</td>
</tr>
<tr>
<td>A112</td>
<td><img src="images/2.jpg" width="50"></td>
<td>李小丽</td>
<td>20</td>
<td>女</td>
<td>上海复旦</td>
<td>经济管理</td>
<td class="green">人事部</td>
</tr>
<tr>
<td>A234</td>
<td><img src="images/3.jpg" width="50"></td>
<td>张小天</td>
<td>男</td>
<td>22</td>
<td>北大</td>
<td>信息管理</td>
<td class="green">平面设计</td>
</tr>
<tr>
<td>A112</td>
<td><img src="images/4.jpg" width="50"></td>
<td>唐天贵</td>
<td>24</td>
<td>男</td>
<td>南理工</td>
<td>计算机</td>
<td class="green">PHP工程师</td>
</tr>
<tr>
<td>A432</td>
<td><img src="images/5.jpg" width="50"></td>
<td>刘德华</td>
<td>34</td>
<td>男</td>
<td>南京师范</td>
<td>数学</td>
<td class="green">数据管理员</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
