Blogger Information
Blog 18
fans 0
comment 0
visits 9786
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
6章 3.22_CSS盒模型与表格-作业
唐朝的博客
Original
518 people have browsed it

QQ20180327-000051@2x.png

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post