如何制作个人简历?

说到简历,大家应该第一个想到的是ps,或者使用word表格来制作打印

可是很多时候带着的时候并不方便,所以今天我们教大家用html的table标签来制作个人简历

需要的时候无论哪个手机都可以查看自己的简历!

是不是很方便呢?

HTML table制作个人简历_HTML

----------------------------------------------------------------

ok!废话不多说,直接上教程:

table是html中的一个表格标签

这个标签实用性很高,但出场率并不高

他可以用来做网页布局,亦可以拿来做表格

通俗一点说table就是一个盒子

他是这样的

HTML table制作个人简历_HTML_02


----------------------------------------------------------------

它下面你可以给他横排和纵排

分别是tr和td

看上去就是一个表格啦

(tr表示横排td表示竖排,所以td装在tr内)

他是这样的

HTML table制作个人简历_HTML_03

----------------------------------------------------------------

当然,这时候table是没有边框的

我们再给它加上边框一个基本的个人简历就制作完成了

HTML table制作个人简历_HTML_04


好的

下面开始我们的代码教程

----------------------------------------------------------------

首先

我们放上一张图片img

并且给他设置我想要的宽高,这里用的是300像素

HTML table制作个人简历_HTML_05

----------------------------------------------------------------

接下来添加table表格

先来一个tr,六个td

分别写上姓名 民族 联系号码

顺便用div分别装上img和table

设置div宽为100%;高就自适应

这样的目的是分开图片和表单并居中

HTML table制作个人简历_HTML_06

----------------------------------------------------------------

接下来给table边框写上去

还有宽高

HTML table制作个人简历_HTML_07

----------------------------------------------------------------

下面的内容自己添加

可点击使用的是a标签

将a标签嵌套在td内即可

我们来讲讲精华部分

如果是空白部分想要占几行怎么办?

HTML table制作个人简历_HTML_08

给他添加colspan属性即可

值为几便是几行

HTML table制作个人简历_HTML_09

这里我们使用的是5行

添加上即可

----------------------------------------------------------------

那同时占两列呢?


HTML table制作个人简历_HTML_10

很简单,用rowspan属性即可

同理值为几跨几列

HTML table制作个人简历_HTML_11

不过值得注意的是

第一个tr内的td设置了以后它占两列,但是下面的tr首个成为了第二个,因为第一个的位置被上一个tr内的td占了

最后最后

td内的居中用td属性的align,值为center,也就是居中的意思

----------------------------------------------------------------

新手领地

html为结构

css为样式

javascript是行为,简称js

html内的标签自带属性用等号(=)

如:<td rowspan="2" align="center">1</td>

这里的rowspan align都是属性,2和center是值

css中的叫样式

一般用类名(class=“”)取名使用或id命名

css都是用的“:”而不是“=”

width: 100%;

display: flex;

justify-content: center;

align-items: center;

(以上内容均为自创,转载注明出处,否则必将追究其责任)

转自:公众号 双鱼站

作者:小鱼儿