欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用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>

使用table标签制作个人简历




加了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>
使用table标签制作个人简历