用HTML5写一个课程表

最新推荐文章于 2024-07-17 09:43:10 发布
最新推荐文章于 2024-07-17 09:43:10 发布
阅读量1.1k 收藏
点赞数 1
文章标签： html 程序设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54481824/article/details/112688513
版权

用HTML5写一个课程表。
案例：
在这里插入图片描述

这个思路挺简单的，写一个表格，注意单元格的合并和表框的处理就没有问题。

需要用到的基础标签如：

<table></table>  <p></p>

等
不再赘述。

用到的关键标签：

<table cellspacing="0" border="1"></table>

以及单元格跨行合并标签

<td rowspan="n"></td>

还有表示单元格背景颜色的标签：

<td bgcolor="#00FF00"></td>

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" cellspacing="0">
        <!-- 表头 -->
        <tr>
            <th>时间</th>
            <th>节次</th>
            <th>课 程 名 称</th>
            <th>学分</th>
        </tr>
        <!-- 1 -->
        <tr>
            <td rowspan="6">星期一</td>
            <td>1.2</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 2 -->
        <tr>

            <td>3.4</td>
            <td>高等数学A-1</td>
            <td>6</td>

        </tr>
        <!-- 3 -->
        <tr>
            <td>5.6</td>
            <td>体育</td>
            <td>1</td>

        </tr>
        <!-- 4 -->
        <tr>
            <td>7.8</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 5 -->
        <tr>
            <td>9.10</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 6 -->
        <tr>
            <td>11.12</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 7 -->
        <tr>
            <td rowspan="6">星期二</td>
            <td>1.2</td>
            <td>大学英语读写I</td>
            <td>4</td>

        </tr>
        <!-- 8 -->
        <tr>
            <td>3.4</td>
            <td>思政</td>
            <td>3</td>

        </tr>
        <!-- 9 -->
        <tr>
            <td>5.6</td>
            <td bgcolor="#00FF00">走进智能科学</td>
            <td>3</td>

        </tr>
        <!-- 10 -->
        <tr>
            <td>7.8</td>
            <td bgcolor="#00FF00">*线性代数</td>
            <td>3</td>

        </tr>
        <!-- 11 -->
        <tr>
            <td>9.10</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 12 -->
        <tr>
            <td>11.12</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 13 -->
        <tr>
            <td rowspan="6">星期三</td>
            <td>1.2</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 14 -->
        <tr>
            <td>3.4</td>
            <td bgcolor="#00FF00">程序设计基础</td>
            <td>3</td>

        </tr>
        <!-- 15 -->
        <tr>
            <td>5.6</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 16 -->
        <tr>
            <td>7.8</td>
            <td>*军事理论<br/>**形势与政策</td>
            <td>1</td>

        </tr>
        <!-- 17 -->
        <tr>
            <td>9.10</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 18 -->
        <tr>
            <td>11.12</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 19 -->
        <tr>
            <td rowspan="6">星期四</td>
            <td>1.2</td>
            <td bgcolor="#00FF00">程序设计基础</td>
            <td>3</td>

        </tr>
        <!-- 20 -->
        <tr>
            <td>3.4</td>
            <td>高等数学A-1</td>
            <td>6</td>

        </tr>
        <!-- 21 -->
        <tr>
            <td>5.6</td>
            <td bgcolor="#00FF00">线性代数</td>
            <td>3</td>

        </tr>
        <!-- 22 -->
        <tr>
            <td>7.8</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 23 -->
        <tr>
            <td>9.10</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 24 -->
        <tr>
            <td>11.12</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 25 -->
        <tr>
            <td rowspan="6">星期五</td>

            <td>1.2</td>
            <td>大学英语读写I</td>
            <td>4</td>

        </tr>
        <!-- 26 -->
        <tr>
            <td>3.4</td>
            <td bgcolor="#00FF00">*思政<br />**走进智能科学</td>
            <td>3</td>

        </tr>
        <!-- 27 -->
        <tr>
            <td>5.6</td>
            <td>高等数学A-1</td>
            <td>6</td>

        </tr>
        <!-- 28 -->
        <tr>
            <td>7.8</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 29 -->
        <tr>
            <td>9.10</td>
            <td></td>
            <td></td>

        </tr>
        <!-- 30 -->
        <tr>
            <td>11.12</td>
            <td></td>
            <td></td>

        </tr>
    </table>
    <p>*表示单周上课</p>
    <p>**表示双周上课</p>
</body>

</html>

运行结果：

在这里插入图片描述

