html - 如何将表格中的 html 网页布局替换为使用 div

Question

我已经通过主页中的 Html 表格进行了页面布局。

布局很好，虽然我读到表格不是要走的路(搜索引擎优化，也许不仅如此)

所以需要用到div，布局如下(我在 RTL Lang/style/direction)

我的问题是任何人都可以尝试简化操作方法或举例说明这样的布局吗

并有更详细的解释:

我认为“我的生活”是如此简单，当我必须了解表格的结构时因此，为了便于说明，请采用以下标记:

<table>
     <tr> <td>1</td> <td>2</td> </tr>
     <tr> <td>3</td> <td>4</td> </tr>
</table>

这里不用多想就可以分析出这会是2×2的表格

但是当涉及到 div 时，我没有按照我的计划放置它们我想知道如何使它变得简单，就像为我准备一张 table 一样。

2 现在我正在尝试通过 div 实现该布局(不涉及表格)并使其工作，以便布局将是跨浏览器，意思看起来相同至少对于 3 个主要浏览器 IE8&9/FF/Chrome (仅我的偏好)

提前致谢

Answer 1

我努力制作你想要的模板。希望你会喜欢。查看我的布局 按部门标签。我附上了一个屏幕截图，它是在以下基础上创建的 我的 div 逻辑。我想你会清楚的。

<div id="main" >
    <div style="background-color:Blue; text-align:center; ">
    Main banner
    </div>
    <div style="background-color:Green; text-align:center; " >
    Top menu
    </div>
    <div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
    Right side menu
    </div>
    <div style="background-color:Red; text-align:center; height:200px;" >
    <div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
    contend2
    </div>
    <div style="background-color:Lime; text-align:center;height:100px;   ">
     contend1
    </div>
    <div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
    contend4
    </div>
    <div style="background-color:Orange; text-align:center;height:100px;   ">
     contend3
    </div>
    </div>
    <div style="background-color:Silver; text-align:center;   " >
    Footer
    </div>
    </div>


**In case if you want external css then use** 
<div id="main" >
    <div id="mainbanner">
    Main banner
    </div>
    <div id="topmenu" >
    Top menu
    </div>
    <div id="rsm" >
    Right side menu
    </div>
    <div id="maincontend" >
    <div id="c2" >
    contend2
    </div>
    <div id="c1">
     contend1
    </div>
    <div id="c4">
    contend4
    </div>
    <div id="c3">
     contend3
    </div>
    </div>
    <div id="footer">
    Footer
    </div>
    </div>
**CSS................**

#Main   
{
}

#mainbanner
{
    background-color:Blue;
    text-align:center;
}

#topmenu
{
    background-color:Green; 
    text-align:center;
}
#rsm
{
    background-color:Gray; 
    text-align:center; 
    width:300px; 
    float:right; 
    height:200px;
}
#maincontend
{
    background-color:Red; 
    text-align:center;
    height:200px;
}
#c2
{
   background-color:Fuchsia; 
   text-align:center; 
   width:300px; 
   float:right; 
   height:100px;  
}
#c1
{
   background-color:Lime; 
   text-align:center;
   height:100px; 
}
#c4
{
    background-color:Aqua; 
    text-align:center; 
    width:300px; 
    float:right; 
    height:100px;
}
#c3
{
    background-color:Orange; 
    text-align:center;
    height:100px;
}
#footer
{
    background-color:Silver; 
    text-align:center;
}