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. （转载）一个生动的NIO描述

    原文地址:http://blog.csdn.net/zhouhl_cn/article/details/6568119 传统的socket IO中,需要为每个连接创建一个线程,当并发的连接数量非常巨大 ...

  2. HTML5学习笔记<四>: 列表, 块和布局

    HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...

  3. Dubbo java.io.IOException: Can not lock the registry cache file

    跑单测用例的时候,以前执行成功的用例,运行时控制台仍然会报 dubbo 相关的错误: Failed to save registry store file, cause: Can not lock t ...

  4. 解决此问题：Oracle 删除用户时报 “必须指定 CASCADE 以删除 'SE'”,

    这说明你要删除的oracle 用户"SE" 下面还有数据库对象,如 table, view 等,这样你删除用户时必须加选项 cascade:drop user se cascade ...

  5. Linux块设备驱动(二) _MTD驱动及其用户空间编程

    MTD(Memory Technology Device)即常说的Flash等使用存储芯片的存储设备,MTD子系统对应的是块设备驱动框架中的设备驱动层,可以说,MTD就是针对Flash设备设计的标准化 ...

  6. centos登录时一闪而过，显示module is unknown

    原因是修改了在/etc/pam.d/login中加入了: session required /lib/security/pam_limits.so session required pam_limit ...

  7. Spring定时任务解决博客缓存数据更新问题

    最近在做博客系统的时候,由于很多页面都有右边侧边栏,内容包括博客分类信息,归档日志,热门文章,标签列表等,为了不想每次访问页面都去查询数据库,因为本身这些东西相对来说是比较固定的,但是也有可能在网站后 ...

  8. java.lang.NoClassDefFoundError异常

    1.错误信息 2.错误分析: JVM读到程序的第三行,会在当前路径 "D:\java" 下寻找com.yangquan.aolun这个包路径下的Cat类,但当前路径下根本就没有co ...

  9. PRINCE2的发展情况是什么样

    英国皇家特许培训机构AXELOS近期公布了一份调查结果,调查共有172位项目经理参与,其结果展示了未来全球趋势,对项目经理未来的职业形态和对他们必备技能的影响.  未来的项目管理职业  调查结果同时给 ...

  10. 老李推荐：第8章6节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动Monkey 4

    在获得比对设备序列号后,findAttachedDevice就会跟提供的序列号进行比对,如果吻合就返回给调用者” 代码8-6-3 AdbBackend - waitForConnection”了.而A ...