博客列表 >6章 3.22_CSS盒模型与表格-作业

6章 3.22_CSS盒模型与表格-作业

唐朝的博客
唐朝的博客原创
2018年03月27日 00:02:59521浏览

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>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议