使用table元素写一个个人简历表格

使用table元素写一个表格
模仿下面的表格用html完成相同样式

思路
将上面的表格分为四个表格分别为tb1，tb2，tb3，tb4
分为上下两部分两个div块来装表格利用浮动将tab2浮动到tb1
在将tb4浮动到tb3计科完成

tb1
分为4行两列`

用途	金额（元）


合计

` 其中由于每一列的宽度占据多少比例是由该列的文本内容决定的所以我使用了许多的来实现比例的调整（我实现的时候没有想到更好的办法我听说室友使用span元素包裹内容也能实现相同的效果） **tb2** 分为两行两列

部门领导签批
公司领导审批

需要文字竖着排列我使用br元素实现的
同理tb3和tb4使用相同的方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.tb{color: rgb(11, 170, 170);font-family:微软雅黑;}.tb td{border: 1px black solid;}.tb1{width: 600px;height: 400px;/* 设置边框间距 */border-collapse: collapse;text-align: center;float: left;}.tb2{width: 500px;height: 400px;border-collapse: collapse;text-align: center;float: left;}.tb3{width: 600px;height: 100px;/* border: 1px black solid; */border-collapse: collapse;text-align: center;float: left;}.tb4{width: 500px;height: 100px;border-collapse: collapse;text-align: center;float: left;}</style>
</head>
<body><div class="tb"><div class="tb-top"><table class="tb1"><tr><td>&nbsp;用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;途&nbsp;</td><td>金额（元）</td></tr><tr><td> &nbsp;</td><td> &nbsp;</td></tr><tr><td> &nbsp;</td><td> &nbsp;</td></tr><tr><td>&nbsp;合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计&nbsp;</td><td></td></tr></table><table class="tb2"><tr><td>部<br>门<br>领<br>导<br>签<br>批</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr><tr><td>公<br>司<br>领<br>导<br>审<br>批</td><td></td></tr></table></div><div class="tb-bottom"><table class="tb3"><tr><td>金额大写 ：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拾&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 万&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 仟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 佰 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拾 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;角 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分</td></tr></table><table class="tb4"><tr><td>原借款：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元</td><td>应退余额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元</td></tr></table></div></div>
</body>
</html>

Document

用途	金额（元）


合计

部门领导签批
公司领导审批

金额大写：拾万仟佰拾元角分

原借款：元

应退余额：元

</div>

完成的图片

上面的案例为初学的时候学艺不精的错误演示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1px" cellspacing="0" cellpadding="0" width="500px" height="840px" align="center"><tr><th colspan="6">个人简历</th></tr><tr align="right"><td width="100px">姓名：</td><td width="100px"></td><td width="100px">年龄：</td><td width="100px"></td><td width="50px" rowspan="4" colspan="2"></td></tr><tr align="right"><td width="100px">婚姻状况：</td><td width="100px"></td><td width="100px">民族：</td><td width="50px"></td></tr><tr align="right"><td width="100px">户口所在地：</td><td width="100px"></td><td width="100px">身材：</td><td width="50px"></td></tr><tr align="right"><td width="100px">目前所在地：</td><td width="100px"></td><td width="100px">政治面貌：</td><td width="50px"></td></tr><tr><th colspan="6" height="40px"></th></tr><tr><th colspan="6" align="left">求职意向及工作经历</th></tr><tr align="right"><td>人才类型：</td><td colspan="5"></td></tr><tr align="right"><td>应聘职位：</td><td colspan="5"></td></tr><tr align="right"><td>工作年限：</td><td></td><td colspan="3" align="right">职称:</td><td></td></tr><tr align="right"><td>求职类型：</td><td></td><td colspan="3" align="right">可到职日期:</td><td></td></tr><tr align="right"><td>月薪要求：</td><td></td><td colspan="3" align="right">希望工作地区:</td><td></td></tr><tr height="80px"><td>个人工作经历</td><td colspan="5">......<br>......</td></tr><tr height="40px"><td colspan="6"></td></tr><tr><th colspan="6" align="left">教育背景</th></tr><tr align="right"><td>毕业院校：</td><td colspan="5"></td></tr><tr align="right"><td>最高学历：</td><td></td><td>毕业日期：</td><td colspan="3"></td></tr><tr align="right"><td>所学专业1：</td><td></td><td>所学专业2：</td><td colspan="3"></td></tr><tr height="80px"><td>教育培训经历</td><td colspan="5">......<br>......</td></tr><tr height="40px"><td colspan="6"></td></tr></table></body>
</html>

思路
其实第一个案例没必要拆开浮动可以调整好每行的宽度然后使用
colspan，和rowspan。之前初学没注意。。。

使用table元素写一个个人简历表格相关推荐

vue可填写表格_VUE写一个简单的表格实例
目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展--个性化设置正文 ...
PhpExcel 写一个漂亮的表格
文章不长,文章不长,文章不长本表格是模仿橙心优选团长面单来做的先上表格思路确定总共有多少列,需要确定表头要合并多少单元格,可以多预留 1~2 列,如果用不到,最后把宽度设置为 0 剩下的就是合 ...
使用HTML写一个个人简历
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>个人简 ...
用html写一个个人简历
主要还是用到了table,只是有些地方没有加边框而已. <body><table border="1"><caption>职业圈</cap ...
花名册信息填写另一个exceL简历表格里
'两天不睡着完成4万余名学生的基本信息表格 Option Explicit Dim i Private Sub Command1_Click() Timer1.Enabled = True Timer ...
php简单的写一个班级信息表格
使用table标签制作常用的html表格
table 标签用于定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. ...
php设置一个日历,用PHP写一个简单的日历
用PHP写一个简单的日历作者:黑马出处: 日历被广泛应用于网络日志.作为网络日志导航的一种实现方式,我们不需要太复杂的日历,有年.月.日.周日即可,本文要讨论的就是这类简单的日记. 一个日历在布局 ...
使用HTML写一个简历表格
代码实现的效果如下: 代码如下: <!DOCTYPE html> <html> <head><title>填写个人简历</title> &l ...

使用table元素写一个个人简历表格

使用table元素写一个个人简历表格相关推荐

最新文章

热门文章