利用Html完成一张课程表的网页

小严要努力学习

已于 2022-07-17 23:36:54 修改

阅读量5.8k

点赞数 7

分类专栏：前端 html 文章标签： html vscode 前端

于 2022-07-17 23:17:22 首次发布

本文链接：https://blog.csdn.net/yyy__yyy_/article/details/125838598

版权

前端同时被 2 个专栏收录

5 篇文章 3 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

#前言

在完成html中有关表格的学习后，我们可以利用相关的知识，来做一个简单的课程表网页

#步骤

1.生成html模板，可以利用！+tab键进行自动生成。

详情可以看我第一篇写的博客，里面有具体的介绍，这里就不详细说明了。

2.具体代码

具体代码如下，图中各个元素,标签都进行了相关的注释说明：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>课程表</title>
</head>
<!-- r行d格，r行c列 -->
<body>
	<table border="1"><!-- 给整个表格（包括表格及每一个单元格）加上1像素的黑色边框 -->
		<!-- 制作标题 -->
		<caption>
			<b><!-- <b>这是一个加粗文本 -->
				初三一班课程表
			</b>
		</caption>
		<!-- 制作星期 -->
		<tr>
			<!-- <tr> 标签定义 HTML 表格中的行。 -->
			<!-- th 元素内部的文本通常会呈现为居中的粗体文本-->
			<th></th>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
		</tr>
		<!-- 制作第一行的课表 -->
		<tr>
			<td rowspan="2">上午</td> <!-- rowspan规定单元格可横跨的行数。 -->
			<td>语文</td> <!-- td 元素内的文本通常是左对齐的普通文本。 -->
			<td>数学</td>
			<td>英语</td>
			<td>音乐</td>
			<td>美术</td>
		</tr>
		<!-- 制作第二行的课表 -->
		<tr>
			<td>数学</td>
			<td>英语</td>
			<td>语文</td>
			<td>体育</td>
			<td>生物</td>
		</tr>
		<!-- 制作第三行的课表 -->
		<tr>
			<td rowspan="2">下午</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td rowspan="2" colspan="2">自习</td><!-- colspan 属性规定单元格可横跨的列数。 -->
		</tr>
		<!-- 制作第四行的课表 -->
		<tr>
			<td>物理</td>
			<td>化学</td>
			<td>历史</td>
		</tr>

	</table>
</body>

</html>

最后的结果：