HTML5简易课程表（表格的制作）

已于 2023-02-08 15:20:33 修改
阅读量2.6k 收藏 15
点赞数 4
文章标签： html 前端
于 2022-05-26 10:13:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SE_FUE_/article/details/124978989
版权

简易课程表的制作，只需使用到表格标签，未添加样式

编写如下课程表：

课程表
               时          间课程名称教室备注
上午8：00 - 9 :  30HtmlE-405
10：00 - 11 :  40JavaScript红楼-304
下午14：00 - 15 :  30cssE-401
16：00 - 17 :  40自习红楼-306

示例代码如下：

<!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>Document</title>
</head>
<body>
    <table border="1"  align="center" width="500">
        
            <tr>
                <th colspan="2">时间</th>
                <th>课程名称</th>
                <th>教室</th>
                <th>备注</th>
            </tr>
        
            <tr >
                <td rowspan="2">上午</td>
                <td>8：00 - 9 :  30</td>
                <td>Html</td>
                <td>E-405</td>
                <td></td>
            </tr>
            <tr >
                <td>10：00 - 11 :  40</td>
                <td>javascript</td>
                <td>红楼-304</td>
                <td></td>
            </tr>
            <tr >
                <td rowspan="2">下午</td>
                <td>14：00 - 15 :  30</td>
                <td>css</td>
                <td>E-401</td>
                <td></td>
            </tr>
            <tr >

                <td>16：00 - 17 :  40</td>
                <td>自习</td>
                <td>红楼-306</td>
                <td></td>
            </tr>
        

    </table>

</body>
</html>

总结：

  1. 表格标签：<table>标签表示表格 ，<th>表示表头，<tr>表示表格中的行，<td>表示表格中的单元格。
  2. 表格中的属性：单元格跨列：colspan，单元格跨行：rowspan，内容和单元格之间的间距：cellpadding，单元格间的间距：cellspacing。
  3. rowspan="2"表示合并两个行单元格；colspan="2"表示合并两个列单元格。
  4. 表格的便一般是从上至下，从左至右的（即先写一行一行的写）
  5. 复杂的课程表只需往其中添加行、列
  6. border是用于调整边框的粗细，若不写，则无边框

 

We Ashore
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5中怎么用表格制作一个课程表
Lv200299的博客
09-12 1088
table标签中的border属性表示边框外围的粗细值 solid属性可以控制边框的颜色 background-color可以改变单元格的颜色。表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）单元格：表格中行与列相交所产生的区域。行：表格中的水平间隔；列：表格中的垂直间隔；
如何用HTML制作课程表
热门推荐
weixin_45274946的博客
11-30 1万+
小白速成HTML制作课程表
HTML5标签小集
12-13
HTML标签； <meta>属性Content,name,scheme <!DOCTYPE> <a>属性coords,shape, <abbr>属性 <address>属性 <area>属性 <article>属性 <aside>属性 <audio>属性 <b>属性 <base>属性 <bdo>属性 <blockquoe>属性 <body>属性 <br>属性 <button>属性 <canvas>属性 <caption>属性 <cite>属性 <code>属性 <col>属性 <colgroup> <command> <datalist> <d
HTML5简明教程系列之HTML5 表格与表单（二）
Bobowen的博客
11-15 2034
HTML的第二弹也来了，最近高产似母猪，状态也不错，代码来源为实验课。本期主要内容为：HTML表格与DIV应用、HTML表单。
用HTML制作课程表
qq_75036592的博客
09-12 2727
3.在表格中，我们需要添加表头和表格行，用于显示课程的相关信息，如课程名称、教师、班级等。2.然后，我们需要在HTML文档中添加一个表格元素，用于显示课程表。4.最后，我们可以使用CSS来美化我们的课程表。1.首先，我们需要创建一个HTML文档。
jsp+javabean+servelt实现简单的登录及选课界面
07-15
在本项目中，你需要创建对应的数据库表，如用户表（包含用户ID、用户名、密码等字段）和课程表（包含课程ID、课程名、学分等字段）。数据库操作包括查询（如查找用户或课程信息）、更新（如修改密码或选课状态）、...
（全）传智播客PHP就业班视频完整课程
10-30
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
史上最全韩顺平传智播客PHP就业班视频，9月份全集
03-26
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
史上最全韩顺平传智播客PHP就业班视频，10月份全集
03-26
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
史上最全传智播客PHP就业班视频课，8月份视频
03-26
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
HTML5前端设计——课表制作
夏天De风ly
03-08 4853
HTML5的功能对于前段的设计应用比较广泛。在里面中利用table标签作为主要的布局，通过合并单元格，设置单元格的背景颜色，字体颜色以及div大小，同时利用HTML5的css选择器，使修饰代码少了很多，只要麻烦在于合并单元格和th标签的大小。同时利用css样式表和代码分离，采用外链式link链接。下面是利用HTML5和css样式进行的课表制作代码及效果图。 <!DOCTYPE html&gt...
如何用H5代码写一个课程表
2201_75677643的博客
09-12 456
这是一份示例课程表，展示了一个星期内的课程安排。每天根据时间段来进行划分，每个时间段可以容纳两个课程。教师姓名和班级信息列在每个课程的下方。这个示例课程表涵盖了多个学科，包括人工智能与应用、企业网站综合实训、信息安全、形势与政策、前端框架技术和计算机网络基础。在星期一和星期五的第五六节有一个课程是影视编辑与合成。该课程表可以用于学生管理自己的课程安排，提醒自己在每个时间段准时上课。根据实际情况，可以修改课程信息和时间安排。
利用html制作课程表
2301_79706999的博客
09-13 2591
height属性设置元素的高度。定义列标签。width属性设置元素的宽度。 定义表格标签。border属性指定元素边框的样式、宽度和颜色。margin属性设置外边距。
HTML简易课程表
weixin_62745383的博客
05-21 397
内容可自己修改 border表示边框 cellspacing表示间隙~
用HTML制作一个课程表
2201_75650749的博客
09-17 1798
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）以上是简单的HTML表格用来展示一个星期的课程安排。表格使用了css样式来美化。
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
HY_Sophie的博客
11-15 2226
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
html5表格制作教程,html怎么做表格
weixin_32778881的博客
06-05 7475
html做表格的方法：首先新建一个html，并在“”中间填入表格内容；然后在“”中间输入样式表的样式；最后设置单元格的宽度高度等等样式即可。本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑html做个表格的步骤如下：1、首先新建一个html，点击中间，先填入表格内容；2、内容根据需求来写即可，示例代码如下：功课表语文7:00-7:407:50-8:3...
html5&css&js代码 035 课程表
最新发布
明月看潮生的博客
03-21 835
一个具有亮蓝色背景的网页，其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头，并对单元格设置了内边距和边框样式。
用html5 css3制作简易静态网页
06-06
可以使用HTML5和CSS3来制作简易静态网页。HTML5可以用来定义网页的结构和内容，而CSS3可以用来定义网页的样式和布局。以下是一些制作简易静态网页的步骤： 1. 编写HTML代码，包括头部信息、导航栏、内容区域等。 2. 使用CSS3来定义网页的样式，包括字体、颜色、背景、边框等。 3. 使用CSS3来定义网页的布局，包括盒模型、浮动、定位等。 4. 添加交互效果，如鼠标悬停、点击等。 5. 最后进行测试和调试，确保网页的兼容性和稳定性。 以上是制作简易静态网页的基本步骤，具体实现可以根据自己的需求和技能水平进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值