主要使用table标签来实现个人简历的表格制作
效果图如下:
代码如下:
<!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>个人简介</title>
<style>
.title{
text-align: center;
font-weight: bold;
font-size: 22px;
}
th{
font-size: 14px;
background-color: #f0f0f0;
}
td{
min-width: 80px;
height: 30px;
}
</style>
</head>
<body>
<table border="1px" align="center" cellspacing="0" cellpadding="10px">
<colgroup>
<col>
</colgroup>
<thead>
<tr>
<td class="title" colspan="8">个人简介</td>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<td></td>
<th>性别</th>
<td></td>
<th>出生年月</th>
<td></td>
<td colspan="2" rowspan="5" style="width: 160px"></td>
</tr>
<tr>
<th>祖籍</th>
<td></td>
<th>民族</th>
<td></td>
<th>政治面貌</th>
<td></td>
</tr>
<tr>
<th>身体状况</th>
<td></td>
<th>婚姻状况</th>
<td></td>
<th>学历</th>
<td></td>
</tr>
<tr>
<th>所学专业</th>
<td colspan="2"></td>
<th>毕业学校</th>
<td colspan="2"></td>
</tr>
<tr>
<th>专业能力</th>
<td colspan="5"></td>
</tr>
<tr style="height: 80px;">
<th>求职意向</th>
<td colspan="7"></td>
</tr>
<tr style="height: 80px;">
<th>专业课程</th>
<td colspan="7"></td>
</tr>
<tr style="height: 120px;">
<th>实践经历</th>
<td colspan="7"></td>
</tr>
<tr style="height: 80px;">
<th>获奖经历</th>
<td colspan="7"></td>
</tr>
<tr style="height: 80px;">
<th>自我评价</th>
<td colspan="7"></td>
</tr>
</tbody>
</table>
</body>
</html>