html布局有很多种,下面这种是比较古老的表格布局法此种布局方法已经不常用了,table已经被div所取代了,仅供大家学习和参考,不用太过深入研究!

CSS布局表格布局图:

12.30.PNG

传统表格布局代码:

<!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title>CSS传统布局上</title>    <!--    
    传统的表格布局    
    特点:    
    布局方法十分简单,但是现在网络上已经不常用了,使用此布局方法的网站十分少,只有一些教育网或者政府网可能还保留了此种布局方法,    
    一旦显示屏分辨率低于网页总大小,会导致网页显示不完整,则会在下面出现横拉框    
    -->    <style>    body{    margin: 0;    }    table{    width: 960px;    margin: 0 auto;    /*border-spacing: 0px;//让表格边框变成一条线*/    border-collapse: collapse;    /*border-collapse: collapse;让表格边框的线更细*/    }    .header{    height: 120px;    background-color: olive;    }    .aside{    background-color: purple;    height: 500px;    width: 200px;    }    .section{    background-color: maroon;    width: 760px;    }    .footer{    height: 120px;    background-color: sandybrown;    }    </style>    </head>    <body>    <table border="0">    <tr>    <td colspan="2" class="header">header</td>    </tr>    <tr>    <td class="aside">aside</td>    <td class="section">section</td>    </tr>    <tr>    <td colspan="2" class="footer">footer</td>    </tr>    </table>    </body>    </html>

转载请标明出处,宗波尘客-CSS样式之传统表格布局