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

最新推荐文章于 2024-07-02 17:28:29 发布
最新推荐文章于 2024-07-02 17:28:29 发布
阅读量5k 收藏 49
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45993305/article/details/103464778
版权

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

一、创建过程

  1. 创建表格标题
  2. 创建表格
  3. 创建行
  4. 创建单元格

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

三、使用的主要代码

  1. 创建表格标题
  2. 创建表格
  3. 创建行
  4. 创建单元格

四、主要代码的基本元素代码
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>

六、效果图

个人简历
个人求职简历
姓名性别
年龄出生日期
所在城市从事行业
学历名族
婚姻状况身份证
毕业学校计算机能力
家庭成员姓名成员关系职务工作单位
工作经历工作时间公司名称职位名称所属部门
教育情况时间学校学历
培训经历时间培训机构培训内容
备注
自我评价
⑧讲⑤德
关注
  • 7
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html个人简历表格制作
01-17
html个人简历表格制作
HTML制作简易个人简历（表单）
m0_49940462的博客
06-03 2万+
《个人简历》练习效果图如下：
HTML5制作个人简历模板
qq_50748038的博客
07-18 8385
vscode2019使用HTML制作一个简单的个人简历模板
【博主推荐】HTML5实现简洁好看的个人简历网页模板源码
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
07-02 1365
HTML5实现简洁好看的个人简历网页模板源码，全网最火的个人简历网站源码，大作业求职简历源码，个人主页源码，大作业个人网站源码，大作业个人简历源码，网站模板，页面内容有首页、关于我、工作经验、学习教育、个人技能、专业特长、朋友评价、个人奖状、联系我等功能块，用到表单、表格、自适应布局、锚点、轮播图等技术点，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
用html制作一个简历
QwwwQxx的博客
03-20 7973
【代码】用html制作一个简历。
html制作好看的个人简历(附源码)
热门推荐
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
html制作个人简历
m0_64242574的博客
05-18 2万+
前几天我为大家介绍了些html的标签，利用这些标签咱们可以简单制作个简历，来巩固知识。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body background="01bb62571600ba32f8758c9b79b318.jpg@2o.jpg">
设计师个人简历表免费下载
07-28
"设计师个人简历表免费下载" 提供了一个方便的方式来准备这种关键文档，无需花费额外的时间和金钱。这个资源特别适合那些正在寻找相关岗位的设计专业人士，无论是平面设计师、UI/UX设计师、网页设计师还是产品设计师...
html5怎么制作个人简历表格？.docx
11-22
HTML5 制作个人简历表格是当前非常流行的技术，通过使用 HTML5 的 table 元素，可以轻松地创建一个漂亮的个人简历表格。在本篇文章中，我们将 introducer 如何使用 HTML5 制作个人简历表格，并对相关的属性和使用...
html个人简历.rar
10-24
以下是一些关键的HTML标签和概念，可能在个人简历的制作中使用： 1. **`<head>`**：这是HTML文档的头部，包含元信息，如字符编码（`<meta charset="UTF-8">`）和页面标题（`<title>`）。 2. **`<body>`**：页面的...
Web简单个人简历
10-23
【HTML 个人简历】是一种基于Web技术创建的电子简历，它使用HTML（HyperText Markup Language）语言来构建页面结构，并通过CSS（Cascading Style Sheets）进行样式设计，以实现美观且功能丰富的在线展示。...
用H5 的table标签制作个人简历的表格.html
09-21
用Visual Studio Code编译器中的H5中table标签制作一个表格，这个是只用Table标签制作了一个个人简历的表格
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
HY_Sophie的博客
11-15 2224
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
运用html表格标签制作个人简历表
weixin_65789931的博客
07-13 1831
运用html表格标签制作个人简历表
HTML-个人简历表格制作
qq_53002037的博客
05-25 2326
个人简历表格制作
前端应用_html_利用html表格 制作个人简历_02
上海 彭彭
07-23 2057
作业为 制作的个人简历的样式为如下： 特点如下： 第一行 全部合并 图片占据竖直五个格子 我们要用到的知识就是合并。 1.首先用快捷键 制作一个表格 table>(tr>td*5) 然后点击tab 键。 3. 加border 和表格高度以及宽度 (winth ,height) 4. 合并第一行 ， (colspan) 5. 合并图片 占用的格子（rowspan） 代...
html使用table标签制作个人简历
October_27的博客
07-30 4262
个人简历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>resume</title> <style> *{ margin: 0; padding: 0; } .table1{ marg...
使用HTML完成个人简历表格
qq_58047273的博客
10-18 762
运用html完成个人简历表格的制作
html表格之个人简历
qianqianyunyan的博客
07-18 1万+
html表格属性制作个人简历（简易版）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值