HTML+CSS实现课程表

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

马踏飞燕&lin_li

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

阅读量1.7k

点赞数 5

分类专栏： Web前端

本文链接：https://blog.csdn.net/matafeiyanll/article/details/106990093

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML+CSS实现课程表

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				border: 4px solid orange;
				margin: 0 auto;
				border-spacing: 0;
				width: 60%;
			}
			td{
				border: 1px solid #666;
			}
		</style>
	</head>
	<body>
		<table>
			<!-- 标题 -->
			<tr>
				<td colspan="7" align="center" height="40px">课程表</td>
			</tr>
			<!-- 日期 -->
			<tr>
				<td></td>
				<td></td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<!-- 课程安排 -->
			<!-- 第一节课 -->
			<tr>
				<td rowspan="4">上午</td>
				<td width="60px">1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="60px">2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="60px">3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="60px">4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="7" height="30px">午休</td>
			</tr>
			<tr>
				<td rowspan="4">下午</td>
				<td width="60px">5</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="60px">6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="60px">7</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="60px">8</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>