html实例-课表

本文章主要介绍由html中的表格table来制作课表，完成图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的课表</title>
		<style type="text/css">
			td{
				border-radius: 4%;
			}
		</style>
	</head>
	<body>
		<font  color="#ffffff"> 
		<table border="0" width="400" align="center" height="630" bgcolor="#fec7ff">
			<tr align="middle">
			<td width="30" ></td>
			<td width="50" align="center" height="30">周一</td>
			<td width="50"align="center"  height="30">周二</td>
			<td width="50" align="center" height="30">周三</td>
			<td width="50" align="center" height="30">周四</td>
			<td width="50" align="center" height="30">周五</td>				
			</tr>
			<tr align="middle">
			<td >1</td>
			<td bgcolor="#73b3f0" rowspan="2">动态网页设计基础</td>
			<td height="60" rowspan="2"></td>
			<td height="60"bgcolor="#9f8bea" rowspan="2">Matlab</td>
			<td height="60" rowspan="2"></td>
			<td height="60" rowspan="2"></td>	
			</tr>
			<tr align="middle">
			<td >2</td> 			
			</tr>
			<tr align="middle">
			<td >3</td>
			<td bgcolor="#9f8bea" rowspan="2" align="middle">大学英语</td>
			<td bgcolor="#7acfa4" rowspan="2">创业基础</td>
			<td bgcolor="#e086aa" rowspan="2">网络互联</td>
			<td height="60" rowspan="2"></td>
			<td bgcolor="#ffcd62" rowspan="2">马克思主义基本原理概论</td>	
			</tr>
			<tr align="middle">
			<td >4</td>			
			</tr>
			<tr align="middle">
			<td >5</td>
			<td height="60"bgcolor="#e086aa" rowspan="2">Matlab</td>
			<td bgcolor="#73b3f0" height="60" rowspan="2">python编程基础</td>
			<td height="60" rowspan="2"></td>
			<td bgcolor="#9f8bea" height="60" rowspan="4">操作系统原理</td>
			<td bgcolor="#73b3f0" height="60" rowspan="2">python编程基础</td>
			</tr>
			<tr align="middle">
			<td >6</td>				
			</tr>
			<tr align="middle">
			<td >7</td>
			<td bgcolor="#ffcd62" height="60" rowspan="2">武术</td>
			<td bgcolor="#9f8bea" height="60" rowspan="2">网络互联技术</td>
			<td height="60" rowspan="2"></td>
			<td height="60" rowspan="2"></td>	
			</tr>
			<tr align="middle">
			<td >8</td>				
			</tr>
			<tr align="middle">
			<td >9</td>
			<td bgcolor="#7acfa6" height="60" rowspan="2">公共艺术鉴赏</td>
			<td height="60" rowspan="2"></td>
			<td height="60" rowspan="2"></td>
			<td height="60"bgcolor="#ffcd62" rowspan="2">合唱</td>
			<td height="60" rowspan="2"></td>	
			</tr>
			<tr align="middle">
			<td>10</td>				
			</tr>
		</table>
		</font> 
	</body>
</html>

注释：

border-radius： %以百分比定义圆角的形状。
rowspan跨行合并单元格
font-color设置字体颜色

更多推荐

用html写一个简单课表