Web前端第四章-个人简历

1 成果演示

2 需求分析

2.1 还原表格

看到这一种表格首先要想到其中的某一些单元格被合并了,我们把它还原成未合并的样子

完成这一种很简单,这是一份6行7列的表格,先把这个表格做出来

  <table border="1px" cellspacing="0"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="200px"><tr height="40px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>

呈现的效果如下

表格已经搭建出来了,接下来将对应的文字写在对应的<td></td>标签里

        <tr height="40px"><td>个人简历</td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td>照片</td></tr><tr height="40px"><td>学历</td><td></td><td>籍贯</td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td>电话</td><td></td><td>政治面貌</td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td>毕业院校</td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="40px"><td>求职意向</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

对应的文字写好了,接下来将单元格合并一下,只要用到两个新的属性colspan和rowspan

2.2 colspan属性

<td colspan="7">个人简历</td>
colspan值是7,表示将一个表格的宽度扩大7倍(可以理解为合并7个单元格)
接下来:

1. 第一行个人简历的单元格扩大7倍,将多余的单元格删除
2. 第三行第四列的单元格扩大3倍,将多余的单元格删除
3. 第四行第四列的单元格扩大3倍,将多余的单元格删除
4. 第五行第二列的单元格扩大5倍,将多余的单元格删除
5. 第六行第二列的单元格扩大6倍,将多余的单元格删除

  <tr height="40px"><td colspan="7">个人简历</td></tr><tr height="40px"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td>照片</td></tr><tr height="40px"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td><td></td></tr><tr height="40px"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td><td></td></tr><tr height="40px"><td>毕业院校</td><td colspan="5"></td><td></td></tr><tr height="40px"><td>求职意向</td><td colspan="6"></td></tr>

接下来只要在将照片与下面三个单元格合并,表格就算完成了

2.3 rowspan

<td rowspan="4">照片</td>
rowspan的值为4,表示单元格的高度扩大4倍(相当于合并4个单元格)
将多余的单元格删除即可

为了美观,将字体居中,在<tr></tr>标签上加 align=“center” 属性(字体居中)
<tr height="40px" align="center">
最后的效果就和演示的一样了