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 |