x(42)0910第六天__表格佈局老舊的佈局方法

時間 2019-11-08

標籤第六表格佈局老舊方法简体版

原文原文鏈接

table 佈局css

不易於維護，耦合太嚴重了。html

不利於搜索引擎檢索。web

效果圖：ide

html代碼：佈局

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
        
        <link rel="stylesheet" type="text/css" href="css/tableweb.css" />
    </head>

    <body> Hello Web!` <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; table 是<b>塊元素</b>，獨佔一行 <table id="myweb">
            <tbody>
                <tr>
                    <td id="myhead"></td>
                </tr>
                
                <tr>
                    <td>
                        <table id="mybody">
                            <tbody>
                                <tr>
                                    <td id="leftside"></td>
                                    <td id="rightcontent"></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                
                <tr>
                    <td id="myfoot"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

css代碼：搜索引擎

@charset "utf-8"; *{ margin: 0px; padding: 0px;
} body{ background-color: #3e4e54;
} #myweb{ margin: 0px auto; width: 100%; height: 700px;
    
    /* 單元格之間的距離。*/ border-spacing: 0px;
    
    /* 表格的邊框合併。設置之後 border-spacing 自動失效*/ border-collapse: collapse;
} #myweb th,td{ border: 1px yellow solid;
} #myhead,#myfoot{ width: 100%; height: 150px;
} #mybody{ margin: 0px auto; width: 100%; height: 100%;
    
    /* 單元格之間的距離。*/ border-spacing: 0px;
    
    /* 表格的邊框合併。設置之後 border-spacing 自動失效*/ border-collapse: collapse;
} #leftside{ width: 20%;
} #rightcontent{ width: 80%;
}

相關標籤/搜索

__x__(42)0910第六天__表格佈局 老舊的佈局方法

x(42)0910第六天__表格佈局老舊的佈局方法