Javaweb课堂作业———个人信息介绍

未名程序

已于 2023-09-08 23:06:24 修改

阅读量150

点赞数

文章标签： html

于 2023-09-08 22:56:59 首次发布

本文链接：https://blog.csdn.net/m0_63205457/article/details/132768618

版权

今天Javaweb老师在课上给我们讲了如何用web写奖学金申请表,之后布置了一个作业，让写个人信息介绍.

在B站看了教学视频结合老师今天上的<table><td><tr><th>等知识写出了这个小页面.发布的本意是记录自己在大学学习的时光.

第一次写这,不足之处还望多多包涵.

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人信息简历</title>
		<style>
			/* 将整体表格里的文字居中显示 */
			* {
				margin: 0 auto;
				text-align: center;
			}
		
			/* 将表格的线条合并起来 */
			table {
				border: black 0.0625rem solid;
				border-collapse: collapse;
			}
 
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="5px">
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="100px"/>
			<col width="20px"/>
			<!-- 表头 -->
			<!-- <th>...</th>定义表头单元格。表格中的文字将以粗体显示 -->
			<tr>
				<th colspan="10" >个人简历</th>
			</tr>
			<tr>
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>				
				<td></td>
				<td>民族</td>
				<td></td>
				<!-- 照片占用2列4行 -->
				<td colspan="2" rowspan="3" align="center">照片</td>
			</tr>
			<tr>
				<td>专业</td>
				<td colspan="2"></td>
				<td>手机号</td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>学历</td>
				<td></td>
				<td>家庭住址</td>
				<td colspan="3"></td>
				<td>出生日期</td>
				<td></td>
			</tr>			
			<tr>
				<td rowspan="4" style="font-weight: 500;padding: 0 8px;">个人教育经历</td>
				<td colspan="3">时间</td>
				<td colspan="3">学校</td>				
				<td colspan="3">教育</td>
			</tr>
			<tr height="30px">
				<td colspan="3"></td>
				<td colspan="3"></td>
				<td colspan="3"></td>
			</tr>
			<tr height="30px">
				<td colspan="3"></td>
				<td colspan="3"></td>
				<td colspan="3"></td>
			</tr>
			<tr height="30px">
				<td colspan="3"></td>
				<td colspan="3"></td>
				<td colspan="3"></td>
			</tr>
			<tr>
				<td rowspan="4"style="font-weight: 500;padding: 0 8px;">个人工作经历</td>
				<td colspan="3">时间</td>
				<td colspan="3">单位</td>				
				<td colspan="3">职务</td>
			</tr>
			<tr height="30px">
				<td colspan="3"><td>
				<td colspan="3"></td>
				<td colspan="3"></td>
			</tr>
			<tr height="30px">
				<td colspan="3"></td>
				<td colspan="3"></td>
				<td colspan="3"></td>
			</tr>
			<tr height="30px">
				<td colspan="3"></td>
				<td colspan="3"></td>
				<td colspan="3"></td>
			</tr>
			<!-- 家庭情况 -->
			<tr>
				<th colspan="10">个人家庭情况</th>
			</tr>
			<tr height="30px">
				<td>姓名</td>
				<td>年龄</td>
				<td>关系</td>
				<td>职业</td>
				<td>政治面貌</td>
				<td colspan="2">出生年月</td>				
				<td colspan="3">工作单位</td>
			</tr>
			<tr height="30px">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td colspan="2"></td>				
				<td colspan="3"></td>
			</tr>
			<tr height="30px">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td colspan="2"></td>				
				<td colspan="3"></td>
			</tr>
			<tr height="30px">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td colspan="2"></td>				
				<td colspan="3"></td>
			</tr>
			<tr height="30px">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td colspan="2"></td>				
				<td colspan="3"></td>
			</tr>
		</table>
	</body>
</html>