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第六天__表格布局老旧的布局方法