效果:
css部分:
table {
width: 500px;
table-layout: fixed; /*可以让每一个格子的宽度一致,不随字数多少改变 */
border-collapse: collapse; /*相邻边框合并*/
font-size: 14px;
margin: 0 auto;
}
tr {
height: 40px;
}
th,
td {
border: 1px solid #999;
}
主体部分:
<table> /*放在表格中*/
<caption> /*使用caption盛放标题,可以很方便的使标题居中*/
<h3>简历</h3>
</caption>
<tr>
<th>姓名</th>
<td></td>
<th>性别</th>
<td></td>
<td rowspan="3"> /*照片格子占上下3格,rowspan="3"*/
<img src="" alt="">
</td>
</tr>
<tr>
<th>出生年月</th>
<td></td>
<th>籍贯</th>
<td></td>
</tr>
<tr>
<th>政治面貌</th>
<td></td>
<th>民族</th>
<td></td>
</tr>
<tr>
<th>联系电话</th>
<td></td>
<th>Email</th>
<td colspan="2"></td> /*colspan="2"左右占用2格*/
</tr>
<tr>
<th>家庭住址</th>
<td></td>
<th>毕业院校</th>
<td colspan="2"> </td>
</tr>
<tr>
<th>学历</th>
<td></td>
<th>专业</th>
<td colspan="2"></td>
</tr>
<tr>
<th rowspan="5">学习工作经历</th>
<th>起止时间</th>
<th>工作单位</th>
<th>职务</th>
<th>岗位职责及业绩成绩</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:80px"> /*直接更改高度即可*/
<th>个人能力</th>
<td colspan="4"></td>
</tr>
<tr style="height:80px">
<th>兴趣及爱好</th>
<td colspan="4"></td>
</tr>
<tr style="height:80px">
<th>个人评价</th>
<td colspan="4"></td>
</tr>
</table>