用HTML5写一个课程表。
案例:
这个思路挺简单的,写一个表格,注意单元格的合并和表框的处理就没有问题。
需要用到的基础标签如:
<table></table> <p></p>
等
不再赘述。
用到的关键标签:
<table cellspacing="0" border="1"></table>
以及单元格跨行合并标签
<td rowspan="n"></td>
还有表示单元格背景颜色的标签:
<td bgcolor="#00FF00"></td>
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0">
<!-- 表头 -->
<tr>
<th>时间</th>
<th>节次</th>
<th>课 程 名 称</th>
<th>学分</th>
</tr>
<!-- 1 -->
<tr>
<td rowspan="6">星期一</td>
<td>1.2</td>
<td></td>
<td></td>
</tr>
<!-- 2 -->
<tr>
<td>3.4</td>
<td>高等数学A-1</td>
<td>6</td>
</tr>
<!-- 3 -->
<tr>
<td>5.6</td>
<td>体育</td>
<td>1</td>
</tr>
<!-- 4 -->
<tr>
<td>7.8</td>
<td></td>
<td></td>
</tr>
<!-- 5 -->
<tr>
<td>9.10</td>
<td></td>
<td></td>
</tr>
<!-- 6 -->
<tr>
<td>11.12</td>
<td></td>
<td></td>
</tr>
<!-- 7 -->
<tr>
<td rowspan="6">星期二</td>
<td>1.2</td>
<td>大学英语读写I</td>
<td>4</td>
</tr>
<!-- 8 -->
<tr>
<td>3.4</td>
<td>思政</td>
<td>3</td>
</tr>
<!-- 9 -->
<tr>
<td>5.6</td>
<td bgcolor="#00FF00">走进智能科学</td>
<td>3</td>
</tr>
<!-- 10 -->
<tr>
<td>7.8</td>
<td bgcolor="#00FF00">*线性代数</td>
<td>3</td>
</tr>
<!-- 11 -->
<tr>
<td>9.10</td>
<td></td>
<td></td>
</tr>
<!-- 12 -->
<tr>
<td>11.12</td>
<td></td>
<td></td>
</tr>
<!-- 13 -->
<tr>
<td rowspan="6">星期三</td>
<td>1.2</td>
<td></td>
<td></td>
</tr>
<!-- 14 -->
<tr>
<td>3.4</td>
<td bgcolor="#00FF00">程序设计基础</td>
<td>3</td>
</tr>
<!-- 15 -->
<tr>
<td>5.6</td>
<td></td>
<td></td>
</tr>
<!-- 16 -->
<tr>
<td>7.8</td>
<td>*军事理论<br/>**形势与政策</td>
<td>1</td>
</tr>
<!-- 17 -->
<tr>
<td>9.10</td>
<td></td>
<td></td>
</tr>
<!-- 18 -->
<tr>
<td>11.12</td>
<td></td>
<td></td>
</tr>
<!-- 19 -->
<tr>
<td rowspan="6">星期四</td>
<td>1.2</td>
<td bgcolor="#00FF00">程序设计基础</td>
<td>3</td>
</tr>
<!-- 20 -->
<tr>
<td>3.4</td>
<td>高等数学A-1</td>
<td>6</td>
</tr>
<!-- 21 -->
<tr>
<td>5.6</td>
<td bgcolor="#00FF00">线性代数</td>
<td>3</td>
</tr>
<!-- 22 -->
<tr>
<td>7.8</td>
<td></td>
<td></td>
</tr>
<!-- 23 -->
<tr>
<td>9.10</td>
<td></td>
<td></td>
</tr>
<!-- 24 -->
<tr>
<td>11.12</td>
<td></td>
<td></td>
</tr>
<!-- 25 -->
<tr>
<td rowspan="6">星期五</td>
<td>1.2</td>
<td>大学英语读写I</td>
<td>4</td>
</tr>
<!-- 26 -->
<tr>
<td>3.4</td>
<td bgcolor="#00FF00">*思政<br />**走进智能科学</td>
<td>3</td>
</tr>
<!-- 27 -->
<tr>
<td>5.6</td>
<td>高等数学A-1</td>
<td>6</td>
</tr>
<!-- 28 -->
<tr>
<td>7.8</td>
<td></td>
<td></td>
</tr>
<!-- 29 -->
<tr>
<td>9.10</td>
<td></td>
<td></td>
</tr>
<!-- 30 -->
<tr>
<td>11.12</td>
<td></td>
<td></td>
</tr>
</table>
<p>*表示单周上课</p>
<p>**表示双周上课</p>
</body>
</html>
运行结果: