用html制作课程表

最新推荐文章于 2023-09-13 01:02:14 发布

孙hill

最新推荐文章于 2023-09-13 01:02:14 发布

阅读量2.9k

点赞数 5

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_55056589/article/details/121598486

版权

如何使用Html制作课程表

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

构建文件格式
tip:命名最好用英文

搭建框架

使用table表格来设置表格

快速生成

添加数据

tr是列元素
td是行元素
添加数据

给课表中的字体设置颜色

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

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

给课程表设置边框

最终结果

代码

全部代码 内联代码片。

<!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>

孙hill

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
用html制作课程表

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar
复制链接

扫一扫