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 |