收藏
PHPz批改状态：合格
老师批语：总结的很好，效果也不错，继续加油
em: 继承字号,受自身和祖先影响，默认16px；
rem: 根字号, 字号常量不变，默认16px，除非人为更新,否则不变；
em: 用于PC端；
rem: 用于移动端；
因为em受到当前和祖先元素影响，而rem作为根字号是一个不变的字号常量，除非人为更新，具有可控性，所以rem更好用。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小学课程表</title>
<style>
table td,
table th {
border: 0.02rem solid #000;
}
table {border-collapse: collapse;}table {width: 90vw;margin: auto;text-align: center;}table caption {font-size: 3em;margin-bottom: 1em;}table thead {background-color: greenyellow;}table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {background-color: greenyellow;}</style>
</head>
<body>
<table>
<caption>
小学课程表
</caption>
<thead>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<!-- 上午 -->
<!-- 第一个tbody -->
<tbody>
<tr>
<td rowspan="4" class="period">上午</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>
</tbody>
<!-- 中午 -->
<!-- 第二个tbody --><tbody><tr><td colspan="6">中午休息</td></tr></tbody><!-- 下午 --><!-- 第3个tbody --><tbody><tr><td rowspan="3" class="period">下午</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></tbody><!-- 表尾 --><tfoot><tr><td>备注:</td><td colspan="5">每天下午15:30-17:30在校写作业</td></tr></tfoot></table>
</body>
</html>
···
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
