HTML5的功能对于前段的设计应用比较广泛。在里面中利用table标签作为主要的布局，通过合并单元格，设置单元格的背景颜色，字体颜色以及div大小，同时利用HTML5的css选择器，使修饰代码少了很多，只要麻烦在于合并单元格和th标签的大小。同时利用css样式表和代码分离，采用外链式link链接。下面是利用HTML5和css样式进行的课表制作代码及效果图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>课表</title>
<link rel="stylesheet" href="css/样式.css">
</head>
<body>
<div class="fi-box">
<div class="box">
<img src="img/12.jpg" alt="">
</div>
<div class="table">
<table>
<tr>
<th id="th1">3月</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<td>08:00 08:45</td>
<td></td>
<td rowspan="4" id="shijie">视觉设计基础@实验楼207</td>
<td rowspan="2" id="ruanjian">软件工程@五教南101</td>
<td rowspan="2" id="dianlu">电路与电子技术@五教南201</td>
<td rowspan="2" id="dianlu">电路与电子技术@实验楼205</td>
<td rowspan="8" id="shijie">UI界面设计@实验楼209</td>
<td ></td>
</tr>
<tr>
<td>08:55 09:40</td><td ></td><td></td>
</tr>
<tr>
<td>10:10 10:55</td>
<td rowspan="2" id="caozuo">操作系统@教学楼南201</td>
<td></td>
<td rowspan="2" id="shijie">UI设计界面@五教南508</td>
<td rowspan="2" id="caozuo">操作系统@三实验楼209</td>
<td></td>
</tr>
<tr>
<td>11:05 11:50</td><td></td><td></td>
</tr>
<tr>
<td>14:20 15:05</td>
<td rowspan="2" id="dianlu">电路与电子技术@五教南301</td>
<td rowspan="2" id="">大学体育健美操选项@西区山顶篮球场</td>
<td></td><td></td>
<td rowspan="2" id="ruanjian">软件工程导论@1教307</td>
<td></td>
</tr>
<tr>
<td>15:15 16:00</td><td ></td><td></td><td></td>
</tr>
<tr>
<td>16:20 17:05</td>
<td rowspan="2" id="xingshi">形势与政策IV@五教北702</td>
<td></td>
<td></td>
<td rowspan="2" id="web">web前端高端技术@东区第三实验室</td>
<td rowspan="2" id="caozuo">操作系统@八教低阶1</td>
<td></td>
</tr>
<tr>
<td>17:15 18:00</td><td ></td><td></td><td></td>
</tr>
<tr>
<td>19:00 19:45</td>
<td rowspan="3" id="shijie">UI界面设计@第三实验楼209</td>
<td rowspan="3" id="ph">Photoshop图像处理@第三实验楼205</td>
<td rowspan="3" id="ph">Photoshop图像处理@第三实验楼209</td>
<td rowspan="3" id="web">web前端高端技术@第三实验楼209</td>
<td></td>
<td rowspan="3" id="web">web前端高端技术@第三实验楼205</td>
<td></td>
</tr>
<tr>
<td>19:55 20:40</td><td ></td><td></td>
</tr>
<tr>
<td>11</td><td ></td><td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
下面是css样式修饰：
.fi-box{
width:555px;height:90px;
}
*{margin:0px;padding: 0px;}
.box{
width:530px;
height:90px;
}
img{
width:555px;
height:90px;
}
table{
width:555px;
height: 800px;
border:1px sky blue;
color: aliceblue;
}
tr th{
width: 80px;height: 40px;
background-color: gainsboro;
color:black;
}
table tr td{
background-color: azure;}
#shijie{background-color: gold;}
#dianlu{background-color: #00CED1;}
#caozuo{background-color: coral;}
#ph{background-color: cyan;}
#web{background-color: chartreuse;}
#xingshi{background-color: darkturquoise;}
#ruanjian{background-color: hotpink;}
#daxue{background-color: fuchsia;}
td:first-child{
color: #7FFF00;
}
效果图如下：
