如何將HTML網頁的佈局從表格替換爲使用div

Question

我已經通過我的主頁中的Html表格製作了頁面佈局。

的佈局很好，雖然我讀這表是不是要走的路（SEO也許不僅如此）

，所以我需要使用div的，佈局如下 （我在RTL郎/風格/方向）

我的問題是 任何人都可以嘗試，並簡化如何或舉一個例子的佈局一樣，

和更詳細的解釋：

我覺得「我的生活」是如此簡單，當我必須瞭解一個表 這樣的結構，用於說明目的，藉此標記：

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

在這裏你不需要考慮太多的分析，這將是2×2表

但是，當涉及到divs我得不到任何結果奠定他們，因爲我計劃 我想知道我該如何做很簡單，就像我的桌子一樣。

2，現在我試圖通過的div來實現這一佈局（沒有表參與） ，並使其發揮作用，這樣的佈局將是跨瀏覽器的，意思看起來一樣 至少爲3個主要的瀏覽器IE8&9/FF/Chrome（只是我的偏好）

在此先感謝

Answer 1

我努力使模板像你want.I希望你會喜歡我的it.See佈局 由師tag.I附上屏幕截圖，以及那就是 的基礎上創建了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

你不能要求爲完整的佈局，但我寫了兩篇教程，一定會幫助你掌握，使他們所需要的技能：How to Position in CSS和Create a Fixed ('Sticky') Footer with 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> 

DEMO

Answer 4

HTML清機有一個很好的功能與資料覈實取代HTML表：http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/ 確保您有提供的CSS代碼。