用html写一个简单课表

最新推荐文章于 2024-05-20 15:43:39 发布
最新推荐文章于 2024-05-20 15:43:39 发布
阅读量8.8k 收藏 73
点赞数 14
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tory886/article/details/105175061
版权

html实例-课表

本文章主要介绍由html中的表格table来制作课表，完成图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的课表</title>
		<style type="text/css">
			td{
				border-radius: 4%;
			}
		</style>
	</head>
	<body>
		<font  color="#ffffff"> 
		<table border="0" width="400" align="center" height="630" bgcolor="#fec7ff">
			<tr align="middle">
			<td width="30" ></td>
			<td width="50" align="center" height="30">周一</td>
			<td width="50"align="center"  height="30">周二</td>
			<td width="50" align="center" height="30">周三</td>
			<td width="50" align="center" height="30">周四</td>
			<td width="50" align="center" height="30">周五</td>				
			</tr>
			<tr align="middle">
			<td >1</td>
			<td bgcolor="#73b3f0" rowspan="2">动态网页设计基础</td>
			<td height="60" rowspan="2"></td>
			<td height="60"bgcolor="#9f8bea" rowspan="2">Matlab</td>
			<td height="60" rowspan="2"></td>
			<td height="60" rowspan="2"></td>	
			</tr>
			<tr align="middle">
			<td >2</td> 			
			</tr>
			<tr align="middle">
			<td >3</td>
			<td bgcolor="#9f8bea" rowspan="2" align="middle">大学英语</td>
			<td bgcolor="#7acfa4" rowspan="2">创业基础</td>
			<td bgcolor="#e086aa" rowspan="2">网络互联</td>
			<td height="60" rowspan="2"></td>
			<td bgcolor="#ffcd62" rowspan="2">马克思主义基本原理概论</td>	
			</tr>
			<tr align="middle">
			<td >4</td>			
			</tr>
			<tr align="middle">
			<td >5</td>
			<td height="60"bgcolor="#e086aa" rowspan="2">Matlab</td>
			<td bgcolor="#73b3f0" height="60" rowspan="2">python编程基础</td>
			<td height="60" rowspan="2"></td>
			<td bgcolor="#9f8bea" height="60" rowspan="4">操作系统原理</td>
			<td bgcolor="#73b3f0" height="60" rowspan="2">python编程基础</td>
			</tr>
			<tr align="middle">
			<td >6</td>				
			</tr>
			<tr align="middle">
			<td >7</td>
			<td bgcolor="#ffcd62" height="60" rowspan="2">武术</td>
			<td bgcolor="#9f8bea" height="60" rowspan="2">网络互联技术</td>
			<td height="60" rowspan="2"></td>
			<td height="60" rowspan="2"></td>	
			</tr>
			<tr align="middle">
			<td >8</td>				
			</tr>
			<tr align="middle">
			<td >9</td>
			<td bgcolor="#7acfa6" height="60" rowspan="2">公共艺术鉴赏</td>
			<td height="60" rowspan="2"></td>
			<td height="60" rowspan="2"></td>
			<td height="60"bgcolor="#ffcd62" rowspan="2">合唱</td>
			<td height="60" rowspan="2"></td>	
			</tr>
			<tr align="middle">
			<td>10</td>				
			</tr>
		</table>
		</font> 
	</body>
</html>

注释：

