通过对表格的知识学习,了解到有关表格的几个复合标签和合并属性,通过对这些复合标签和合并属性的应用制作出一个课程表。
复合标签:
<table><caption><thead><tbody><tfood><tr><td><th>
合并属性:
属性 | 用途 |
---|---|
rowspan | 垂直行的合并(垂直方向把多行合并成一行) |
colspan | 水平列的合并(水平方向把多列合并成一列) |
利用这些表格的复合标签制作课程表代码如下:
<!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>
</head>
<body>
<table border="1" width="800" cellspacing="0" cellpadding="8">
<caption><h3>课程表</h3></caption>
<thead align="center">
<th colspan="7">**小学四年级二班课程表</th>
<tr bgcolor="#cccccc">
<td colspan="2">时间</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
</thead>
<tbody align="center">
<tr>
<td rowspan="6">上午</td>
<td>8:00-8:40</td>
<td>晨读</td>
<td>晨读</td>
<td>晨读</td>
<td>晨读</td>
<td>晨读</td>
</tr>
<tr>
<td>8:40-9:20</td>
<td>数学</td>
<td>体育与健康</td>
<td>艺术</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td>9:30-10:10</td>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td>体育与健康</td>
<td>道德与法治</td>
</tr>
<tr>
<td>10:10-10:45</td>
<td colspan="5" align="center">大课间</td>
</tr>
<tr>
<td>10:45-11:25</td>
<td>艺术</td>
<td>地方课程</td>
<td>英语</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>11:35-12:20</td>
<td>英语</td>
<td>语文</td>
<td>体育与健康</td>
<td>劳动</td>
<td>书法</td>
</tr>
<tr>
<td>中午</td>
<td>12:20-13:50</td>
<td colspan="5" align="center">午餐、午会、广播、眼操</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>14:00-14:40</td>
<td>艺术</td>
<td>道德与法治</td>
<td>语文</td>
<td>信息技术</td>
<td>班会</td>
</tr>
<tr>
<td>14:50-15:30</td>
<td>科学</td>
<td>科学</td>
<td>艺术</td>
<td>体育与健康</td>
<td>综合实践</td>
</tr>
<tr>
<td rowspan="3">延时</td>
<td>15:30-16:10</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>16:10-16:50</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>16:50-17:30</td>
<td>数学</td>
<td>英文</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
</tr>
<tfoot align="center">
<tr>
<td>备注</td>
<td colspan="6" align="center">备注内容</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
执行效果如下:
参考链接:
亿图脑图链接:https://www.edrawsoft.cn/viewer/public/s/4ec75210557659