使用HTML制作课表

最新推荐文章于 2024-05-20 15:43:39 发布

166的饲养员

最新推荐文章于 2024-05-20 15:43:39 发布

阅读量401

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/zy166/article/details/134033816

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计应2307课程表</title>
		<style>
			table{
				width:800px;
				margin: 0 auto;
				border-color: #000;
				}
				td{text-align: center;
				color: black;
				}
				tr:nth-child(3){
					font-weight: bold;
				}
		</style>
	</head>
	<body>
		<table border="1" style="border-collapse: collapse;">
			<tr>
				<td colspan="7">河南工业职业技术学院 计应2307 班级课表</td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2">学年学期：2023-2024-1</td>
				<td></td>
				<td>班级人数：48</td>
				<td colspan="2">打印日期：2023-10-21</td>
			</tr>
			<tr>
				<td></td>
				<td>星期一</td>
				<td>星期二</td> 
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
			</tr>
			<tr>
				<td>第一二节</td>
				<td> </td>
				<td>c语言</td>
				<td>高数</td>
				<td>高数</td>
				<td>web</td>
				<td> </td>
			</tr>
			<tr>
				<td>第三四节</td>
				<td>体育</td>
				<td>ps</td>
				<td>计算机基础</td>
				<td>计算机基础</td>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td>第五六节</td>
				<td>心理</td>
				<td>职业发展</td>
				<td> </td>
				<td>职业发展</td>
				<td>政治</td>
				<td rowspan="2">web</td>
			</tr>
			<tr>
				<td>第七八节</td>
				<td>英语</td>
				<td>英语</td>
				<td>形势政策</td>
				<td> </td>
				<td>劳动</td>
			</tr>
			<tr>
				<td>第九十节</td>
				<td>军工</td>
				<td>国家安全</td>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
		</table>
	</body>
</html>

制作过程：

第一步,使用tabel指令构建八行七列表格；

第二步，填写表格内容；

第三步，使用colspan指令合并同行单元格，使用rowspan指令合并同列单元格；

第四步，使用css修饰表格内容