WEB前端技术--表格元素练习

发疯的熏熏

已于 2023-12-27 10:41:21 修改

阅读量330

点赞数 7

分类专栏： WEB前端技术文章标签：前端

于 2023-12-27 10:25:07 首次发布

本文链接：https://blog.csdn.net/m0_58837398/article/details/135238869

版权

WEB前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和CSS创建一个动态简历表格，包括表格结构、CSS样式设置（如鼠标悬停效果），以及实验中遇到的问题和解决方案，强调了合理布局的重要性。

摘要由CSDN通过智能技术生成

一、实验目的

表格元素练习

二、实验内容

1.实验区域

2.功能描述

制作了一个个人简历表格，当鼠标光标移动在行上面的时候，呈现出绿色；

3.html描述

  <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人简历表格</title>
		<link type="text/css" rel="stylesheet" href="css/forms.css" />
	</head>
	<body>
		<table>
			<caption>个人简历模板</caption>
			<tr align="center">
				<td>姓名</td>
				<td></td>
				<td>应聘岗位</td>
				<td></td>
				<td colspan="2">个人类型</td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td>性别</td>
				<td></td>
				<td>出生年月</td>
				<td></td>
				<td>籍贯</td>
				<td></td>
				<td>民族</td>
				<td></td>
			</tr>
			<tr align="center">
				<td>政治面貌</td>
				<td></td>
				<td>健康状况</td>
				<td></td>
				<td colspan="2">婚姻状况</td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td align="center">学历</td>
				<td></td>
				<td>本科是否985院校</td>
				<td></td>
				<td colspan="2">是否海外留学</td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td>毕业院校</td>
				<td colspan="3"></td>
				<td colspan="2">专业</td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td>家庭住址</td>
				<td colspan="2"></td>
				<td>身份证号码</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center">
				<td>联系电话</td>
				<td colspan="2"></td>
				<td>E-mail</td>
				<td colspan="4"></td>
			</tr>
				<td>社会在职人员户籍所在地</td>
				<td colspan="2"></td>
				<td>应届毕业生生源地</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center">
				<td rowspan="4">教育背景</td>
				<td>起止时间</td>
				<td colspan="2">毕业院校及专业</td>
				<td colspan="2">所获学位</td>
				<td colspan="2">主修课程</td>
			</tr>
			<tr align="center">
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td rowspan="4">工作经历</td>
				<td>起止时间</td>
				<td colspan="2">工作单位及职务</td>
				<td colspan="4">岗位职责及业绩表现</td>
			</tr>
			<tr align="center">
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr align="center">
				<td>论文情况</td>
				<td colspan="7"></td>
			</tr>
			<tr align="center">
				<td>奖惩情况</td>
				<td colspan="7"></td>
			</tr>
		</table>
	</body>
</html>

4.css描述

    table{
	border: 1px solid black;
	border-spacing: 0;
}
td{
	border: 1px solid black;
	width: 100px;
	height: 20px;
}
tr:nth-child(even) {
	background-color: bisque;
}
tr:hover{
	background-color: aquamarine;
}
caption{
	font-size: 40px;
}