用html制作一个课程表

40 阅读 0 评论 27 点赞

我是靠谱客的博主还单身小熊猫，最近开发中收集的这篇文章主要介绍用html制作一个课程表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果如下在这里插入图片描述
主要用到的是绘制表格table，调整每个单元格的颜色，大小、以及合并情况，就成功了！我制作的稍微有点简陋，可以参考做的更美观。

<body>
    <table border="1">
        <caption>我的课表</caption>
        <tr height="10" align="center">
            <td> </td>
            <td >周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
            <td>周六</td>
            <td>周天</td>
        </tr>
        <tr height="60" align="center">
            <td width="30"> 1</td>
            <td width="120" rowspan="2" bgcolor="ffcc99">虚拟现实脚本设计[博雅楼B502]</td>
            <td width="120" rowspan="2" bgcolor="99ccff">毛泽东思想和中国特色社会主义理论体系概论[博文楼104]</td>
            <td width="120" rowspan="2" bgcolor="ccff00">概率论与数理统计[博文楼107]</td>
            <td width="120" rowspan="2"bgcolor="ff6666">大学英语B4[博文楼302]</td>
            <td width="120" rowspan="2"></td>
            <td width="120" rowspan="2"></td>
            <td width="120" rowspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <td width="30">2</td>
        </tr>
        <tr height="60" align="center">
            <td width="30">3</td>
            <td width="120" rowspan="2" bgcolor="ccff00">概率论与数理统计[博文楼401]</td>
            <td width="120" rowspan="2"></td>
            <td width="120" rowspan="2"></td>
            <td width="120" rowspan="2" bgcolor="87ceff">大学英语B4[博文楼302]</td>
            <td width="120" rowspan="2" bgcolor="99ccff">毛泽东思想和中国特色社会主义理论体系概论[博文楼103]</td>
            <td width="120" rowspan="2" bgcolor="ccff00">概率论与数理统计[博文楼107]</td>
            <td width="120" rowspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <td width="30">4</td>
        </tr>
        <tr height="60" align="center">
            <td width="30">5</td>
            <td width="120" rowspan="2"> </td>
            <td width="120" rowspan="2" bgcolor="ffcc99">虚拟现实脚本设计[博雅楼B502]</td>
            <td width="120" rowspan="4" bgcolor="33cc99">融媒体内容设计[求实楼206]</td>
            <td width="120" rowspan="2"></td>
            <td width="120" rowspan="4" bgcolor="6699ff">web前端开发技术[求实楼409]</td>
            <td width="120" rowspan="2"></td>
            <td width="120" rowspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <td width="30">6</td>
        </tr>
        <tr height="60" align="center">
            <td width="30">7</td>
            <td width="120" rowspan="2" bgcolor="eea2ad">体育4 </td>
            <td width="120" rowspan="2" bgcolor="cd919e">形势与政策计[博文楼404]</td>
            <td width="120" rowspan="2"></td>

            <td width="120" rowspan="2" bgcolor="eea2ad">体育4</td>
            <td width="120" rowspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <td width="30">8</td>
        </tr>
        <tr height="60" align="center">
                <td width="30">9</td>
                <td width="120" rowspan="2"> </td>
                <td width="120" rowspan="2"></td>
                <td width="120" rowspan="4"></td>
                <td width="120" rowspan="2"></td>
                <td width="120" rowspan="2" bgcolor="c6e2ff">数学建模[博文楼303]</td>
                <td width="120" rowspan="2"></td>
                <td width="120" rowspan="2"></td>
         </tr>
         <tr height="60" align="center">
                <td width="30">10</td>  
        </tr>
    </table>
</body>