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. less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)

    前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...

  2. windows和linux删除文件方法

    Windows下bat文件内容如下:复制代码 代码如下: @echo offforfiles -p "D:\servers\apache2.2\logs" -s -m *.log ...

  3. 使用moment.js轻松管理日期和时间

    大家在前端Javascript开发中会遇到处理日期时间的问题,经常会拿来一大堆处理函数才能完成一个简单的日期时间显示效果.今天我给大家介绍一个轻量级的Javascript日期处理类库:moment.j ...

  4. Windows 10 Creaters Update 新功能——画中画模式和窗口高斯模糊

    在Windows 10 Creaters Update中,可以给窗口设置高斯模糊了,只要几行代码! <Grid Loaded="Grid_Loaded"> <Gr ...

  5. 【Java 并发】详解 ThreadLocal

    前言 ThreadLocal 主要用来提供线程局部变量,也就是变量只对当前线程可见,本文主要记录一下对于 ThreadLocal 的理解.更多关于 Java 多线程的文章可以转到 这里. 线程局部变量 ...

  6. 【Java基础 】Java7 NIO Files,Path 操作文件

    从Java1.0到1.3,我们在开发需要I/O支持的应用时,要面临以下问题: 没有数据缓冲区或通道的概念,开发人员要编程处理很多底层细节 I/O操作会被阻塞,扩展能力有限 所支持的字符集编码有限,需要 ...

  7. 搭建 redis 3.2.8服务器

    实验环境 redis 3.2.8 + RHEL 7.3 系统 软件下载地址 http://download.redis.io/releases/redis-3.2.8.tar.gz #注意,我的软件包 ...

  8. js实现哈希表（HashTable）

    在算法中,尤其是有关数组的算法中,哈希表的使用可以很好的解决问题,所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子. 第一部分:相关知识点 属性的枚举: var person = { ...

  9. 在Windows下安装redis扩展和memcached扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  10. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...