作业截图
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>科室导航</title>
<style>
/*第一步:给整个表格以及内部的所有单元格加上边框*/
table,th,td {
border: 2px solid #333;
}
/*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/
table {
/*折叠表格线*/
border-collapse: collapse;
text-align: center;
width: 60%;
/*表格居中*/
margin: 50px auto;
box-shadow: 3px 3px 3px #888;
background-image: url(images/backimage.png);
background-repeat: no-repeat;
background-size: auto;
}
table caption {
font-size: 1em;
font-weight: bolder;
margin-bottom: 10px;
}
th,td {
padding: 10px;
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
th {
background-color: rgba(155,155,0,0.3);
color: brown;
}
.green {
color: darkgreen;
font-weight: bolder;
font-size: 1.2em;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="80%">
<caption><h3>外科科室管理</h3></caption>
<thead>
<!-- bgcolor可以设置行或单元格的背景颜色 -->
<tr bgcolor="lightcyan">
<!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 -->
<th>编号</th>
<th>科室名称</th>
<th>科室负责人</th>
<th>科室楼层</th>
<th>科室人数</th>
<th>成立时间</th>
<th colspan="2">操作</th>
</tr>
<tr align="center">
<td>01</td>
<td align="center">血管外科</td>
<td><img src="images/血管外科主任.png" width="40" </td>
<td>7楼</td>
<td>11人 </td>
<td> 1998-09-01 </td>
<td>
<a href="">编辑</a>
<a href="">删除</a>
</td>
</tr>
<tr align="center">
<td>02</td>
<td align="center">妇科</td>
<td><img src="images/妇科主任.png" width="40" >
<!-- 妇科主任fkzr -->
<td>6楼</td>
<td>15人 </td>
<td> 1999-09-01 </td>
<td>
<a href="">编辑</a>
<a href="">删除</a>
</td>
</tr>
<tr align="center">
<td>03</td>
<td align="center">骨科</td>
<td><img src="images/骨科主任.png" width="40" </td><!-- 骨科主任gkzr -->
<td>5楼</td>
<td>10人 </td>
<td> 1998-09-01 </td>
<td>
<a href="">编辑</a>
<a href="">删除</a>
</td>
</tr>
<tr align="center">
<td>04</td>
<td align="center">眼科</td>
<td><img src="images/眼科主任.png" width="40" </td><!-- 眼科主任ykzr -->
<td>4楼</td>
<td>14人 </td>
<td> 1998-09-01 </td>
<td>
<a href="">编辑</a>
<a href="">删除</a>
</td>
</tr>
<tr align="center">
<td>05</td>
<td align="center">耳鼻喉科</td>
<td><img src="images/耳鼻喉科主任.png" width="40" </td><!-- 耳鼻喉科主任ebhkzr -->
<td>3楼</td>
<td>16人 </td>
<td> 1998-09-01 </td>
<td>
<a href="">编辑</a>
<a href="">删除</a>
</td>
</tr>
</tbody>
</table>
<p align="center">
<a href="">首页</a>
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">...</a>
<a href="">下一页</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业
