利用HTML5完成课程表以及个人简历绘制（HTML5学习日志1）

最新推荐文章于 2025-05-22 19:41:20 发布

原创最新推荐文章于 2025-05-22 19:41:20 发布 · 718 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #新手 #表格 #个人简历表 #课程表

日志专栏收录该内容

12 篇文章

订阅专栏

本文是HTML5学习日志的第一部分，详细介绍了如何使用HTML5的table标签来绘制课程表和个人简历表，包括tr、th、td等元素的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

课程表

使用HTML5技术完成如下课程表。

在这里插入图片描述代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>homework1</title>
	<style>
		table{
			border-collapse: collapse;
		}
		td{
			text-align: center;
		}
	</style>
</head>
<body>
	<table border="1">
		<tbody>
			<tr>
				<td colspan="2"></td>
				
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期天</td>
			</tr>
			<tr>
				<td rowspan="2">上午</td>
				<td>9：00-10：30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				
				<td>11：00-11：30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="9">中午11：30-14：00</td>
				
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>14：00-16：30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				
				<td>17：00-17：30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="9">晚饭</td>
				
			</tr>
			<tr>
				<td>晚上</td>
				<td>19：30-21：00</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

使用技术

表格是使用table表格标签，使用多个多个 tr、th 以及 td 元素。

使用了属性border来添加表格边缘线。

中分别使用colspan、rowspan来实现横跨两个单元格和宗跨两个单元格（相当与excel中的合并单元格）

个人简历表

利用HTML5完成如下个人简历表

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>homework2</title>
	<style>
		table{
			border-collapse: collapse;
		}
		td{
			width: 100px;
		}
	</style>
</head>
<body>
	<table border="1">
		
		<tbody>
			<tr>
				<th colspan="4">个人简历</th>
			</tr>
			<tr>
				<td colspan="4">基本信息</td>
				
			</tr>
			<tr>
				<td>姓名</td>
				<td colspan="2"></td>
				
				<td rowspan="4"></td>
			</tr>
			<tr>
				<td>联系方式</td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td>毕业院校</td>
				<td colspan="2"></td>

			</tr>
			<tr>
				<td>专业</td>
				<td colspan="2"></td>
>

			</tr>
			<tr>
				<td>性别</td>
				<td></td>
				<td>生日</td>
				<td></td>
			</tr>
			<tr>
				<td>学历</td>
				<td></td>
				<td>外语水平</td>
				<td></td>
			</tr>
			<tr>
				<td>籍贯</td>
				<td colspan="3"></td>
				
			</tr>
			<tr>
				
				<td colspan="4">职业技能</td>
	
			</tr>
			<tr>
				<td colspan="4" height="80px"></td>
	
			</tr>
			<tr>
				<td>项目经验</td>
				<td colspan="3"></td>
				
			</tr>
			<tr>
				<td colspan="2">智慧校园选课系统</td>
				
				<td colspan="2">2019年1月~2019年6月</td>

			</tr>
			<tr>
				
				<td colspan="4">项目描述</td>
				
			</tr>
			<tr>
				<td colspan="4" height="80px"></td>
	
			</tr>
			<tr>
				<td>预览地址</td>
				<td colspan="3"></td>
	
			</tr>
			<tr>
				<td>GitHub</td>
				<td colspan="3"></td>
				
			</tr>
		</tbody>
	</table>
</body>
</html>

使用技术

简历表使用技术如上，使用table表格标签，使用多个多个 tr、th 以及 td 元素。
也是用

使用了属性border来添加表格边缘线。

中分别使用colspan、rowspan来实现横跨多个单元格和宗跨多个单元格。
在一些细节方面，简历表比课程表难写，由于代码量比上面多又在很多地方使用colspan以及rowspan来实现横跨多个单元格和宗跨多个单元格，概念记不清以及不细心容易打错。
另外，thead、tfoot 以及 tbody 元素是对表格中的行进行分组。记住在写时候里面要写上哦。