如何使用Html制作课程表

构建环境，在VScode中添加一个.html的后缀名


tip:命名最好用英文

搭建框架

使用table表格来设置表格

快速生成

添加数据

tr是列元素
td是行元素

给课表中的字体设置颜色

使用CSS在style中给字体设置颜色

给课表设置不同风格的边框

给课程表设置边框

  1. 最终结果

代码

全部代码 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表</title>
    <style>
        td{
            /* 设置边框颜色 */
            border-color:springgreen skyblue pink;
            /* 边框大小 */
            border-width: 8px;
            /* 边框类型 solid(实线)  dotted(虚点线)  dashed(虚直线) double(双线)*/
            border-style: double;
            /*  设置字体的颜色 */
            color:blueviolet;
            /*   设置字体的大小 */
            font-size: 30px;
        }
        
    </style>
</head>
<body>
    <table cellpadding="25px" cellspacing="10px">

        <tr>
            <td>星期</td>
            <td class="re">星期一</td>
            <td class="re">星期二</td>
            <td class="re">星期三</td>
            <td class="re">星期四</td>
            <td class="re">星期五</td>
            <td class="re">星期六</td>
            <td class="re">星期日</td>
        </tr>
        <tr>
            <td>1</td>
            <td>计算机网络</td>
            <td>大学物理</td>
            <td>Python爬虫</td>
            <td>无</td>
            <td>计算机网络</td>
            <td>无</td>
            <td>无</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Python爬虫</td>
            <td>概率论与数理统计</td>
            <td>无</td>
            <td>大学英语</td>
            <td>体育</td>
            <td>无</td>
            <td>无</td>
        </tr>
        <tr>
            <td>3</td>
            <td>数组逻辑</td>
            <td>马克思主义</td>
            <td>无</td>
            <td>大学物理实验</td>
            <td>形势与政策</td>
            <td>无</td>
            <td>无</td>
        </tr>
        <tr>
            <td>4</td>
            <td>数字逻辑实验</td>
            <td>无</td>
            <td>无</td>
            <td>无</td>
            <td>大学英语</td>
            <td>无</td>
            <td>无</td>
        </tr>

    </table>
</body>
</html>

更多推荐

用html制作课程表