纯HTML课表

table标签构造课表

table标签常用于制作表格以及简单布局,于是我就玩了下table标签,用table标签也能构造出很漂亮的页面呢,虽然在博客页面加入与实际打开页面稍微有点出入,但还是可以接受的。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的课表</title>
</head>
<body background="background.png">
    <table width="100%" align="center" >
        <caption><h2>我的课表</h2></caption>
        <tr height="37px"><!-- 标题栏-->
            <th width="60px" bgcolor="DarkOrchid">节次</th>
            <th width="100px" bgcolor="DarkOrchid">上课时间</th>
            <th width="150px" bgcolor="DarkOrchid">周日</th>
            <th width="150px" bgcolor="DarkOrchid">周一</th>
            <th width="150px" bgcolor="DarkOrchid">周二</th>
            <th width="150px" bgcolor="DarkOrchid">周三</th>
            <th width="150px" bgcolor="DarkOrchid">周四</th>
            <th width="150px" bgcolor="DarkOrchid">周五</th>
            <th width="150px" bgcolor="DarkOrchid">周六</th>
        </tr>
        <tr height="37px" align="center">
            <td align="center">1</td>
            <td rowspan="1">8:00-8:45</td>
            <td rowspan="13" bgcolor="Cyan">我爱学习<br>学习爱我</td>
            <td rowspan="5"></td>
            <td rowspan="2" bgcolor="orange">WEB应用技术<br>@D座301</td>
            <td rowspan="2"></td>
            <td rowspan="2" bgcolor="hotpink">数据库原理<br>@E407</td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
        <tr height="37px" align="center">
            <td>2</td>
            <td rowspan="1">8:55-9:40</td>
        </tr>
        <tr height="37px" align="center">
            <td>3</td>
            <td rowspan="1">10:00-10:45</td>
            <td rowspan="3"></td>
            <td rowspan="2" bgcolor="springgreen">计算机网络<br>@E阶梯教室202</td>
            <td rowspan="2" bgcolor="Aquamarine">计算理论导引<br>@E208</td>
            <td rowspan="2" bgcolor="Peru">系统分析与设计<br>@D座406</td>
            <td rowspan="2" bgcolor="DeepSkyBlue">中国近代社会转型<br>@E阶梯教室101</td>
        </tr>
        <tr height="37px" align="center">
            <td>4</td>
            <td rowspan="1">10:55-11:40</td>
        </tr>
        <tr height="37px" align="center">
            <td>5</td>
            <td rowspan="1">11:50-12:35</td>
            <td rowspan="3"></td>
            <td rowspan="1"></td>
            <td rowspan="3"></td>
        </tr>
        <tr height="37px" align="center">
            <td>6</td>
            <td rowspan="1">14:00-14:45</td>
            <td rowspan="2" bgcolor="SpringGreen">计算机网络<br>@E阶梯教室202</td>
            <td rowspan="2" bgcolor="HotPink">数据库原理<br>@E407</td>
            <td rowspan="2" bgcolor="Thistle">算法设计与分析<br>@E208</td>
        </tr>
        <tr height="37px" align="center">
            <td>7</td>
            <td rowspan="1">14:55-15:40</td>
        </tr>
        <tr height="37px" align="center">
            <td>8</td>
            <td rowspan="1">16:00-16:45</td>
            <td rowspan="3"></td>
            <td rowspan="3" bgcolor="    GreenYellow">企业建模与系统集成<br>@D座503</td>
            <td rowspan="3" bgcolor="DeepSkyBlue">中国近代社会转型<br>@E阶梯教室101</td>
            <td rowspan="2" bgcolor="RoyalBlue">智能系统<br>@E407</td>
            <td rowspan="3" bgcolor="DeepSkyBlue">中国近代社会转型<br>@E阶梯教室101</td>
        </tr>
        <tr height="37px" align="center">
            <td>9</td>
            <td rowspan="1">16:55-17:40</td>
        </tr>
        <tr height="37px" align="center">
            <td>0</td>
            <td rowspan="1">17:50-18:35</td>
        </tr>
        <tr height="37px" align="center">
            <td>A</td>
            <td rowspan="1">19:20-20:05</td>
            <td rowspan="2" bgcolor="MediumOrchid">软件案例分析@G座304</td>
            <td rowspan="3"></td>
            <td rowspan="3"></td>
            <td rowspan="3" bgcolor="DeepSkyBlue">中国近代社会转型<br>@E阶梯教室101</td>
        </tr>
        <tr height="37px" align="center">
            <td>B</td>
            <td rowspan="1">20:15-21:00</td>
        </tr>
        <tr height="37px" align="center">
            <td>C</td>
            <td rowspan="1">21:10-21:55</td>
        </tr>
        </colgroup>
    </table>
</body>
</html>

代码效果:

我的课表

节次 上课时间 周日 周一 周二 周三 周四 周五 周六
1 8:00-8:45 我爱学习
学习爱我
  WEB应用技术
@D座301
  数据库原理
@E407
   
