码迷,mamicode.com
首页 > Web开发 > 详细

纯HTML课表

时间:2017-04-18 18:54:47      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:系统分析   rowspan   制作   spring   charset   ring   中国   智能   har   

table标签构造课表

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

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的课表</title>
</head>
<body background="background.png">
    <table width="100%" align="center" >
        <caption><h2>我的课表</h2></caption>
        <tr height="37px"><!-- 标题栏-->
            <th width="60px" bgcolor="DarkOrchid">节次</th>
            <th width="100px" bgcolor="DarkOrchid">上课时间</th>
            <th width="150px" bgcolor="DarkOrchid">周日</th>
            <th width="150px" bgcolor="DarkOrchid">周一</th>
            <th width="150px" bgcolor="DarkOrchid">周二</th>
            <th width="150px" bgcolor="DarkOrchid">周三</th>
            <th width="150px" bgcolor="DarkOrchid">周四</th>
            <th width="150px" bgcolor="DarkOrchid">周五</th>
            <th width="150px" bgcolor="DarkOrchid">周六</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 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>
        </colgroup>
    </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课表

标签:系统分析   rowspan   制作   spring   charset   ring   中国   智能   har   

原文地址:http://www.cnblogs.com/wuguanglin/p/6728807.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!