简历制作（用表格布局）

知识点：

1.水平方向上，横跨用colspan，4个格
<td colspan="4">会计</td>
2.竖直方向上，竖并用rowspan，4个格
<td rowspan="4">老师</td>
3..ziwopingjia{} 是类选择器
.xiaoyuanjingli{}是类选择器
4.表格嵌套（表格共12行，5列），第7行的第2个格子，嵌套了一个表格，嵌套了一个什么样的表格呢？嵌套了一个4行3列的表格。
5.12行5列的表格，写起来的时候可以用快捷键：
tr*12>td*5然后，按个回车键，一个12行5列的表格就OK了
6.<caption></caption>是表格的标题，永远相对于表格的正中间
7.<thead></thead> 里面有tr，tr里面有th
<tbody></tbody>里面有tr，tr里面有td
<tfoot></tfoot>里面有tr，tr里面有td
注意：<thead></thead> 里面用th的话，可以自带加粗、居中的效果

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简历练习</title>
</head><style>table {border: 1px solid;/* border-color: red; */border-collapse: collapse;margin: auto;}.bigtable {width: 1000px;text-align: center;}.smalltable {width: 100%;border: none;}tr {height: 37px;}td {width: 220px;border:1px solid  royalblue;text-align: center;}.pad {padding: 0;border: none;}.td-left {border-left: none;}.td-top {border-top: none;}.td-right {border-right: none;}.td-bottom {border-bottom: none;}.qiuzhiyixiang{background-color: green;}.xingming{background-color: green;}.xingbie{background-color: green;}.jiguan{background-color: green;}.youxiang{background-color: green;}.dizhi{background-color: green;}.jiaoyujingli{background-color: green;}.zhuxiukecheng{background-color: green;}.shixijingli{background-color: green;}.rongyuzhengshu{background-color: green;}.xiaoyuanjingli{background-color: green;}.ziwopingjia{background-color: green;}
</style><body><table class="bigtable"><caption>个人简历</caption><tbody><tr><td class="qiuzhiyixiang">求职意向</td><td colspan="4">会计</td><!-- 水平方向上，横跨colspan，4个格 --></tr><tr><td class="xingming">姓名</td><td>搜穗网</td><td>出生年月</td><td>1989年12月</td><td rowspan="4"><img src="./12.11学习/image/图组图片1.png" alt=""></td><!-- 竖直方向上，竖并rowspan，4个格 --></tr><tr><td class="xingbie">性别</td><td></td><td></td><td></td></tr><tr><td class="jiguan">籍贯</td><td></td><td></td><td></td></tr><tr><td class="youxiang">邮箱</td><td></td><td></td><td></td></tr><tr><td class="dizhi">地址</td><td colspan="4"></td><!-- 水平方向上，横跨colspan，4个格 --></tr><tr><td class="jiaoyujingli">教育经历</td><td colspan="4" class="pad"><table class="smalltable"><tr><td class="td-left td-top"></td><td class="td-top"></td><td class="td-top td-right"></td></tr><tr><td class="td-left"></td><td></td><td td-right></td></tr><tr><td class="td-left"></td><td></td><td td-right></td></tr><tr><td class="td-left td-bottom"></td><td class="td-bottom"></td><td class="td-right td-bottom"></td></tr></table></td></tr><tr><td class="zhuxiukecheng">主修课程</td><td colspan="4">000</td></tr><tr><td class="shixijingli">实习经历</td><td colspan="4">vvv</td></tr><tr><td class="rongyuzhengshu">荣誉证书</td><td colspan="4">kkk</td></tr><tr><td class="xiaoyuanjingli">校园经历</td><td colspan="4">000</td></tr><tr><td class="ziwopingjia">自我评价</td><td colspan="4">000</td></tr></tbody></table>
</body></html>

效果图：

表格进阶03——简历制作（用表格布局）相关推荐

表格进阶03—出纳日报表（表格，再次练习）
一.代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
表格合并行_Word制作验收单表格，很简单，快来学习吧
作者:图文设计师东东办公软件Word制作一款简单的验收单表格,方法很简单,大家一起来学习吧! 第一步.新建.插入表格打开Word新建--空白文档,输入标题"验收单".如下图. ...
计算机应用基础word表说课,制作word表格说课课件.ppt
文档介绍: 制作Word表格说课课件制作Word表格说课课件制作Word表格说课课件一说教材教材的作用及地位分析返回本课题选自高等教育出版社出版的<计算机应用基础>第4章第4节第 ...
php表格边框细线,html如何制作细线表格
这次给大家带来html如何制作细线表格,用html制作细线表格的注意事项有哪些,下面就是实战案例,一起来看一下. 关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置 ...
html表格如何成为一条线,html如何制作细线表格
这次给大家带来html如何制作细线表格,用html制作细线表格的注意事项有哪些,下面就是实战案例,一起来看一下. 关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置 ...
Day3—HTML个人简历制作及五彩导航练习
个人简历制作和五彩导航练习一.个人简历制作 1.表格 2.表单二.五彩导航 1.CSS超链接样式 1.1 CSS超链接样式设置 2.设置超链接状态样式 2.1 文本修饰 2.2 背景样式三.实例 ...
html写表格标记,HTML表格标记教程(48):CSS修饰表格
HTML表格标记教程(48):CSS修饰表格互联网发布时间:2008-10-17 18:56:54 作者:佚名我要评论现在我们来看看怎样巧妙运用css语法美化表格. 注:除非特殊声 ...
使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 .btbg{ text-align:center; } 个人简历姓名性别出生日期照片民族政治面貌婚姻状况现所在地籍贯学历毕业学校专 ...
HTML5+CSS大作业——简单的程序员个人博客(7页) 大学个人博客网页制作教程表格布局网页模板
HTML5+CSS大作业--简单的程序员个人博客(7页) 大学个人博客网页制作教程表格布局网页模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家 ...

表格进阶03——简历制作（用表格布局）

简历制作（用表格布局）

知识点：

表格进阶03——简历制作（用表格布局）相关推荐

最新文章

热门文章