html表格的使用

最新推荐文章于 2022-04-05 16:39:00 发布

半步浮生

最新推荐文章于 2022-04-05 16:39:00 发布

阅读量251

点赞数

文章标签：表格简历 html

本文链接：https://blog.youkuaiyun.com/qq_36245314/article/details/102504725

版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://mp.youkuaiyun.com/mdeditor/102504725

用表格做一份简单的简历

每个人走出校园后的第一个目标一般都是拿到一份满意的offer，那么一份漂亮的简历就必不可少了，然而网络上的好多模板是不能直接使用的。我们想要做出一份适合自己的简历，可以随心所欲的修改里面的元素，突出我们各自的优势，做到让面试官眼前一亮，那么面试的过程也会顺利一些。有许多种方法可以达到这个目标，现在我们来利用html来做一个简单的简历。

第一步——创建一个表格

<table border="1" cellspacing="0" cellpadding="0">
				<caption>个人简历</caption>
				<tr><th>Header</th></tr>
				<tr><td>Data</td></tr>
			</table>

boder表示边框，能够设置边框的宽度。cellspacing表示的是表格之间的间距，cellpadding表示的是表格的内边距。tr即为一行 th与td均能表示一列，不同的是th类似于标题内容加粗。caption里的内容为表格外的标题，居中显示。表格需要几行便创建几个tr，需要几列便在tr中创建几个th/td。于是一个表格的创建原理便清晰可见了。
相同属性的可以在样式里面设置如所有行的行高

tr{
				height: 45px;
			}

第二步——调整参数

然而一个表格里并不是所有内容都是同样的宽高的，所以就需要单独给某一个地方设置其各自的属性，如下

<tr >
					<th width="80">姓名</th>
					<td width="150">张小花</td>
					<th>性别</th>
					<td>男</td>
					<td rowspan="3" width="100"></td>
				</tr>

我们给姓名和具体名字都设置了不同的宽度，就能呈现出我们想要的效果。在这里值得一提的是，你设置了tr中某一个th/td的宽度时，其他tr中与他处于同一列的小伙伴们也会自动拥有与之相同的宽度。
既然是表格那么就一定需要拥有合并单元格这个操作~ 横向合并呢，即为colspan=“6” 纵向合并为rowspan=“3” 里面的数字是需要合并的单元格数量

第三步——美化

我们是要做一份漂亮的简历嘛，为了避免色彩单一的白底黑字样式，我们可以给它赋予更多不一样的色彩。

<th bgcolor="aqua">专业</th>

我们能够给每行甚至是每一个单元格设置不同的颜色，不过呢。既然是简历，我们还是不要太花里胡哨啦。直接给整个简历做一个自己喜欢的背景。我们将表格创建在一个div里，赋予div宽高，给这个div一个背景就可以达到我们的需求了。

#main{
				width: 757px;
				height: 837px;
				background: url(img/1.png);
				margin: auto;
			}

最后在看看成品吧
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人简历</title>
		<style type="text/css">
			#main{
				width: 757px;
				height: 837px;
				background: url(img/1.png);
				margin: auto;
			}
			tr{
				height: 45px;
			}
			caption{
				font-size: 25px;
				margin-top: 20px;
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<table border="1" cellspacing="0" cellpadding="0" width="710" align="center">
			<caption>个人简历</caption>
			<thead>
				<tr>
					<th colspan="7">求职信息表</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<th width="80">姓名</th>
					<td width="150">张小花</td>
					<th>性别</th>
					<td>男</td>
					<th>出生日期</th>
					<td>19971001</td>
					<td rowspan="3" width="100"></td>
				</tr>
				<tr >
					<th>民族</th>
					<td>汉</td>
					<th>籍贯</th>
					<td>湖北武汉</td>
					<th>政治面貌</th>
					<td>党员</td>
				</tr>
				<tr >
					<th>健康状况</th>
					<td>良好</td>
					<th>体重</th>
					<td>65kg</td>
					<th>身高</th>
					<td>180</td>
				</tr>
				<tr >
					<th >专业</th>
					<td>软件工程</td>
					<th>学历</th>
					<td>本科</td>
					<th>毕业学校</th>
					<td colspan="2">武汉大学</td>
				</tr>
				<tr >
					<th>求职意向</th>
					<td colspan="3">项目经理</td>
					<th>联系方式</th>
					<td colspan="2">15212345678</td>
				</tr>
				<tr >
					<th>教育背景</th>
					<td colspan="6" height="70">2015年9月至2019年6月&nbsp;&nbsp;&nbsp;就读于武汉大学</td>
				</tr>
				<tr>
					<th>主修课程</th>
					<td colspan="6" height="70">软件工程、计算机网络原理、数据结构、操作系统等等</td>
				</tr>
				<tr>
					<th>工作经历</th>
					<td colspan="6" height="70">
						2019年1月至2019年3月在武汉****有限公司实习
						<br />
						2019年4月至2019年8月在武汉****有限公司工作
					</td>
				</tr>
				<tr>
					<th>兴趣爱好</th>
					<td colspan="6" height="70">喜欢看电影、登山</td>
				</tr>
				<tr>
					<th>自我评价</th>
					<td colspan="6" height="90">我是一个自信乐观的人，能够吃苦耐劳，服从命令，听从指挥，爱岗敬业。性格开朗，有耐心，对待工作认真负责，积极主动，思维严谨，热爱工作和学习，对工作学习生活充满了热情和希望</td>
				</tr>
			</tbody>
			<tfoot>
				<th>备注</th>
				<td colspan="6"></td>
			</tfoot>
		</table>
		</div>
	</body>
</html>