叆-叇
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如何用HTML制作课程表
weixin_45274946的博客
11-30 1万+
小白速成HTML制作课程表
HTML5中怎么用表格制作一个课程表
Lv200299的博客
09-12 1063
table标签中的border属性表示边框外围的粗细值 solid属性可以控制边框的颜色 background-color可以改变单元格的颜色。表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）单元格：表格中行与列相交所产生的区域。行：表格中的水平间隔；列：表格中的垂直间隔；
用HTML设计一个课程表
m0_74697393的博客
03-24 3077
<b>星期一</b></th><th ><b>星期二</b></th><th ><b>星期三</b></th><th ><b>星期四</b></th><th ><b>星期日</b></th><th><b>星期五</b></th><th><b>星期六</b>动力机械</a></td><td >工程力学</a></td><td >数据结构</a></td><td >编译原理</a></td><td >动力机械
html5与课程思政,省级“课程思政”示范课程：web综述-教案.pdf
weixin_36210111的博客
06-23 2504
授课题目 Web 前端开发技术综述教学时数 2 学时 授课时间 第1次教学目的与要求：1. 了解Web 前端开发的基本状况；2. 掌握HBuilder 开发工具；3.了解所对应岗位的职业操守。教学基本内容：1.Web 发展及工作原理；2.开发工具HBuilder ...
用HTML制作课程表
MoMeng233的博客
09-12 179
用html制作课程表
用HTML5编写一个课程表界面
DollyCat的博客
09-12 2335
方法：用li列表常见表格。 效果图如下 源代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <style> body{ margin:0% auto; padding:0; background:#fff; t
用HTML5 编写课程表界面
weixin_46439490的博客
03-07 964
下面是用HTML5 编写的一个课程表界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <link rel="stylesheet" href="kcb.css" t...
用html写网课课程表
01-20
在本例中，我们将探讨如何利用HTML来创建一个网课课程表，帮助学生更方便地管理他们的在线学习时间。 首先，创建一个HTML文档的结构是至关重要的。一个基本的HTML文档通常包括`<!DOCTYPE html>`声明、`<html>`元素...
HTML5生成课表
12-25
在这个“HTML5生成课表”的项目中，我们将探讨如何利用HTML5的特性创建一个功能丰富的课程表，同时结合JavaScript来实现单双周课程的智能判断。 首先，HTML5提供了一系列新的元素，如、、、等，它们有助于结构化...
html-课程表
01-20
在实际应用中，HTML课程表可能会包含更多的交互性元素，如使用JavaScript或jQuery添加动态功能，比如点击显示或隐藏课程详情、添加拖放功能以方便调整课程时间，或者集成日历插件实现课程预约等。 总的来说，HTML和...
html5课程表
06-04
html5 课程表 参考下 附件有另外一种课程表截图，有需要可以联系我
北大青鸟一HTML5+CSS3所有课程所有作业
10-13
在“北大青鸟一HTML5+CSS3所有课程所有作业”中，我们可以预见到一系列深入学习这两个主题的实践练习。 HTML5是HyperText Markup Language的第五个版本，它对旧版HTML进行了许多改进和扩展，旨在提高网页的语义性、...
用HTML5制作课程表
热门推荐
qq_44160107的博客
07-01 1万+
无论是上班族还是学生党，都需要一份类似课程表的表格来提醒我们的日程。有了它就可以不必担心自己忘记该干什么事情，到点了该干什么事情。它可以说是我们日常生活中经常接触的事物了，制作一份课程表也很简单，可以用纸写，可以在office里写，可以在一些软件上写等等……但是，你听说过用HTML5做的课程表吗？ 图1.用HTML5写的课程表 怎么样，看起来还是很高大上的吧！制作这个表格也不难，只需要添加一些列...
HTML制作简单课表
IPhoneP40Pro的博客
06-23 1万+
html，css制作一张简单又美观的课表
HTML5简易课程表（表格的制作）
SE_FUE_的博客
05-26 2583
未添加样式，仅用于基础学习
利用HTML制作学生课程表
2301_79706737的博客
09-12 305
利用HTML制作课程表
如何用html创建一个课程表
aabbxxww的博客
09-11 229
【代码】如何用html创建一个课程表。
课程表的编写（html编写表格）
QYXQYX_的博客
08-02 451
<!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>课程.
HTML2048小游戏（最新版）
最新发布
w11111xxxl的博客
07-17 386
比上一篇文章的2048小游戏更好一点。
我想利用HTML写一个课程表程序
03-07
HTML 是一种用于创建网页的标记语言，你可以使用 HTML 标签来创建一个课程表程序。你可以使用表格标签来创建表格，然后在表格中添加课程信息。你还可以使用 CSS 样式来美化你的课程表程序。希望这可以帮助你开始编写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值