用table制作小学课程表
代码结构
<!DOCTYPE html>
<html lang="en">
<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>
<style>
table{
border: solid black 1px;
text-align: center;
}
th,td{
width: 100px;
height: 40px
};
</style>
<body>
<table border="1">
<caption><h2>课程表</h2></caption>
<thead>
<th>类别</th>
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期天</th>
</thead>
<tbody>
<tr >
<td colspan="7">晨读</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第一节</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td colspan="6" style="color: red;">大课间操</td>
</tr>
<tr>
<td>第二节</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学活动</td>
</tr>
<tr>
<td>第三节</td>
<td>语文</td>
<td>美术</td>
<td>安全健康</td>
<td>音乐</td>
<td>美术</td>
</tr>
<tr>
<td colspan="7" style="color: blue;">午休时间</td>
</tr>
<!-- 以下为下午部分 -->
<tr>
<td rowspan="3">下午</td>
<td>第四节</td>
<td>品德与生活</td>
<td>课外阅读</td>
<td>语文</td>
<td>品德与生活</td>
<td>语文</td>
</tr>
<tr>
<td>第五节</td>
<td>队会班会</td>
<td>音乐</td>
<td>体育</td>
<td>语文活动</td>
<td>体育</td>
</tr>
<tr>
<td>第六节</td>
<td>体育</td>
<td>礼仪课</td>
<td>写字</td>
<td>数学活动</td>
<td>口语交际</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>备注</td>
<td colspan="6">本课程表,为本年度最新课程计划教学表!</td>
</tr>
</tfoot>
</table>
</body>
</html>
结果截图【文章原创作者:大丰网站开发公司 http://www.1234xp.com/dafeng.html 复制请保留原URL】