美文网首页
Day21--课后作业(html表格)

Day21--课后作业(html表格)

作者: zxhlcl | 来源:发表于2018-10-29 19:50 被阅读0次

    最傻逼的解决办法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>个人简历</title>
        </head>
        <body>
            <p align="center"><font size="15" color="black" face="黑体" >个人简历</font></p>
            <table align="center"  bgcolor="black"  height="2100" border="1">
                
                <tr bgcolor="white" align="center" height="100">
                    <td width="300"><font size="10" color="black" face="仿宋">学院</font></td>
                    <td colspan="5"><a href="http://www.uva.nl/home" target="_blank"><font size="10" color="black" face="仿宋">阿姆斯特丹大学</font></a></td>
                    <td rowspan="5" width="600"><img src="img/python创始人.png" ></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="10" color="black" face="仿宋">专业</font></td>
                    <td colspan="5"><font size="10" color="black" face="仿宋">数学和计算机科学</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td width="300"><font size="10" color="black" face="仿宋">姓名</font></td>
                    <td width="300"><font size="6" color="black" face="仿宋">Guido van Rossum</font></td>
                    <td width="300"><font size="10" color="black" face="仿宋">性别</font></td>
                    <td width="300"><font size="10" color="black" face="仿宋">男</font></td>
                    <td width="300"><font size="10" color="black" face="仿宋">民族</font></td>
                    <td width="300"><font size="10" color="black" face="仿宋">犹太</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="10" color="black" face="仿宋">出生年月</font></td>
                    <td><font size="6" color="black" face="仿宋">1956年1月31日 </font></td>
                    <td><font size="6" color="black" face="仿宋">籍贯 </font></td>
                    <td><font size="6" color="black" face="仿宋">荷兰·阿姆斯特丹 </font></td>
                    <td><font size="12" color="black" face="仿宋">身高 </font></td></td>
                    <td><font size="12" color="black" face="times new roman">172cm </font></td></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="12" color="black" face="仿宋">学历</font></td>
                    <td><font size="12" color="black" face="仿宋">博士</font></td>
                    <td><font size="12" color="black" face="仿宋">政治面貌</font></td>
                    <td colspan="3"><font size="12" color="black" face="仿宋">无党派人士</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="12" color="black" face="仿宋">就业意向</font></td>
                    <td colspan="6" align="left"><font size="12" color="black" face="仿宋">我创建的Python这门语言,我TMD还需要就业吗??</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="12" color="black" face="仿宋">兴趣爱好</font></td>
                    <td colspan="6" align="left"><font size="12" color="black" face="仿宋">抽烟、喝酒、烫头</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="12" color="black" face="仿宋">个人说明</font></td>
                    <td colspan="6" align="left"><font size="12" color="black" face="仿宋">我就是我自己的神,活在我的地方</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="12" color="black" face="仿宋">家庭地址</font></td>
                    <td colspan="6" align="left"><font size="12" color="black" face="仿宋">华盛顿北弗吉尼亚的郊区</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="12" color="black" face="仿宋">住址详情</font></td>
                    <td ><font size="12" color="black" face="仿宋">保密</font></td>
                    <td ><font size="12" color="black" face="仿宋">联系电话</font></td>
                    <td ><font size="12" color="black" face="仿宋">保密</font></td>
                    <td ><font size="12" color="black" face="仿宋">手机</font></td>
                    <td colspan="2"><font size="12" color="black" face="仿宋">保密</font></td>
                    
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td><font size="12" color="black" face="仿宋">任职情况</font></td>
                    <td colspan="6" align="left"><font size="12" color="black" face="仿宋">待业在家,专攻代码.....</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td rowspan="12"><font size="12" color="black" face="仿宋">个人履历</font></td>
                    <td colspan="2"><font size="12" color="black" face="仿宋">时间</font></td>
                    <td colspan="2"><font size="12" color="black" face="仿宋">学校</font></td>
                    <td colspan="2"><font size="12" color="black" face="仿宋">任职</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="2"><font size="12" color="black" face="仿宋">1982年</font></td>
                    <td colspan="2"> <font size="12" color="black" face="仿宋">阿姆斯特丹大学</font></td>
                    <td colspan="2"><font size="12" color="black" face="仿宋">攻读博士</font> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="2"> <font size="12" color="black" face="仿宋">1989年</font></td>
                    <td colspan="2"> <font size="12" color="black" face="仿宋">阿姆斯特丹大学</font></td>
                    <td colspan="2"><font size="12" color="black" face="仿宋">创立Python语言</font> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="2"> <font size="12" color="black" face="仿宋">2005年</font></td>
                    <td colspan="2"><font size="12" color="black" face="仿宋">谷歌公司</font> </td>
                    <td colspan="2"> <font size="12" color="black" face="仿宋">工程师</font></td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="6"> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="6"> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="6"> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="6"> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="6"> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="6"> </td>
                </tr>
                <tr bgcolor="white" align="center" height="100">
                    <td colspan="6"> </td>
                </tr>
                </table> 
        </body>
    </html>
    

    效果:


    QQ截图20181029194705.png

    采用CSS设置网页得到模式,解决办法如下:

    
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            
            <style type="text/css">
                html{height:100%;}
                span
                {
                    margin-top:10px;
                    font-family: "黑体";
                    font-size: 30px;
                }
                .div01
                {
                    text-align:center;
                    
                    margin: 10px 10px;
                }
                .table01
                {
                     border-collapse: collapse;
                     font-family: "仿宋";
                     font-size: 20px;
                     margin: auto;
                    
                }
                .table01 td
                {
                    height: 50px;
                    width: 150px;
                    border: 1px solid black;
                }
                .table02
                {
                    border-collapse: collapse;
                    border-width:0px; 
                    border-style:hidden;
                }
                .table02 td
                {
                    width:250px
                }
                .table03
                {
                    border-collapse: collapse;
                    border-width:0px; 
                    border-style:hidden;
                }
                .table03 td
                {
                    width:400px
                }
    
            </style>
            
            <title></title>
        </head>
        <body>
            <div class="div01"> 
            <span>个人简历</span>
                <table class="table01">
                    <tr>
                        <td></td>
                        <td colspan="5"></td>
                        <td rowspan="5" style="width:200px">照片</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="5"></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="5">
                            <table class="table02">
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>
                            
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="6">
                            <table class="table02">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td rowspan="10"></td>
                        <td colspan="6">
                            <table class="table03" >
                                <td></td>
                                <td></td>
                                <td></td>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <table class="table03" >
                                <td></td>
                                <td></td>
                                <td></td>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <table class="table03" >
                                <td></td>
                                <td></td>
                                <td></td>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                    
                </table>
            </div>
    
        </body>
    </html>!
    
    

    效果如下所示:


    QQ截图20181031102559.png

    相关文章

      网友评论

          本文标题:Day21--课后作业(html表格)

          本文链接:https://www.haomeiwen.com/subject/ysjitqtx.html