例图为:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>个人简历</title>
<style>
td {
width: 100px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<h2 align="center">个人简历</h2>
<table border="1" cellspacing="0" align="center">
<tr>
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>民族</td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td>学历</td>
<td></td>
<td>学制</td>
<td></td>
<td>专业</td>
<td></td>
</tr>
<tr>
<td>爱好特长</td>
<td colspan="6"></td>
</tr>
<tr>
<td>专业特长</td>
<td colspan="6"></td>
</tr>
<tr>
<td>英语水平</td>
<td colspan="2"></td>
<td>计算机水平</td>
<td colspan="3"></td>
</tr>
<tr>
<td>联系电话</td>
<td colspan="2"></td>
<td>电子邮箱</td>
<td colspan="3"></td>
</tr>
<tr>
<td>求职意向</td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="7">学习及实践经历</td>
</tr>
<tr>
<td colspan="2">时间</td>
<td colspan="3">学校或单位</td>
<td colspan="2">内容</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr height="120px">
<td>自我评价</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
本次用到的一些知识点:
HTML:
html是什么?超文本标记语言
超文本:超越普通文本文档,打破了普通文本文档的局限性
标记:根据标签的不同,对应的标签体内容也不相同
表格标签:
表格:展示数据,属性:给元素添加一些附加信息
表格边框:border=“1” 边框合并: cellspacing=“0”
列合并:colspan 行合并:rowspan
快捷输入:tr*5>td*5
回车五行五列
元单格文字居中:text-align: center;
表格背景插入图片:background='./1.png'