20180322作业

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
	<style>
		td img{
			width:40px;
			height: 40px;
			border-radius: 50%;
		}
		table,th,td{
			border:1px solid #333;
		}
		th,td{
			padding:10px;
		}
		table{
			border-collapse: collapse;
			margin: 50px auto;
			text-align: center;
			width: 60%;
			box-shadow: 10px 10px 5px #888888; 
		}
		caption{
			color:red;
			font-size: 1.6em;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<table>
		<caption>培训班学生登记表</caption>
		<tr>
			<th colspan="3">基本信息</th>
			<th colspan="2">其他信息</th>
		</tr>		
		<tr>
			<th>姓名</th>
			<th>头像</th>
			<th>年龄</th>
			<th>作业</th>
			<th>成绩</th>
		</tr>
		<tr>
			<td>张大大</td>
			<td><img src="../images/1.jpg" alt=""></td>
			<td>23</td>
			<td>完成</td>
			<td>优秀</td>
		</tr>
		<tr>
			<td>李啊啊</td>
			<td><img src="../images/3.jpg" alt=""></td>
			<td>22</td>
			<td>未完成</td>
			<td>不及格</td>
		</tr>
		<tr>
			<td>朱珊珊</td>
			<td><img src="../images/4.jpg" alt=""></td>
			<td>44</td>
			<td>完成</td>
			<td>及格</td>
		</tr>
	</table>
</body>
</html>

运行实例 »

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

手写代码：

5GPNP[P9UYG[`}LV%F`}CSP.png ]5@W(ZOLY@$M)}ZLX3]]$RO.png

实例

相关文章