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

Question

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

布局很好，虽然我读到表格不是要走的路（SEO，也许不仅如此）

所以我需要使用div，布局如下（我在RTL Lang /style /direction）

我的问题是 任何人都可以尝试并简化如何或举例说明这样的布局

并更详细地解释：

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

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

在这里你不需要想太多来分析这将是 2 x 2 表

但是当涉及到 div 时，我没有按我的计划放置它们的结果，我想知道如何让我变得简单，因为它对我来说是一张桌子。

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;
}

Answer 2

你不能要求完整的布局，但我写了两个教程，它们肯定会帮助你获得制作它们所需的技能：如何在 CSS 中定位和使用 CSS创建固定（“粘性”）页脚。

Answer 3

检查这个

<div id="wrapper">
        <div id="header">
            <p>This is the Header</p>
        </div>
        <div id="navigation">
            <p>This is the Menu</p>
        </div>
        <div id="leftcolumn">
            <div class="row">
            <div>1st block</div>
            <div>2nd block</div>
            </div>
            <div class="row">
            <div>3rd block</div>
            <div>4th block</div>
            </div>
        </div>

        <div id="rightcolumn">
            sfsf
        </div>
        <div id="footer">
            <p>This is the Footer</p>
        </div>
    </div>

演示

Answer 4

HTML-Cleaner 有一个很好的功能，可以用 DIV 替换 HTML 表格：http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/确保 包含提供的 css 代码。