table实现简单的课程表:
<!-- 表格 td属性:closspan=向右合并单元格;rowspan=向下合并单元格 边框等与一像素 -->
<table border="1px" id="kcb">
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>课程/星期</strong></td>
<td style="background-color:darkgray; color:darkmagenta"><strong>星期一</strong></td>
<td style="background-color:darkgray; color:darkmagenta"><strong>星期二</strong></td>
<td style="background-color:darkgray; color:darkmagenta"><strong>星期三</strong></td>
<td style="background-color:darkgray; color:darkmagenta"><strong>星期四</strong></td>
<td style="background-color:darkgray; color:darkmagenta"><strong>星期五</strong></td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第一节</strong></td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Python</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Java</td>
<td rowspan="4" style="background-color:darkgray;color: aqua;">HTML</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Css</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Java</td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第二节</strong></td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第三节</strong></td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">HTML</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Css</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Java</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Js</td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第四节</strong></td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td colspan="6" style="text-align: center; background-color:darkgray;color: aqua;" >午饭/午休</td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第五节</strong></td>
<td rowspan="4" style="background-color:darkgray;color: aqua;">Java</td>
<td rowspan="4" style="background-color:darkgray;color: aqua;">HTML</td>
<td rowspan="4" style="background-color:darkgray;color: aqua;">Css</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Python</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">HTML</td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第六节</strong></td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第七节</strong></td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">HTML</td>
<td rowspan="2" style="background-color:darkgray;color: aqua;">Css</td>
</tr>
<tr>
<!-- 样式设置背景颜色.字体颜色 -->
<td style="background-color:darkgray; color:darkmagenta"><strong>第八节</strong></td>
<tr>
<td colspan="6" style="text-align:center; background-color:darkgray;color: aqua;">晚饭/休息</td>
</tr>
<tr>
<td style="background-color:darkgray; color:darkmagenta"><strong>第九节</strong></td>
<td colspan="5" style="text-align:center;background-color:darkgray;color: aqua;">晚自习</td>
</tr>
<tr>
<td style="background-color:darkgray; color:darkmagenta"><strong>第十节</strong></td>
<td colspan="5" style="text-align:center;background-color:darkgray;color: aqua;">晚自习</td>
</tr>
</table>