純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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM