HTML课程表制作（利用html、css、table表格知识）

最新推荐文章于 2023-10-21 22:51:50 发布

Endorphin巛舟

最新推荐文章于 2023-10-21 22:51:50 发布

阅读量3.7k

点赞数 2

分类专栏： HTML 文章标签： html css 软件工程开源

本文链接： https://blog.csdn.net/Endorphincuan/article/details/127075043

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习html中的表格table章节后，可以制作一些表格、课程表等，可以更清晰地呈现信息。以下分享内容是结合本人某周的课程，制作的一张简单的课程表。

代码如下：

<!doctype html>        <!--目的是要告诉标准通用标记语言解析器，
                        它应该使用什么样的文档类型定义（DTD）来解析文档-->
<html lang="en">        <!--lang="en"意为编辑语言是英语-->

    <head>
        <meta charset="UTF-8">        <!--charset=”utf-8”是告知浏览器此页面
         
                                       属于什么字符编码格式-->
        <title>课程表</title>
        <style type="text/css">
        #head{font-size:26px;background-color:#5645bf;color:white}
        #riqi{background-color:#DCDCDC}
        .jieci{background-color:yellow;}
        .zhuanye{background-color:#7AC5CD}
        .math{background-color:#CD5C5C}
        .en{background-color:#66CDAA}
        .tongshi{background-color:#a15dd0}    <!--以上是用css定义class和id标记内容的样式-->
        table{border: 1px solid}        <!--此操作为表格添加外框线-->
        </style>


    </head>
    <body>
        <table width="400px" height="680px">
            <thead>
                <tr align="right" id="head">
                    <th colspan="8">西南大学软件工程课表（第八周）</th>
                </tr>
                <tr id="riqi">
                    <th>10月</th><th>周一<br>10/24</th><th>周二<br>10/25</th><th>周三<br>10/26</th>
                    <th>周四<br>10/27</th><th>周五<br>10/28</th><th>周六<br>10/29</th><th>周日<br>10/30</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th class="jieci">1</th><td></td><td></td><td rowspan="2" class="tongshi">思想道德与法制</td>
                    <td rowspan="2" class="tongshi">思想道德与法制</td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">2</th><td></td><td></td><td></td>
                    <td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">3</th><td rowspan="2" class="zhuanye">Web开发概述</td><td rowspan="2" class="zhuanye">Web开发概述</td><td></td>
                    <td rowspan="2" class="zhuanye">软件工程科学导论</td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">4</th><td></td><td></td><td></td>
                    <td></td>
                </tr>
                <tr>
                    <th class="jieci">5</th><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">6</th><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">7</th><td rowspan="2" class="en">学术语言与沟通I</td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">8</th><td></td><td></td><td></td>
                    <td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">9</th><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">10</th><td rowspan="2" class="zhuanye">软件工程科学导论</td><td></td><td></td>
                    <td rowspan="2" class="en">学术语言与沟通</td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">11</th><td></td><td></td><td></td>
                    <td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">12</th><td rowspan="3" class="math">高等数学IA</td><td rowspan="2" class="en">学术语言与沟通I</td><td rowspan="2" class="en">学术语言与沟通I</td>
                    <td rowspan="3" class="math">高等数学IA</td><td rowspan="3" class="tongshi">军事理论</td><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">13</th><td></td><td></td>
                </tr>
                <tr>
                    <th class="jieci">14</th><td></td><td></td><td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

效果如图所示：