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

一、个人简历制作

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

（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>

HTML5基础学习（6）：个人简历制作相关推荐

HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
【html5基础学习速成】
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息.HTML5在从前HTML4.01的基础 ...
HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
前端（HTML5基础学习笔记）
以下学习路线都是基于自己看的黑马程序员视频总结而来学习路线:HTML5 -> CSS3 -> H5C3 一.HTML简介 1. 网页 2. 常用游览器 3. Web标准(重点) 二.HT ...
ps基础学习：邮票效果制作
从网上下载一张邮票如下: (1)新建一张画布,背景色填充为黑色,在画布内部画一个矩形选区,填充为白色. (2)用画笔工具生成锯齿效果选择画笔工具,像素大小设置为6,选择圆形,颜色设置为黑色. 选择画 ...
HTML html5基础详细笔记第一个模块
第01章-前端核心技术-HTML5基础学习目标了解什么是HTML 掌握HTML标签.元素的概念重点掌握HTML常用头部元素的使用重点掌握HTML标题.段落.文本.图片等排版重点难点掌 ...
HTML5 在线学习网站
HTML5 在线学习网站摘要: HTML5的强大,让更多的人想要系统的学习它.但面对网上五花八门的搜索结果,是否无法抉择?文章作者以自己的实践经验,筛选出来11个在线学习HTML5开发的网站,让HT ...
html5语句大全,html5基础语句（学习）
起风了兼容性问题文档类型设定字符设定常用新标签新增的input type属性值: 常用新属性综合案例兼容性问题文档类型设定 document HTML http://blog.sina ...
html5代码_干货篇！零基础学习HTML5要用到的6款开发工具
HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...

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

一、个人简历制作

HTML5基础学习（6）：个人简历制作相关推荐

最新文章

热门文章