zoukankan      html  css  js  c++  java
  • 纯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
  • 相关阅读:
    Python3 sorted() 函数
    [Python网络编程]一个简单的TCP时间服务器
    [爬虫]统计豆瓣读书中每个标签下的前两百本书
    [leetcode]39. Combination Sum
    [leetcode]18. 4Sum
    [leetcode DP]72. Edit Distance
    [leetcode DP]120. Triangle
    [leetcode DP]91. Decode Ways
    [leetcode DP]70. Climbing Stairs
    [leetcode DP]64. Minimum Path Sum
  • 原文地址:https://www.cnblogs.com/wuguanglin/p/tabletest.html
Copyright © 2011-2022 走看看