table标签构造课表

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

代码如下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>我的课表</title>

  </head>

  <body background="background.png">

    <table width="100%" align="center" style="border: 1px solid #aaa">

      <caption>

        <h2>我的课表</h2>

      </caption>

      <tr height="37px">

        <!-- 标题栏-->

        <th width="60px" bgcolor="DarkOrchid" style="color: white">节次</th>

        <th width="100px" bgcolor="DarkOrchid" style="color: white">上课时间</th>

        <th width="150px" bgcolor="DarkOrchid" style="color: white">周日</th>

        <th width="150px" bgcolor="DarkOrchid" style="color: white">周一</th>

        <th width="150px" bgcolor="DarkOrchid" style="color: white">周二</th>

        <th width="150px" bgcolor="DarkOrchid" style="color: white">周三</th>

        <th width="150px" bgcolor="DarkOrchid" style="color: white">周四</th>

        <th width="150px" bgcolor="DarkOrchid" style="color: white">周五</th>

        <th width="150px" bgcolor="DarkOrchid" style="color: white">周六</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>

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

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

纯HTML课表的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 记录我这一年的技术之路(nodejs纯干货)

    2015年12月28日23:19:54 更新koa应用.学习型网站和开发者工具等 coding伊始 开始认认真真的学习技术还是2015.10.21日开始的,记得很清楚,那天,是我在龙湖正式学习的第一天 ...

  4. 代码的坏味道（16）——纯稚的数据类(Data Class)

    坏味道--纯稚的数据类(Data Class) 特征 纯稚的数据类(Data Class) 指的是只包含字段和访问它们的getter和setter函数的类.这些仅仅是供其他类使用的数据容器.这些类不包 ...

  5. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  6. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  7. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  8. 纯C#的ini格式配置文件读写

    虽然C#里都是添加app.config 并且访问也很方便 ,有时候还是不习惯用他.那么我们来做个仿C++下的那种ini配置文件读写吧,其他人写的都是调用非托管kernel32.dll.我也用过 但是感 ...

  9. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

随机推荐

  1. MySQL数据库设计总结

    规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎. 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过10 ...

  2. WPF: 在 MVVM 设计中实现对 ListViewItem 双击事件的响应

    ListView 控件最常用的事件是 SelectionChanged:如果采用 MVVM 模式来设计 WPF 应用,通常,我们可以使用行为(如 InvokeCommandAction)并结合命令来实 ...

  3. Screen的简单使用

    第1步:新建窗口 输入: screen [-S <作业名称>] 第2步:随便干些什么 在窗口中执行任意命令,干什么都行 第3步:挂起窗口 Ctrl + a d 第4步:还原窗口 scree ...

  4. EF批量插入（转）

    原作者地址http://blog.csdn.net/zlts000/article/details/46385773 之前做项目的时候,做出来的系统的性能不太好,在框架中使用了EntityFramew ...

  5. javascript . 05 json的组成、for...in 遍历对象、简单数据类型与复杂数据类型的传值与传址、内置对象

    对象字面量  JSON var obj = { aaa :999}; var json={"aaa":999,"bbb":888}; "kay&quo ...

  6. Modbus通信协议的压力测试

    最近物联网都比较的火,因此,特别为各位兄弟姐妹们,奉上一款Mobus协议的测试软件,可以用来做设备的压力测试,和通信测试. 起初软件开发缘由是我们最近在开发一款设备,需要将多个DS18B20并联起来, ...

  7. Grafana关键表结构分析

    Grafana默认使用SQLite存储数据表,默认数据库文件存储在/var/lib/grafana/grafana.db中,可以将文件拷贝到Widnows中,使用Navicat for SQLite进 ...

  8. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 机器学习：python中如何使用朴素贝叶斯算法

    这里再重复一下标题为什么是"使用"而不是"实现": 首先,专业人士提供的算法比我们自己写的算法无论是效率还是正确率上都要高. 其次,对于数学不好的人来说,为了实 ...

  10. Linux 搭建svn版本库

    一.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...