个人简历模板
丑是丑了点,没有那么花里胡哨。。。
先看展示
代码实现
<!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>
<style type="text/css">
/*表格整体样式*/
table{
border:1px solid black;
width: 800px;
/* 让表格位于网页中间 */
margin: auto;
/* 合并表格与单元格之间的边框,单元格与单元格之间的边框 */
border-collapse: collapse;
margin-bottom: 80px;
}
/*给标题文字设置大小*/
caption{
font-size: 30px;
}
/*单元格样式*/
td{
border: 2px solid black;
/*单元格中文字到单元格边框的距离*/
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>个人简历</caption>
<tbody>
<tr>
<td width="10%">学院</td>
<td colspan="5"></td>
<td width="15%" rowspan="5">照<br><br>片</td>
</tr>
<tr>
<td>专业</td>
<td colspan="5"></td>
</tr>
<tr>
<td>姓名</td>
<td width="10%"></td>
<td width="10%">性别</td>
<td width="10%"></td>
<td width="10%">民族</td>
<td width="10%"></td>
</tr>
<tr>
<td>出生年月</td>
<td></td>
<td>籍贯</td>
<td></td>
<td>身高</td>
<td></td>
</tr>
<tr>
<td>学历</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr>
<td>就业意向</td>
<td colspan="6"></td>
</tr>
<tr>
<td>兴趣爱好</td>
<td colspan="6"></td>
</tr>
<tr>
<td>个人说明</td>
<td colspan="6"></td>
</tr>
<tr>
<td>家庭地址</td>
<td colspan="3"></td>
<td>联系电话</td>
<td colspan="2"></td>
</tr>
<tr>
<td>任职情况</td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="4">本<br><br>人<br><br>简<br><br>历</td>
<td colspan="2">时间</td>
<td colspan="2">学校</td>
<td colspan="2">任职</td>
</tr>
<tr>
<!-- 代表一个空格,空出来一片空间-->
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="5">奖<br><br>惩<br><br>情<br><br>况</td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
</tbody>
</table>
</body>
</html>
如果嫌丑,可以自己添加背景,例如:
(1)给表格添加背景图片(在css渲染的table标签选择其中加上backgroud-image:url(“图片地址(通常是放在同级目录下)”);)
(2)设置背景图片,并且这个背景图片不会随着网页的滑动而变换位置(在table选择器中添加backgroud-attachment:fixed;
属性表示固定住图片)
更多推荐
HTML+CSS实例:简单朴素的个人简历模板(HTML表格使用+css样式渲染)
发布评论