HTML5基础学习（6）：个人简历制作

最新推荐文章于 2024-07-02 17:28:29 发布
最新推荐文章于 2024-07-02 17:28:29 发布
阅读量2k 收藏 9
点赞数 2
分类专栏： web前端 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40298351/article/details/108664745
版权

一、个人简历制作

    接下来练习制作一个个人简历表格。例如：

（1）这个表格中有好多合并的单元格，第一步我们先将单元格进行拆分，就可以得到一个7 x 6 的表格：

（2）根据上图就可以编写单元格代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="150px" />
			<thead>
				<tr>
					<th>个人简历</th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td align="center">姓名</td>
					<td></td>
					<td align="center">性别</td>
					<td></td>
					<td align="center">年龄</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td align="center">学历</td>
					<td></td>
					<td align="center">籍贯</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td align="center">电话</td>
					<td></td>
					<td align="center">政治面貌</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td align="center">毕业院校</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td align="center">求职意向</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

（3）单元格合并

    所谓的单元格合并就是把多余的单元格删除，让一个单元格占多个单元格的位置。横向合并单元格可以是使用colspan="7"属性，数字7表示占用7个单元格的宽度。竖向合并单元格使用rowspan="4"，数字4表示占用4个单元格的高度。、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="150px" />
			<thead>
				<tr>
					<th colspan="7">个人简历</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td align="center">姓名</td>
					<td></td>
					<td align="center">性别</td>
					<td></td>
					<td align="center">年龄</td>
					<td></td>
					<td align="center" rowspan="4">照片</td>
				</tr>
				<tr>
					<td align="center">学历</td>
					<td></td>
					<td align="center">籍贯</td>
					<td colspan="3"></td>
				</tr>
				<tr>
					<td align="center">电话</td>
					<td></td>
					<td align="center">政治面貌</td>
					<td colspan="3"></td>
				</tr>
				<tr>
					<td align="center">毕业院校</td>
					<td colspan="5"></td>
				</tr>
				<tr>
					<td align="center">求职意向</td>
					<td colspan="6"></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

    完成该简历的制作 

（4）表格知识补充

    当列比较多的时候需要很多<col>标签设置列宽度，可以使用<colgroup>标签的span属性同时设置多个列，下面的写法等同于上面7个<col>标签：

<colgroup span="6" width="100px"></colgroup>
<colgroup span="1" width="150px"></colgroup>

 

游王子og
关注
专栏目录
html5制造简历
wangwenwen__的博客
08-02 174
这个界面主要使用表格（table）及一些表格属性设置 border：单元格边框宽度 cellspacing：两个单元格的间距 height：单元格高度 width：单元格宽度 colspan：合并行 rowspan：合并列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
HTML5制作个人简历模板
qq_50748038的博客
07-18 8460
vscode2019使用HTML制作一个简单的个人简历模板
HTML5个人简历模板
09-14
HTML5制作。适用于IT从业者使用。可根据自己专业以及职业技能进行修改即可使用。简单方便，好看。欢迎下载。
HTML5制作网页版个人简历
o_b_j_e_c_t的博客
04-17 1万+
用html+css+js制作全屏页面滚动个人简历 下面是效果图： css代码 <style> @keyframes mytranslateY{100%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0);filter:alpha(opacity=100);-mo
【博主推荐】HTML5实现简洁好看的个人简历网页模板源码
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
07-02 1704
HTML5实现简洁好看的个人简历网页模板源码，全网最火的个人简历网站源码，大作业求职简历源码，个人主页源码，大作业个人网站源码，大作业个人简历源码，网站模板，页面内容有首页、关于我、工作经验、学习教育、个人技能、专业特长、朋友评价、个人奖状、联系我等功能块，用到表单、表格、自适应布局、锚点、轮播图等技术点，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML5 个人简历模板
11-23
html 个人简历模板 特效炫酷 非常帅气 适合个人主页，简历等等。
HTML个人简历模板
11-23
HTML个人简历，非常好看，适合个人主页，非常非常非常帅气
HTML制作个人简历的简单实现
09-28
个人简历的制作，通常是网页制作中一个基础的实践活动，也是学习HTML的入门级项目之一。 在本例中，HTML代码展示了如何使用不同的标签来构建一个个人简历。下面将详细介绍每个部分所体现的知识点： 1. 文档类型...
博主推荐HTML制作一个美观的个人简介网页（附源码）
05-13
HTML是一种标记语言，它是网页制作的基础，用于构建和呈现网页内容。在本教程中，我们将深入探讨如何使用HTML来创建一个美观的个人简介网页。这个网页不仅适用于个人展示，还能在PC端和移动端流畅运行，提供了跨平台...
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript
热门推荐
qq_365392777
09-29 3万+
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水
html简单个人网页制作 HTML5+CSS大作业——程序员个人简历设计(5页)
qq_524614081的博客
01-10 1万+
HTML5+CSS大作业——程序员个人简历设计(5页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——程序员个人简历设计(5页)一、作品展示
HTML个人简历
10-08
利用HTML5语言编写的个人简历有兴趣的的朋友可以下载下来学习一下
html个人简历
08-08
html个人简历，div标签写的，欢迎大家指点交流，谢谢大家
HTML5个人主页简历模板
11-30
HTML5个人主页简历模板是一款扁平化大气的个人主页网站模板下载。
h5编写的个人简历
06-20
网页版 个人简历模板 基于h5开发的个人简历 包括代码，及简历格式模板 适合于刚毕业的大学生群体
用H5 的table标签制作个人简历的表格.html
09-21
用Visual Studio Code编译器中的H5中table标签制作一个表格，这个是只用Table标签制作了一个个人简历的表格
Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历.zip
06-03
本资源“Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历.zip”提供了一套用于创建专业且吸引人的个人简历的前端模板。这个模板基于HTML（HyperText Markup Language）和CSS（Cascading Style Sheets...
如何使用HTML5创建在线精美简历
weixin_34320724的博客
11-13 399
译自：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-an-html5-microdata-powered-resume/译者：蒋宇捷（转载请标明出处http://blog.csdn.net/hfahe）Janet Wagner于2011 年9月27日教程细节• 概要：HTML5的微数据API• 难度：初级/中...
个人简历模板html5
qq_20006765的博客
07-18 560
个人简历模板代码（html）
html自学网页制作,HTML入门学习教程:简单网页制作
05-22
你可以尝试创建一些简单的网页，例如个人简历或产品介绍页面。使用文本编辑器（例如Notepad++或Sublime Text）来编写HTML代码，并在浏览器中查看结果。从简单的开始，慢慢地加入更多的功能和特效。祝你好运！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

游王子og

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值