Day21--課后作業(yè)(html表格)

最傻逼的解決辦法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>個(gè)人簡(jiǎn)歷</title>
    </head>
    <body>
        <p align="center"><font size="15" color="black" face="黑體" >個(gè)人簡(jiǎn)歷</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="仿宋">學(xué)院</font></td>
                <td colspan="5"><a  target="_blank"><font size="10" color="black" face="仿宋">阿姆斯特丹大學(xué)</font></a></td>
                <td rowspan="5" width="600"><img src="img/python創(chuàng)始人.png" ></td>
            </tr>
            <tr bgcolor="white" align="center" height="100">
                <td><font size="10" color="black" face="仿宋">專業(yè)</font></td>
                <td colspan="5"><font size="10" color="black" face="仿宋">數(shù)學(xué)和計(jì)算機(jī)科學(xué)</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="仿宋">學(xué)歷</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="仿宋">無(wú)黨派人士</font></td>
            </tr>
            <tr bgcolor="white" align="center" height="100">
                <td><font size="12" color="black" face="仿宋">就業(yè)意向</font></td>
                <td colspan="6" align="left"><font size="12" color="black" face="仿宋">我創(chuàng)建的Python這門語(yǔ)言,我TMD還需要就業(yè)嗎??</font></td>
            </tr>
            <tr bgcolor="white" align="center" height="100">
                <td><font size="12" color="black" face="仿宋">興趣愛(ài)好</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="仿宋">個(gè)人說(shuō)明</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="仿宋">華盛頓北弗吉尼亞的郊區(qū)</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="仿宋">聯(lián)系電話</font></td>
                <td ><font size="12" color="black" face="仿宋">保密</font></td>
                <td ><font size="12" color="black" face="仿宋">手機(jī)</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="仿宋">待業(yè)在家,專攻代碼.....</font></td>
            </tr>
            <tr bgcolor="white" align="center" height="100">
                <td rowspan="12"><font size="12" color="black" face="仿宋">個(gè)人履歷</font></td>
                <td colspan="2"><font size="12" color="black" face="仿宋">時(shí)間</font></td>
                <td colspan="2"><font size="12" color="black" face="仿宋">學(xué)校</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="仿宋">阿姆斯特丹大學(xué)</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="仿宋">阿姆斯特丹大學(xué)</font></td>
                <td colspan="2"><font size="12" color="black" face="仿宋">創(chuàng)立Python語(yǔ)言</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設(shè)置網(wǎng)頁(yè)得到模式,解決辦法如下:


<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>個(gè)人簡(jiǎn)歷</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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • c函數(shù)strnstr(char* s1, chars2, int pos1) 各個(gè)參數(shù)的含義/* strnstr ...
    螻蟻撼樹(shù)閱讀 1,614評(píng)論 0 1
  • 用電子書(shū)是挺方便的,相比紙質(zhì)書(shū)閱讀速度也快了不少。小說(shuō)之類的文學(xué)作品電子書(shū)好一些,但是要學(xué)些東西,比如工具類的,電...
    鯨魚(yú)我愛(ài)你閱讀 2,291評(píng)論 1 1
  • 【葉黃】君當(dāng)戲言 (三)喝水時(shí)受到驚嚇,是該吐出來(lái)還是咽下去? “既然美人、金錢閣下都有了,我也不想用這種俗物來(lái)感...
    綠肥紅瘦_d7ca閱讀 498評(píng)論 0 0

友情鏈接更多精彩內(nèi)容