表格與版式的頁面佈局

我知道有很多關於這個話題的文章。我的任務是實現具有粘性頁眉和頁腳的固定流體2列布局。閱讀了幾篇文章後，人們聲稱divs更適合構建頁面佈局。我同意在某些情況下。任何人都可以告訴我，如果我正在努力完成的話，會比使用div更好。任何人都可以給我一個更簡單的DIV解決方案，而不是使用TABLE附帶的代碼。表格與版式的頁面佈局

CSS

html,body{ 
    height:100%; 
    width:100%; 
    margin : 0; 
    } 

    table{ 
    height:100%; 
    width:100%; 
    border-collapse: collapse; 
    border-spacing: 0 
    } 

    #top{ 
    height:100px; 
    background-color:black; 
    } 

    #bottom{ 
    height:100px; 
    background-color:blue; 
    } 

    #left{ 
    width:250px; 
    background-color:blue; 
    }

HTML

<html> 
    <head> 
    </head> 
    <body> 
    <table > 
     <tr id="top"> 
     <td colspan="2"></td> 
     </tr> 
     <tr id="mid"> 
     <td id="left"> 
     </td> 
     <td id="right"> 
     </td> 
     </tr> 
     <tr id="bottom"> 
     <td colspan="2"> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2013-02-26 cella

HTML shoudl是語義的，即標籤shoudl代表它纏繞的東西。一個表格應該保存表格數據，一個div（部門）應該佈置你的頁面。在閱讀過的文章中使用這些信息，以便在被卡住時回覆並回來 – DavidB 2013-02-26 15:35:32

非常快速地模擬出我認爲自己在做什麼之後：http://jsfiddle.net/wSCsm/1/請不要使用這個表格。表格僅用於表格數據。不是用於一般頁面佈局，也不是爲了更容易對齊表格等。 – 2013-02-26 15:38:55

我的示例（或需求）中沒有看到從使用表格中獲益的示例？你是否希望使用某種自動調整大小？如果是這樣，那隻會是中間一行是正確的？因此，立即消除了對頂行/底行的需求 - 這些可以由DIV元素取代。和表格（如果仍然需要）嵌套在「中」DIV – musefan 2013-02-26 16:38:44

如果你的代碼是用於非表格數據，然後看也不看你的代碼，我可以告訴你的是，div元素優於佈局table。

更多信息這SO文章是非常有用的：

Why not use tables for layout in HTML?

使用表

誰能給我的DIV小於所安裝代碼更簡單的解決方案

這不是關於什麼是最簡單的代碼。 Plus div佈局更具可擴展性。從長遠來看，你會遇到更少的divs障礙。

來源

2013-02-26 15:33:19 Curt

謝謝大家的迴應。特別感謝Billy Moat，他實際上發佈了代碼來證明這一點（儘管在較早的IE中不支持頁眉和頁腳）。我確實使用div，因爲它的目的是作爲一個非表格佈局內容持有者，而不是表格。 – cella 2013-02-27 07:00:51

-1

在我看來，表格只能用於表格數據 - 但這是我的意見。使用div的一點是，使用CSS操作起來要容易得多，而且不需要內置格式，而需要重寫。對於流體佈局，div是更好的，因爲它們本質上是流體，而表格則不是流體佈局。但是，真的，這歸結於個人偏好;在你的情況下，你可以按照你的心想要的方式去做！

來源

2013-02-26 15:35:42

我覺得有趣的是，有人低估了我發表我的意見以及真相。喜歡interwebs！ – 2013-02-26 15:40:48

我沒有讓你失望，但我懷疑它可能是*個人喜好*部分。這不是個人偏好，這是正確的方法。表格是表格數據，div表示佈局。 – Curt 2013-02-26 15:44:18

是的，總是有一種「正確」的方式去做事，但事實的真相是，還有其他的方法可以做到。如果他不需要流體div佈局的真正美，那麼他可以做他喜歡的事情。就像我在我的文章中所說的，表格是表格數據，div表示佈局 - 但是如果你真的想要的話，你可以說你不能使用表格。這可能不是最好的方式，但它是「一種」方式。 – 2013-02-26 15:52:50

表格與版式的頁面佈局

回答

相關問題