border-radius： %以百分比定义圆角的形状。
rowspan跨行合并单元格
font-color设置字体颜色
薛定谔的猫87
关注
  • 14
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML简易课程表
weixin_62745383的博客
05-21 392
内容可自己修改 border表示边框 cellspacing表示间隙~
用HTML5编写一个课程表界面
DollyCat的博客
09-12 2333
方法：用li列表常见表格。 效果图如下 源代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <style> body{ margin:0% auto; padding:0; background:#fff; t
【HTML】一个简单的课程表
A Lucky Boy的博客
02-18 928
table实现简单的课程表： <!-- 表格 td属性:closspan=向右合并单元格;rowspan=向下合并单元格 边框等与一像素 --> <table border="1px" id="kcb"> <tr> <!-- 样式设置背景颜色.字体颜色 --> <td style="background-color:darkgray; color:darkmagent
基于HTML表格的课程表
最新发布
weixin_53598426的博客
05-20 279
关于HTML的表格学习内容，完成一个课程表的设计
用HTML制作一个课程表
2201_75650749的博客
09-17 1791
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）以上是简单的HTML表格用来展示一个星期的课程安排。表格使用了css样式来美化。
利用Html和CSS做一张课程表
a1k2l45k的博客
05-14 1万+
一 思路 利用HTML和CSS的知识建立一个表格，然后对表格进行美化和相关的单元格合并处理 二 步骤 建立一个七行六列的表格 将第一列的第二行到第四行合并成一个单元格（rowspan） 将第一列的第五行到第七行合并成一个单元格 （rowspan） 在相应的单元格中填上时间和课程 三 注意点 一定要将要合并的单元格注销掉 四 代码片段 &lt;!DOCTYPE html&g...
html课程表页面
热门推荐
Sunday CSDN博客
11-26 1万+
效果图： html代码部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>课程表</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> </head><body background="im
用html写网课课程表
01-20
以下是一个简单的课程表的HTML结构示例： ```html <!DOCTYPE html> <html lang="zh"> 大二下学期课程表 大二下学期课程表 时间 星期一 星期二 ... 第一节 课程A 课程B ... 第...
html实现简易课程表
09-13
html实现的建议课程表，可按照需求自行修改
Curriculum:一个简易PHP课程表
06-19
【PHP课程表】是一个简易的PHP项目，旨在帮助用户管理和展示课程安排。这个项目的核心功能是创建、存储和展示课程信息，可能包括课程名称、教师、时间、地点等。通过导入`curriculum.sql`数据库文件，我们可以看到...
简单的html课表
07-31
用html制作一个简单的个人课表模板，用html制作一个简单的个人课表模板，
HTML5生成课表
12-25
HTML5生成超级课程表格子样式课表，并通过JS代码实现单双周课程自动判断。
学生课程表源代码
03-04
学生课程表源代码，非常实用，绝对值得学习的代码。
简单大学生简单html表单课程表
04-29
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
html前端学习记录，利用html+css创建简单课程表
AdSensca的博客
03-23 821
html+css创建简单课程表 设计思路 利用table,th,td表格标签建立基本框架，然后在其中填充div以添加样式 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
HTML5中怎么用表格制作一个课程表
Lv200299的博客
09-12 1061
table标签中的border属性表示边框外围的粗细值 solid属性可以控制边框的颜色 background-color可以改变单元格的颜色。表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）单元格：表格中行与列相交所产生的区域。行：表格中的水平间隔；列：表格中的垂直间隔；
html，css实现呼吸灯、课程表、个人简历
Azhangbiny的博客
11-17 367
1、html+css实现呼吸灯效果，如下图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆</title> <style> div { box-sizing: border-box; } .content { width: 400px; height: 6
用HTML写一个超级课程表页面
Mr_jianghanlin的博客
03-09 4859
用HTML写一个超级课程表页面 首先给大家展示一下效果图，他家可以根据自己的喜好，换成自己喜欢的颜色 看到这个图可以把它肯成一个大的表格来进行做，将一些单元格进行相应的合并就可以达到上面所期望的图片效果，然后在用css选择器进行颜色的修饰，最终可以达到上图的效果。 下面我来一起看下代码部分： <!DOCTYPE html> <html> <head> ...
HTML制作课表源代码
weixin_51763809的博客
09-19 6252
<!DOCTYPE html> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>课表</title> </head> <body align="center"> <table align="center" border="1" ...
用javascript写一个课程表
05-24
好的，以下是一个简单的用 JavaScript 实现的课程表： HTML 代码： ```html <table id="timetable"> <thead> <tr> <th></th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr> </thead> <tbody> <tr> <td>8:00-9:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>9:00-10:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>10:00-11:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>11:00-12:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>12:00-13:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>14:00-15:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>15:00-16:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>16:00-17:00</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> ``` JavaScript 代码： ```javascript // 定义课程表数据 const timetableData = [ { day: 1, // 星期一 time: '8:00-9:00', course: '高等数学', teacher: '张三', classroom: '教学楼101' }, { day: 2, // 星期二 time: '14:00-15:00', course: '英语', teacher: '李四', classroom: '教学楼201' }, { day: 3, // 星期三 time: '10:00-11:00', course: '计算机网络', teacher: '王五', classroom: '教学楼301' }, { day: 4, // 星期四 time: '11:00-12:00', course: '操作系统', teacher: '赵六', classroom: '教学楼401' }, { day: 5, // 星期五 time: '9:00-10:00', course: '数据库', teacher: '钱七', classroom: '教学楼501' } ]; // 获取课程表元素 const timetable = document.getElementById('timetable'); // 遍历课程表数据，渲染到页面上 timetableData.forEach(data => { const row = timetable.rows[data.time.substr(0, 1) - 8]; // 获取课程对应的行 const cell = row.cells[data.day]; // 获取课程对应的格子 cell.innerHTML = ` <p>${data.course}</p> <p>${data.teacher}</p> <p>${data.classroom}</p> `; }); ``` 以上代码实现了一个简单的课程表，可以根据自己的需求进行修改和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值