2 8:55-9:40
3 10:00-10:45   计算机网络
@E阶梯教室202
计算理论导引
@E208
系统分析与设计
@D座406
中国近代社会转型
@E阶梯教室101
4 10:55-11:40
5 11:50-12:35      
6 14:00-14:45 计算机网络
@E阶梯教室202
数据库原理
@E407
算法设计与分析
@E208
7 14:55-15:40
8 16:00-16:45   企业建模与系统集成
@D座503
中国近代社会转型
@E阶梯教室101
智能系统
@E407
中国近代社会转型
@E阶梯教室101
9 16:55-17:40
0 17:50-18:35
A 19:20-20:05 软件案例分析@G座304     中国近代社会转型
@E阶梯教室101
B 20:15-21:00
C 21:10-21:55
时间: 2024-11-07 10:34:10

纯HTML课表的相关文章

beego应用做纯API后端如何使用jwt实现无状态权限验证

jwt是什么,可以百度下其它文章,我原来看到一个讲的详细的,现在找不到了.先简单介绍下我个人的理解,就是一个token,只不过通过加密解密的手段,能让这一串字符带有一些简单的信息.这样解密jwt后不用查数据库,最常用的例子,保存用户权限,再多层的权限,其实只用一个数字,转换成二进制,每一位代表一种权限.类似这样的使用,还有保存session的key,通过该值查session就能获取更丰富的资料,用来保存用户状态也是可以的. 下面介绍下我的一个golang项目中使用beego框架做纯API接口使用

三种纯CSS方法实现等高列

在这篇文章里, 我会介绍三种使用纯css的方式来实现等高列的方法.在网页布局中设置列等高是比较常见的, 所以写这篇文章就是要总结下一些优雅的纯CSS解决方案. 插图自己弄得,不喜莫喷 哈哈.. 下面介绍的三种方法都只用到了CSS , 不涉及jQuery.JavaScript计算实现的方法,所以我把它这篇文章标题设为:三种纯CSS方法实现等高列. 方法-1: 使用Margins, Paddings和 Overflow来实现 第一种方法使用margins, paddings和overflow来迫使列

C++:纯虚函数与抽象类

5.4.3 纯虚函数和抽象类 纯虚函数是一个在基类中说明的虚函数,它在该基类中没有定义,但是要求在派生类中根据需要对它进行定义,或仍然说明为纯虚函数. 声明纯虚函数的一般格式是: virtual 函数类型 函数名(参数表)=0: 纯虚函数的作用是:在基类中为其派生类保留一个函数的名字,以便派生类根据需要对它进行重新定义.纯虚函数没有函数体,它最后面“=0 ”并不表示函数的返回值是0,它只是形式上的作用,告诉编译系统这是纯虚函数.纯虚函数不具有函数的功能,不能被调用. //应用举例 #includ

小蚂蚁学习页面静态化(2)——更新生成纯静态化页面的三种方式

更新生成纯静态化页面的三种方式:1.按照时间间隔更新.2.手动更新.3.定时更新(需要系统配合). 1. 按照时间间隔更新. 当用户第一次访问这个页面的时候,程序自动判断,该静态文件是否存在,并且该文件是否还在有效时间内,如果该文件未超出了有效时间,用户访问的是已经生成的静态文件.如果超出了有效时间,用户得到的是动态输出的内容,同时重新生成静态文件.稍微修改一下昨天的代码为例: <?php //首先判断是否有静态文件,并且文件的最新修改时间到现在是否大于20秒 if(is_file('./tex

iOS开发——仿Clear纯手势操作的UITableView

前言 在Clear应用中,用户无需任何按钮,纯靠不同的手势就可以完成对ToDoItem的删除.完成.添加.移动.具体来说,功能上有左划删除,右划完成,点击编辑,下拉添加.捏合添加.长按移动.这里将这些功能实现并记录. 左划删除与右划完成 所谓的左右滑动,就是自定义一个cell然后在上面添加滑动手势.在处理方法中计算偏移量,如果滑动距离超过cell宽度一半,就删除它,或者是为文本添加删除线等来完成它:如果没有超过一半,那么就用动画把cell归位. 效果图如下: 关键代码如下: - (void)ha

用html语言写一个功课表

今天在网上看了一个关于html的教程,主要是讲表格,看完之后觉得有必要上机试试,于是就写了下面的一段代码. <!DOCTYPE html><!--貌似5.0的可以这样写,课本的声明老长老长了--> <html> <head> <title>功课表</title> <meta http-equiv="Content-Type" content="text/html; charset=GB2312&qu

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

纯代码 自动屏幕适配iPhone

代码判断,你也可以用xib自带的自动布局选项 我是用的纯代码写的 纯代码 自动屏幕适配iPhone,布布扣,bubuko.com

VBA-从周课表统计节次

Sub datainsert() Dim r1 As Integer, r2 As Integer, i As Integer, j As Integer, findrow As Integer, findMonth As Integer, tday As Integer findMonth = Range("h1") Set Source = Worksheets("总周课表") Set t = ActiveSheet r1 = Source.Range(&quo