自制课程表

最新推荐文章于 2025-05-01 23:24:04 发布

筝了

最新推荐文章于 2025-05-01 23:24:04 发布

阅读量79

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/2302_79619351/article/details/132779259

版权

效果图：

主要用到的是绘制表格table,加上一些css样式来调整大小、宽度和位置。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#c {
				width: 80%;
				height: 70px;
				text-align: center;
				margin: 0 auto;
				line-height: 70px;
				font-size: 30px;
			}

			table {
				width: 80%;
				text-align: center;
				line-height: 50px;
				margin: 0 auto;
				border-collapse: collapse;
			}

			td {
				height: 70px;
				width: 80px;
			}
			tr:nth-child(1) {
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="c">课程表</div>

		<table border="2" cecellspacing="0">
			<tr >
				<td></td>
				<td>星期一</td>
				<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>
				<td></td>
			</tr>
			<tr>
				<td>第三四节</td>
				<td bgcolor="#aaffff">形式与政策9</td>
				<td bgcolor="#ff5500">人工智能与应用</td>
				<td></td>
				<td bgcolor="#ff5500">信息安全</td>
				<td bgcolor="#aaffff">计算机网路基础</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>第五六节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td bgcolor="#ff5500">影视编辑与合成</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>第七八节</td>
				<td bgcolor="#ff5500">前端框架技术</td>
				<td bgcolor="#aaffff">企业网站综合实训</td>
				<td></td>
				<td bgcolor="#aaffff">企业网站综合实训</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>第九十节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>