制作个人简历(个人简历制作)

制作个人简历(个人简历制作) 个人简历制作 通过上节课表格的制作,这节课我们就根据上节课所学的对其进行一个练习,加深一下对表格的理解。 要想实现这个效果,我们不妨先来想一下思路。...

制作个人简历(个人简历制作)1628046043ia7VDR.jpg

个人简历制作

通过上节课表格的制作,这节课我们就根据上节课所学的对其进行一个练习,加深一下对表格的理解。

1628046043UDM46n.jpg

要想实现这个效果,我们不妨先来想一下思路。

我们要想实现个人简历表格效果,就要从下面这个表格来实现

1628046043wVENAt.jpg

这是个6行7列的表格,也就是说有6个tr,每个tr中有7个td

我们来实现它

1628046043DQkmZR.jpg

在这里我们补充一些上面的知识,在table标签下

col可以设置每个单元格的宽度,7列所以我们写7个

1628046043UMr2IW.jpg

然后再配合我们每一行的高度

1628046043p1dIaK.jpg

这样我们就可以把这个表格的轮廓完成了

1628046043UVprj3.jpg

接下来我们把文字填入

分别对应的每一行的首列填入文字

1628046043IoCxZd.jpg

效果如下

1628046043y6vATR.jpg

现在我们就开始这节课最重要的工作,合并单元格

所谓的单元格合并,就是把后面的单元格td删除,留下的单元格对其设置宽度,即为合并

这里的colspan代表占几个单元格

由于第一行只留一个单元格,所以这一个单元格它占了7格

1628046043CMPNsJ.jpg

这时的效果为

1628046043HJ18MB.jpg

我们再来合并其他需要合并的部分

16280460433fcIXB.jpg

来看一下效果

1628046043pM5Cqm.jpg

最后还有照片单元格,这个是纵向合并,与上面有所不同

这一个就需要删除下面三行中每一行的最后一个单元格,并且让他占据三列的高度

注意:一定要删除每一行的最后一个单元格

1628046043PfmtJL.jpg

看一下效果

1628046043q7mcNp.jpg

最后我们分别给每行文字进行居中显示

1628046044nCNIKq.jpg

最后效果就出来了

1628046044Vg7EIN.jpg

最后我们总结一下,这节课的行的合并、列的合并,以及设置宽度的col标签

1628046044yfm6ox.jpg

列的合并我们是用了colspan,行的合并我们使用了rowspan


  • 发表于 2021-08-05 13:51
  • 阅读 ( 264 )
  • 分类:互联网

0 条评论

请先 登录 后评论
w小宇
w小宇

699 篇文章

你可能感兴趣的文章

相关问题