如何用html5制作个人简历代码用html做炫酷个人简历代码

转载

mob6454cc747bda 2023-11-12 12:06:19

文章标签 如何用html5制作个人简历代码 HTML html ci 文章分类 HTML5 移动开发

使用HTML表格制作简易的个人简历表

一、创建过程

创建表格标题
创建表格
创建行
创建单元格

二、原理
主要使用HTML表格的不规则表格属性以及HTML表格的基本属性

三、使用的主要代码

创建表格标题
创建表格
创建行
创建单元格

四、主要代码的基本元素代码
table属性:border：边框
cellpadding：单元格的内边距（单元格边框与内容之间的距离）
cellspacing：单元格的外边距(单元格之间的距离)
width:宽度
height：高度
align：对齐方式（整个表格）
bgcolor 背景颜色（纯色填充）
bordercolor 边框颜色
background：背景图片
tr属性（行）
tr是没有宽高属性的
align:水平对齐方式(内容)
valign:垂直对齐方式
td属性（单元格）
width :每个单元格的宽度
height：每个单元格的高度
align:水平（单个单元格的内容）
valign:垂直
跨行 rowspan属性纵向向下包含自己
跨列 colspan属性横向向右包含自己

五、主要代码及注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="700px" height="1000px" align="center">/*创建表格 设置边框为1 设置单元格内边距和外边距都为0 设置宽度为700像素 高度为1000像素并且将表格整体居中*/
			<caption><b>个人简历</b></caption>/*创建表格标题*/
			<tr>
				<td colspan="8" rowspan="2" align="center"><b>个人求职简历</b></td>/*跨行合并8格，跨列合并两格并将表格内容居中*/
			</tr>
			<tr>
			</tr>
			<tr>
				<td align="center" width="13%" height="3%">姓名</td>/*将单元格内容居中并设置宽度为13%高度3%*/
				<td colspan="2" width="24%"></td>
				<td align="center" width="13%">性别</td>
                <td colspan="2" width="24%"></td>
                <td colspan="2" rowspan="6" width="26%"></td>
			</tr>
			<tr>
				<td align="center" height="3%">年龄</td>
				<td colspan="2"></td>
				<td align="center">出生日期</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td align="center" height="3%">所在城市</td>
				<td colspan="2"></td>
				<td align="center">从事行业</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td align="center" height="3%">学历</td>
				<td colspan="2"></td>
				<td align="center">名族</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td align="center" height="3%">婚姻状况</td>
				<td colspan="2"></td>
				<td align="center">身份证</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td align="center" height="3%">毕业学校</td>
				<td colspan="2"></td>
				<td align="center">计算机能力</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="3" align="center">家庭成员</td>
				<td colspan="2" align="center" height="3%">姓名</td>
				<td align="center">成员关系</td>
				<td colspan="2" align="center">职务</td>
				<td colspan="2" align="center">工作单位</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="5" align="center">工作经历</td>
				<td colspan="2" align="center" height="3%">工作时间</td>
				<td align="center">公司名称</td>
				<td colspan="2" align="center">职位名称</td>
				<td colspan="2" align="center">所属部门</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td rowspan="2" colspan="2"></td>
				<td rowspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="2" align="center">教育情况</td>
				<td colspan="2" align="center" height="3%">时间</td>
				<td align="center">学校</td>
				<td colspan="4" align="center">学历</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			</tr>
			<tr>
			    <td rowspan="2" align="center">培训经历</td>
				<td colspan="2" align="center" height="3%">时间</td>
				<td align="center">培训机构</td>
				<td colspan="4" align="center">培训内容</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td align="center">备注</td>
				<td colspan="7"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="4" align="center">自我评价</td>
				<td rowspan="4" colspan="7"></td>
			</tr>
			<tr>
			</tr>
			<tr>
			</tr>
			<tr>
			</tr>
		</table>
	</body>
</html>

六、效果图

个人简历

个人求职简历

姓名		性别
年龄		出生日期
所在城市		从事行业
学历		名族
婚姻状况		身份证
毕业学校		计算机能力

家庭成员	姓名	成员关系	职务	工作单位



工作经历	工作时间	公司名称	职位名称	所属部门





教育情况	时间	学校	学历


培训经历	时间	培训机构	培训内容

备注

自我评价