使用table标签制作个人简历

来源：互联网发布：js原型编辑：程序博客网时间：2024/04/27 18:58

通过制作个人简历，熟悉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">zhangdasahn@126.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">123456789123@126.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>

阅读全文

0 0