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. C++—this指针的用法

    this指针抽象比喻 当我们在进入一个房子之后, 可以看见房子里的桌子,椅子. 地板等,但是看不到房子的全貌.对于一个类的实例来说, 你可以看到它的成员 函数. 成员 变量, 但是实例本身呢? thi ...

  2. DARK的锁链

    Description 无向图中有N个节点和两类边,一类边被称为主要边,而另一类被称为附加边.Dark有N – 1条主要边,并且Dark的任意两个节点之间都存在一条只由主要边构成的路径.另外,Dark ...

  3. cuda编程学习5——波纹ripple

    /共有DIM×DIM个像素,每个像素对应一个线程dim3 blocks(DIM/16,DIM/16);//2维dim3 threads(16,16);//2维kernel<<<blo ...

  4. CSS中清除浮动的方法

    CSS浮动,最早是为了达到文字环绕的效果提出的,也可以用来做布局,但是布局会产生很多问题(高度塌陷,漂浮在普通流上),会使当前标签产生上浮的效果,会影响前后标签,同样的代码在不同的浏览器的兼容性也不一 ...

  5. MySQL中的一些内置函数

    mysql> select now(); #获取当前的日期和时间 +---------------------+ | now() | +---------------------+ | -- : ...

  6. spring学习起步

    1.搭载环境 去spring官网下载这几个包,其中commons-logging-1.2.jar是一个日志包,是spring所依赖的包,可以到apache官网上下载 也可以访问http://downl ...

  7. 一键部署ETCD集群脚本

    这里使用三个节点,系统版本为CentOS7 # vim deploy-etcd.sh #!/bin/bash set -x set -e #更改这里的IP, 只支持部署3个节点etcd集群 decla ...

  8. ES6常用语法整合

    ES6也出来有一会时间了,他新增的语法糖也的确大大提高了开发者的效率,今天就总结一些自己用到最多的. 说到ES6肯定是先介绍Babel了,据阮一峰老师介绍到,Babel是一个广泛使用的转码器,可以将E ...

  9. Java基础—JDK环境变量配置

    1.安装JDK 下载网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 注意点 ...

  10. 告别S! S! H!秒杀终端工具——FastLogin快捷登录

    题记:自从接触到"跳板机"的概念后,一直就被烦不胜烦的机器名,ip地址,用户名,密码折腾的死去活来,心说能有个小精灵随时帮我输入那些重复的登录信息就好了.我见过最挫的方式就是用记事 ...