用html写一个简单课表

最新推荐文章于 2024-04-30 22:05:29 发布

薛定谔的猫87

最新推荐文章于 2024-04-30 22:05:29 发布

阅读量8.8k

点赞数 14

文章标签： html

本文链接：https://blog.csdn.net/tory886/article/details/105175061

版权

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	设置字体颜色

薛定谔的猫87

关注

14
点赞
踩
73

收藏

觉得还不错? 一键收藏
0
评论
用html写一个简单课表

html实例-课表本文章主要介绍由html中的表格table来制作课表，完成图如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>我的课表</title> <style type="text/css"> ...
复制链接

扫一扫