用HTML5编写课程表

最新推荐文章于 2024-02-19 13:12:42 发布

lxl。。

最新推荐文章于 2024-02-19 13:12:42 发布

阅读量3.3k

点赞数 5

分类专栏： HTML5

本文链接：https://blog.csdn.net/lxl513513/article/details/105029757

版权

HTML5 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

代码部分：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>课表</title>
<style>	
	td{
		width: 13%;
		text-align: center;
	}
	td:first-child{
		height: 56px;
		color: #7BB510;
		font-weight: bold;
		width: 9%;
	}
	td[id^=one]{
		height:40px;
	}
	#cz{
		background-color: #E9D757;
	}
	#sj{
		background-color: #C086F7;
	}
	#rj{
		background-color: #E1D658;
	}
	#ui{
		background-color: #F096D4;
	}
	#dz{
		background-color: #5AE252;
	}
	#xs{
		background-color: #799EED;
	}
	#ps{
		background-color: #FB8E91;
	}
	#web{
		background-color: #66E452;
	}
</style>
</head>
<body>
<table border="1px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="#F1F5F6" bordercolor="#D8DCDD" width="560px">
	<tr>
		<td colspan="8" bgcolor="#0164A7"><img src="logo.png"> </td>
	</tr>
 	<tr bgcolor="#DBE0E3" align="center" height="20px">
 		<td id="one"> </td>
 		<td id="one">周一</td>
 		<td id="one">周二</td>
 		<td id="one">周三</td>
 		<td id="one">周四</td>
 		<td id="one">周五</td>
 		<td id="one">周六</td>
 		<td id="one">周日</td>
 	</tr>
 	<tr>
 		<td> 1</td>
 		<td> </td>
 		<td rowspan="4" id="sj"> 视觉设<br>计基础</td>
 		<td rowspan="2" id="rj"> 软件工<br>程导论</td>
 		<td rowspan="2" id="dz">电子与<br>电路设<br>计</td>
 		<td> </td>
 		<td> </td>
 		<td> </td>
 	</tr>
 	<tr>
 		<td >2 </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 	</tr>
 	<tr> 
 		<td > 3</td>
 		<td rowspan="2" id="cz">操作系<br>统</td>
 		<td rowspan="2" id="ui">UI界面<br>设计 </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 	</tr>
 	<tr>
 		<td > 4</td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>.
 	</tr>
 	<tr> 
 		<td > 5</td>
 		<td rowspan="2" id="dz">电路与<br>电子技<br>术 </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td rowspan="2" id="rj">软件工<br>程导论 </td>
 		<td > </td>
 		<td > </td>
 	</tr>
 	<tr>
 		<td > 6</td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
    </tr>
 	<tr> 
 		<td > 7</td>
 		<td rowspan="2" id="xs">形式与<br>政策 </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td rowspan="2" id="cz">操作系<br>统</td>
 		<td > </td>
 		<td > </td>
 	</tr>
 	<tr> 
 		<td > 8</td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 	</tr>
 	<tr> 
 		<td > 9</td>
 		<td rowspan="2" id="ui">UI界面<br>设计</td>
 		<td rowspan="3" id="ps">Photosh<br>op图像处<br>理</td>
 		<td rowspan="3" id="ps">Photosh<br>op图像处<br>理</td>
 		<td rowspan="3" id="web">web前<br>端高级<br>技术</td>
 		<td > </td>
 		<td rowspan="3" id="web">web前<br>端高级<br>技术</td>
 		<td > </td>
 	</tr>
 	<tr> 
 		<td > 10</td>
 		<td > </td>
 		<td > </td>
 	</tr>
 	<tr> 
 		<td > 11</td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 	</tr>
 	<tr> 
 		<td > 12</td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 		<td > </td>
 	</tr>
</table>
</body>
</html>

效果图：

在这里插入图片描述

lxl。。

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
用HTML5编写课程表

代码部分：<!DOCTYPE html><html><head><meta charset=utf-8" /><title>课表</title><style> td{ width: 13%; text-align: center; } td:first-child{ height: ...
复制链接

扫一扫