• 纯HTML课表


    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
  • 相关阅读:
    欧拉计划之题目7:找出第10001个质数
    DShow实现一个avi视频的播放(含有个人解释和注释)
    DirectX 9 SDK安装后在vs2010里编译BaseClasses出错问题解决方法
    C#内存占用大量资源的解决办法
    C#读写ini文件操作
    【Java】编程技术经典书籍列表
    【数据库_Mysql】查询当前年份的sql
    【数据库_Mysql】MySQL动态语句 if set choose where foreach trim
    【JavaScript】20款漂亮的css字体
    【数据库_Mysql】<foreach>标签在Mysql中的使用
  • 原文地址:https://www.cnblogs.com/wuguanglin/p/tabletest.html
Copyright © 2020-2023  润新知