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. java之JDK的环境变量配置

    JDK是什么? JDK是整个java开发的核心,它包含了JAVA的运行环境,JAVA工具和JAVA基础的类库. JDK包含的基本组件包括 java –--------> 运行编译后的java程序 ...

  2. Selenium自动化脚本开发总结

    Selenium Selenium 是ThoughtWorks专门为Web应用程序编写的一个验收测试工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mo ...

  3. 10分钟精通SharePoint - SharePoint安装

    简介 接触SharePoint就避免不了要接触SharePoint安装,无论你是对SharePoint进行开发还是管理(终端用户除外).SharePoint的安装涉及到两部分:预装.安装和配置,这主要 ...

  4. android 关于表格布局的认识

    表格布局(TableLayout) 使用的知识点有: 控件 TableRow:为这个表格添加一行 table的特殊属性 android:layout_column:确定此表格的列数 android:s ...

  5. mysql索引使用技巧及注意事项

    一.索引的作用 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,所以查询语句的优化显然是重中之重. 在数据 ...

  6. FastDFS分布文件系统相关资料索引

    FastDFS是为互联网应用量身定做的一套分布式文件存储系统,非常适合用来存储用户图片.视频.文档等文件.对于互联网应用,和其他分布式文件系统相比,优势非常明显.具体情况大家可以看相关的介绍文档,包括 ...

  7. 用async 解放你的大脑

    在js中,代码嵌套和代码回调非常常见,不仅编写麻烦而且异常反人类.让我等码农很是头痛 function () {     function () {         function () {     ...

  8. iwebshop上传类的使用

    $upload = new IUpload('10240000',array('jpg','gif','png')); $dir = "upload/dian"; $upload- ...

  9. 译：Missing index DMV的 bug可能会使你失去理智---慎重看待缺失索引DMV中的信息

    注: 本文译自https://www.sqlskills.com/blogs/paul/missing-index-dmvs-bug-that-could-cost-your-sanity/ 原文作者 ...

  10. Google永远不可能回到国内，只能是回忆

    今天早上在微博上无意看 [谷歌翻译App在大陆地区恢复无障碍使用]这篇文章,不知不觉就点进去看一下,内心还是比较兴奋,为什么兴奋说不清楚.或许我们是真的喜欢Google的产品. 回想2010年Goog ...