【HTML】一个简单的课程表

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>

结果如上图，可以自己修改背景颜色和字体颜色