代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>课表</title>
<style>
td{
width: 13%;
text-align: center;
}
td:first-child{
height: 56px;
color: #7BB510;
font-weight: bold;
width: 9%;
}
td[id^=one]{
height:40px;
}
#cz{
background-color: #E9D757;
}
#sj{
background-color: #C086F7;
}
#rj{
background-color: #E1D658;
}
#ui{
background-color: #F096D4;
}
#dz{
background-color: #5AE252;
}
#xs{
background-color: #799EED;
}
#ps{
background-color: #FB8E91;
}
#web{
background-color: #66E452;
}
</style>
</head>
<body>
<table border="1px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="#F1F5F6" bordercolor="#D8DCDD" width="560px">
<tr>
<td colspan="8" bgcolor="#0164A7"><img src="logo.png"> </td>
</tr>
<tr bgcolor="#DBE0E3" align="center" height="20px">
<td id="one"> </td>
<td id="one">周一</td>
<td id="one">周二</td>
<td id="one">周三</td>
<td id="one">周四</td>
<td id="one">周五</td>
<td id="one">周六</td>
<td id="one">周日</td>
</tr>
<tr>
<td> 1</td>
<td> </td>
<td rowspan="4" id="sj"> 视觉设<br>计基础</td>
<td rowspan="2" id="rj"> 软件工<br>程导论</td>
<td rowspan="2" id="dz">电子与<br>电路设<br>计</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td >2 </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 3</td>
<td rowspan="2" id="cz">操作系<br>统</td>
<td rowspan="2" id="ui">UI界面<br>设计 </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 4</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>.
</tr>
<tr>
<td > 5</td>
<td rowspan="2" id="dz">电路与<br>电子技<br>术 </td>
<td > </td>
<td > </td>
<td > </td>
<td rowspan="2" id="rj">软件工<br>程导论 </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 6</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 7</td>
<td rowspan="2" id="xs">形式与<br>政策 </td>
<td > </td>
<td > </td>
<td > </td>
<td rowspan="2" id="cz">操作系<br>统</td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 8</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 9</td>
<td rowspan="2" id="ui">UI界面<br>设计</td>
<td rowspan="3" id="ps">Photosh<br>op图像处<br>理</td>
<td rowspan="3" id="ps">Photosh<br>op图像处<br>理</td>
<td rowspan="3" id="web">web前<br>端高级<br>技术</td>
<td > </td>
<td rowspan="3" id="web">web前<br>端高级<br>技术</td>
<td > </td>
</tr>
<tr>
<td > 10</td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 11</td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td > 12</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
</table>
</body>
</html>
效果图: