HTML+CSS制作课程表

HTML+CSS制作课程表

今天复习到了表格，八表个内容进行了更深层次的了解，首先，来看看我课堂上做好的课程表吧~

这里用到了HTML和CSS，就这两个而已，相比网络上的，这个较为基础，也比较适合初学者运用，
接下来显示一下HTML代码：

 <table>
            <caption>计算机工程技术学院课表</caption>
            <thead>
                <tr>
                    <th></th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <th rowspan="2">上午</th>
                    <td>1-2节<br/>java</td>
                    <td>1-2节<br/>Python</td>
                    <td>1-2节<br/>HTML5</td>
                    <td>1-2节<br/>vue</td>
                    <td>1-2节<br/>android</td>
                </tr>
                <tr>

                    <td>3-4节<br/>java</td>
                    <td>3-4节<br/>Python</td>
                    <td>3-4节<br/>HTML5</td>
                    <td>3-4节<br/>vue</td>
                    <td>3-4节<br/>android</td>
                </tr>
                <tr>
                    <th rowspan="2">下午</th>
                    <td>5-6节<br/>PHP</td>
                    <td>5-6节<br/>javascript</td>
                    <td>5-6节<br/>Hadoop</td>
                    <td>5-6节<br/>PHOTOSHOP</td>
                    <td>5-6节<br/>C</td>
                </tr>
                <tr>

                    <td>7-8节<br/>PHP</td>
                    <td>7-8节<br/>javascript</td>
                    <td>7-8节<br/>Hadoop</td>
                    <td>7-8节<br/>PHOTOSHOP</td>
                    <td>7-8节<br/>C</td>
                </tr>
                <tr>
                    <th rowspan="2">晚上</th>
                    <td>9-10节<br/>大学英语</td>
                    <td>9-10节<br/>形式政策</td>
                    <td>9-10节<br/>创新创业</td>
                    <td>9-10节<br/>就业指导</td>
                    <td>9-10节<br/>军事理论</td>
                </tr>
                <tr>

                    <td>11-12节<br/>大学英语</td>
                    <td>11-12节<br/>形式政策</td>
                    <td>11-12节<br/>创新创</td>
                    <td>11-12节<br/>就业指导</td>
                    <td>11-12节<br/>军事理论</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>时间说明</th>
                    <td colspan="4">8：10-11：50；14：00-17：40；18：10-21：40</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>

table表示创建了一个表格；th表示表头，它会有自己与td区分的样式，如字体加粗，颜色加深；tr表示行，td表示列。thead表示表格的头部；tfoot表示表格的尾部；tbody表示除thead和tfoot外的表格内容；一般，thead、tbody、tfoot用于分组。

上午 rowspan="2"表示这个单元格占了两行的意思； 8：10-11：50；14：00-17：40；18：10-21：40 colspan="4"这里表示这个单元格占了这一行的四列；

接下来是css部分：

table {
            width: 600px;
            height: 350px;
            border: 1px dashed rgb(252, 255, 252);
            border-collapse: collapse;
        }

这一部分用于设置表格的宽度、高度边框以及合并单元格内的边框；

 td,
        th {
            border: 1px solid rgb(252, 255, 252);
        }

td、th的边框颜色，大小，边框样式；

 td {
            background: linear-gradient(to left, rgb(159, 216, 159), rgb(109, 196, 101));
            text-align: center;
            text-shadow: 1px 1px 1px rgb(105, 153, 32);
        }

每个单元格的颜色，设置了渐变颜色，文字对齐方式以及文字阴影；我一般喜欢居中对齐；

 th {
            background: linear-gradient(to left, rgb(61, 150, 61), rgb(69, 201, 69))
        }

设置表头的背景颜色，也是渐变；

 thead th:nth-child(1) {
            background: rgb(149, 253, 166);
        }
        
        tfoot td:nth-last-child(1) {
            background: rgb(149, 253, 166);
        }

这里设置两个空单元格，颜色一样是采用渐变。
这个课程表要注意单元格之间的合并，这一步非常重要，代码在上面。写代码过程中有点繁琐，但是作为一个合格的码农，要有足够的耐心。
写完突然发现有点简单，但课上可是花了挺长时间早的，希望敲代码速度越来越快吧~