使用table标签制作个人简历
程序员文章站
2022-03-07 18:09:12
...
通过制作个人简历，熟悉table标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历</title>
</head>
<body>
<table border="0" width="800" height="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="260" border="1" valign="top">
<table >
<tr height="100">
<td></td>
<td></td>
</tr>
<tr>
<td width="230" align="right"><img src="img/person.png" alt="人物图片"></td>
<td width="30"></td>
</tr>
<tr>
<td align="right" color="#5f5f5f" size="5"><font color="#5f5f5f" size="5">张大山</td>
</tr>
<tr>
<td align="right"><font color="#a7a6a6" size="3">19087234891</td>
</tr>
<tr>
<td align="right"><font color="#a7a6a6" size="3">aaa@qq.com</td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="75">
<td>
</td>
</tr>
<tr>
<td align="right"><img src="img/resume.png"></td>
</tr>
</table>
<hr>
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="30">
<td></td>
</tr>
<tr>
<td colspan="2"><font color="#5f5f5f" size="4">个人情况</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td width="50%">姓名 : <font color="#5f5f5f" size="3">张达山</font></td>
<td width="50%">籍贯 : <font color="#5f5f5f">北京昌平</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td width="50%">性别 : <font color="#5f5f5f">男</font></td>
<td width="50%">身高 : <font color="#5f5f5f">175cm</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td width="50%">民族 : <font color="#5f5f5f">汉</font></td>
<td width="50%">体重 : <font color="#5f5f5f">70kg</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td width="50%">出生日期 : <font color="#5f5f5f">1992.03.28</font></td>
<td width="50%">电话 : <font color="#5f5f5f">18210898888</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td width="50%">专业 : <font color="#5f5f5f">工业设计</font></td>
<td width="50%">现居住地 : <font color="#5f5f5f">昌平天通苑</font></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="30">
<td></td>
</tr>
<tr>
<td colspan="2" ><font color="#5f5f5f" size="4">教育背景及工作经历</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2">2008.09-2011.06 <font color="#5f5f5f">北京邮电大学 工业设计专业</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2">2011.06-2012.09 <font color="#5f5f5f">北京微创信息科技有限公司 任前端开发工程师</font></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="30">
<td></td>
</tr>
<tr>
<td colspan="2" ><font color="#5f5f5f" size="4">所获证书</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2">2009年 : <font color="#5f5f5f" size="3">荣获 " 高级美术设计 " 证书</font></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2">2009年 : <font color="#5f5f5f" size="3">荣获 " 优秀班* " 证书</font></td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>加了CSS版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历</title>
<style type="text/css">
body{
font-family:"Microsoft Yahei";
}
img{
width:100px;
}
.title01{
color:#5f5f5f;
font-size:24px;
line-height:36px;
}
.title02{
color:#a7a6a6;
line-height:24px;
}
.title03{
font-size:18px;
font-size:bold;
font-weight:bold;
}
.list td{
color:#5f5f5f;
line-height:36px;
}
.list td span{
font-weight:bold;
color:#333;
}
</style>
</head>
<body>
<table border="0" width="800" height="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="260" border="0" valign="top" bgcolor="#f2f2f2">
<table >
<tr height="100">
<td></td>
<td></td>
</tr>
<tr>
<td width="230" align="right"><img src="img/jsp.png" alt="人物图片"></td>
<td width="30"></td>
</tr>
<tr>
<td align="right" class="title01">张三</td>
</tr>
<tr>
<td align="right" class="title02">123456789123</td>
</tr>
<tr>
<td align="right" class="title02">aaa@qq.com</td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top" class="list">
<table border="0" cellpadding="0" cellspacing="0" width="480" >
<tr height="75">
<td>
</td>
</tr>
<tr>
<td align="right"><img src="img/resume.png"></td>
</tr>
</table>
<hr>
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="30">
<td></td>
</tr>
<tr>
<td colspan="2" class="title03"><span>个人情况</span></td>
</tr>
<tr>
<td width="50%"><span>姓名 :</span> 张达山</td>
<td width="50%"><span>籍贯 :</span> 北京昌平</td>
</tr>
<tr>
<td width="50%"><span>性别 :</span> 男</td>
<td width="50%"><span>身高 :</span> 175cm</td>
</tr>
<tr>
<td width="50%"><span>民族 :</span> 汉</td>
<td width="50%"><span>体重 :</span> 70kg</td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td width="50%"><span>出生日期 :</span> 1992.03.28</td>
<td width="50%"><span>电话 :</span> 123456789123</td>
</tr>
<tr>
<td width="50%"><span>专业 :</span> 工业设计</td>
<td width="50%"><span>现居住地 :</span> 昌平天通苑</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="30">
<td></td>
</tr>
<tr>
<td colspan="2" class="title03"><span>教育背景及工作经历</span></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2"><span>2008.09-2011.06</span> 北京邮电大学 工业设计专业</td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2"><span>2011.06-2012.09</span> 北京微创信息科技有限公司 任前端开发工程师</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="30">
<td></td>
</tr>
<tr>
<td colspan="2" class="title03"><span>所获证书</span></td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2"><span>2009年 :</span> 荣获 " 高级美术设计 " 证书</td>
</tr>
<tr>
<tr height="10"><td></td></tr>
<td colspan="2"><span>2009年 :</span> 荣获 " 优秀班* " 证书</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>上一篇： [LeetCode]313. Super Ugly Number
下一篇： Java单例模式