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

最新推荐文章于 2023-01-16 18:35:23 发布

qq_45411328

最新推荐文章于 2023-01-16 18:35:23 发布

阅读量2.6k

点赞数

分类专栏： html table元素文章标签： html css

本文链接：https://blog.csdn.net/qq_45411328/article/details/107137559

版权

html 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

table元素

1 篇文章 0 订阅

订阅专栏

使用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。之前初学没注意。。。

qq_45411328

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用table元素写一个个人简历表格

使用table元素写一个表格模仿下面的表格用html完成相同样式思路将上面的表格分为四个表格分别为tb1，tb2，tb3，tb4分为上下两部分两个div块来装表格利用浮动将tab2浮动到tb1在将tb4浮动到tb3计科完成tb1分为4行两列`  用             &
复制链接

扫一扫