第六课：3.22_CSS盒模型与表格
代码：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>古代名医与著作TOP50榜单</title>
<style type="text/css">
/*第一步:给整个表格以及内部的所有单元格加上边框*/
table,th,td {
border: 2px solid #888;
}
/*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/
table {
/*折叠表格线*/
border-collapse: collapse;
text-align: center;
width: 80%;
/*表格居中*/
margin: 50px auto;
box-shadow: 3px 3px 3px #888;
background-image: url(../html/images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption {
font-size: 1.4em;
font-weight: bolder;
margin-bottom: 10px;
color:red;
}
th,td {
padding: 10px;
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
th {
background-color: rgba(155,155,155,0.5)
color:brown;
}
p {
text-align: center;
}
.green {
color:darkgreen;
font-weight: bolder;
font-size: 1.1em;
}
.red {
color:red;
}
</style>
</head>
<body>
<table>
<caption><h3>古代名医与著作TOP50榜单<small><a href="">添加</a></small></h3></caption>
<thead>
<tr>
<th class="red" colspan="5">信息</th>
<th class="red" rowspan="2">头像</th>
<th class="red" rowspan="2">著作</th>
<th class="red" colspan="2" rowspan="2">操作</th>
</tr>
<tr>
<th class="red">ID</th>
<th class="red">姓</th>
<th class="red">名</th>
<th class="red">字</th>
<th class="red">朝代</th>
</tr>
</thead>
<tr >
<td>06</td>
<td>张</td>
<td>机</td>
<td>仲景</td>
<td>汉朝</td>
<td><img src="../html/images/16.jpg" alt="" width="50"></td>
<td class="green">《伤寒杂病论》</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>07</td>
<td>王</td>
<td>熙</td>
<td>叔和</td>
<td>晋朝</td>
<td><img src="../html/images/17.jpg" alt="" width="50"></td>
<td class="green">《脉经》</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>08</td>
<td>皇普</td>
<td>谧</td>
<td>士安</td>
<td>晋朝</td>
<td><img src="../html/images/18.jpg" alt="" width="50"></td>
<td class="green">《针灸甲乙经》</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>09</td>
<td>葛</td>
<td>洪</td>
<td>稚川</td>
<td>东晋</td>
<td><img src="../html/images/19.jpg" alt="" width="50"></td>
<td class="green">《肘后救卒方》</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>10</td>
<td>巢</td>
<td>元方</td>
<td>--</td>
<td>隋朝</td>
<td><img src="../html/images/20.jpg" alt="" width="50"></td>
<td class="green">《诸病源候论》</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
</table>
<p>
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码效果：
手写代码：
