一、分析简历的表格结构
1、制作目标:
2、分析表格结构
表格总体呈6X7结构,6行7列,所有文字居中,标题“个人简历”加粗。
特殊行列:
第一行:仅有一个单元格,宽度占据了7列
第二行第七列:照片这一单元格,长度占据了4行
第三行第四列:宽度占据3列
第四行第四列:宽度占据3列
第五行第四列:宽度占据5列
第六行第四列:宽度占据6列
二、代码实现
1、表格总体结构实现,边框为1像素,单元格边框间距为0:
<table border="1px" cellspacing="0">
<tr>
<td>个人简历</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td>照片</td>
</tr>
<tr>
<td>学历</td>
<td></td>
<td>籍贯</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>毕业院校</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>求职意向</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
效果:
2、文字居中,表头加粗,设置单元格宽高(表头加粗居中,使用<th></th>代替td)
<table border="1px" cellspacing="0">
<col width="80" />
<col width="80" />
<col width="80" />
<col width="80" />
<col width="80" />
<col width="80" />
<col width="150" />
<tr height="45">
<th>个人简历</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" height="45">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td>照片</td>
</tr>
<tr align="center" height="45">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" height="45">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" height="45">
<td>毕业院校</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" height="45">
<td>求职意向</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
实现效果:
3、实现跨列:使用单元格属性,“colspan”,如第一行只有一个单元格,占据7列,将位于该行多余的单元格删除:
<tr height="45">
<th colspan="7">个人简历</th>
</tr>
效果:
3、实现跨行:使用单元格属性,“rowspan”,如照片单元格,占据4行,将其他行位于该列的单元格删除。
<td rowspan="4">照片</td>
效果:
4、完整代码
<table border="1px" cellspacing="0">
<col width="80" />
<col width="80" />
<col width="80" />
<col width="80" />
<col width="80" />
<col width="80" />
<col width="150" />
<tr height="45">
<th colspan="7">个人简历</th>
</tr>
<tr align="center" height="45">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr align="center" height="45">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr align="center" height="45">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr align="center" height="45">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr align="center" height="45">
<td>求职意向</td>
<td colspan="7"></td>
</tr>
</table>
三、总结
1、表头加粗居中,th标签
2、单元格跨行,rowspan
3、单元格跨列,colspan