今天的作业一部分是复习表格的知识，一方面也学习了如何用css控制表格，让html代码尽量的简洁优雅。
首先是html代码，做的是一个课程表。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>课程表</title> <link rel="stylesheet" href="static/css/style1.css"> </head> <body> <table> <caption>七中课程表</caption> <thead> <tr> <th>时间</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <tr> <td rowspan="4">上午<br>8:00-12:00</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> </tr> <tr> <td rowspan="3">下午<br>14:00-17:00</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> </tr> <tr> <td>备注：</td> <td colspan="5">如有特殊情况，会提前告知</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS代码
实例
table {
border-collapse: separate;
border-spacing: 0;
}
caption {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
thead tr th {
background-color: lightgreen;
}
tbody tr:first-child td:first-child {
background-color: lightskyblue;
}
tbody tr:nth-last-child(4) td:first-child {
background-color: lightsalmon;
}
tbody tr:last-child td {
background-color: lightgrey;
}
tbody:before {
content: '';
width: 728px;
height: 389px;
position: absolute;
left: 8px;
top: 45px;
opacity: 0.3;
background-size: cover;
background-image: url("../images/1.jpg");
border-radius: 16px;
}
thead tr th:first-child {
border-top-left-radius: 16px;
}
thead tr th:last-child {
border-top-right-radius: 16px;
}
tbody tr:last-child td:first-child {
border-bottom-left-radius: 16px;
}
tbody tr:last-child td:last-child {
border-bottom-right-radius: 16px;
}
th,
td {
border: 1px solid black;
width: 100px;
text-align: center;
padding: 10px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
需要注意：
要用选择器单独选择表格中的四个角，然后把他们的左上，右上，左下，右下的border-radius值设置好，表格就会有四个圆角了。border-collapse属性如果设置成collapse，那么边框的线不会因为里面的圆角贴合上去，要设置成separate就可以。
