学习笔记：HTML实现个人简历制作

shufinnliu
766 阅读2分钟

步骤一

：先确定个人简历为7列6行的表格（即`tr`和`td`的排列方式和数量）

步骤二

：在对应单元格`td`中填入姓名性别等文字

步骤三

：设置标签`border="1px"`(否则会默认不显示边框)

步骤四

：设置标签`cellspacing="0"`(否则会默认显示不合预期的单元格间隙)

步骤五

：在`table`标签中设置`col width="100px"`列宽度100px，设置7列，并视情况把第七列设为200px）

步骤六

：在每个`tr`（行标签）中设置`height="40px"`(行高40px)

以下为步骤一至六的源码：

<html>
	<head>
		<meta charset="utf-8" />
		<title>个人简历</title>
	</head>
	<body>
		<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>
		
	</body>
</html>

步骤一至六的源码解析结果截图：

image.png

继续

步骤七

：将第一行的七个单元格合并（实质就是让一个单元格占据7格的跨度，即只保留一格，并为此单元格设置标签colspan="7"表示“列跨度=7”）

步骤八

：“籍贯”一栏同理，设置为colspan="3"

步骤九

：“政治面貌一栏”同理，设置为colspan="3"

步骤十

：“毕业院校”、“求职意向”两栏同理，略过

步骤十一

：“照片”一栏，需要把第3、4、5行的最后一个单元格删除，然后让第2行的最后一个单元格占据4个单元格的位置，实现方式是：<td rowspan="4">照片</td>

步骤十二


设置文字居中（在每个tr标签中设置align="center"表示居中排列）

以下为步骤7-12的源码：

<html>
	<head>
		<meta charset="utf-8" />
		<title>个人简历</title>
	</head>
	<body>
		<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 align="center"  height="40px">
				<td colspan="7">个人简历</td>
			</tr>
			<tr align="center" height="40px" >
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<td rowspan="4">照片</td>
			</tr>
			<tr align="center"  height="40px" >
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>		
			</tr>
			<tr align="center"  height="40px" >
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"</td>	
			</tr>
			<tr align="center"  height="40px" >
				<td>毕业院校</td>
				<td colspan="5"></td>		
			</tr>
			<tr align="center"  height="40px" >
				<td>求职意向</td>
				<td colspan="6"></td>	
				<td></td>
			</tr>		
		</table>
		
	</body>
</html>

步骤7-12实现效果截图：

image.png

最后一列出现一个意外的多余边框，暂时没有找到原因所在，后期研究。

总结：colspan 列跨度（用于列的合并）
          rowspan 行跨度（用于行的合并）

avatar
文章
阅读
粉丝