Web案例——制作简历

一、分析简历的表格结构

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