1. 首頁
  2. 問答
  3. 在HTML中，使用div比使用表有什麼優勢？

在HTML中，使用div比使用表有什麼優勢？

2012-05-09 82 views
2

經過多年的後端算法和分析工作，我最近被迫做了一些「HTML工作」。 （你們現在有一些叫做jQuery的東西，對嗎？）Anyhoo，當我以前做HTML時（在XHTML日子之前），表格非常常見。現在，我看到了大量支持「div」和「無表」的敬語。爲了追上我錯過的那些年，什麼原因比電視臺更喜歡divs？ [我最近試圖做一個簡單的兩列表（66％，33％）進入divs，並且瘀傷仍然是新鮮的。]在HTML中，使用div比使用表有什麼優勢？

我意識到這個問題可能是主觀的，所以作爲一個特定的子問題：什麼是簡單，簡潔的div基於HTML，下面的表呈現：

<table> 
     <tr> 
     <td width="33%">Name</td> 
     <td width="67%">Description</td> 
    </tr> 
    <tr> 
     <td>National Hockey League</td> 
     <td>A much longer paragraph about the league</td> 
    </tr> 
</table>

來源

2012-05-09 Amrinder Arora

+1

一個很大的原因是，您希望HTML標記定義文檔的「結構」，並使用CSS來定義「外觀」。一個

元素應該代表一個信息表，而不是一個獲得所需佈局的快速方法。這就是說，CSS3中提供的新網格和flexbox佈局選項將使這一切變得更加容易。 – dlev

回答

13

表不應該被用於頁面佈局，因爲它們是：

  • 慢渲染的瀏覽器需要下載大部分，如果不是全部的話表以使其正確

  • 他們需要更多的HTML然後非表格佈局，這意味着較慢的加載和渲染以及增加的帶寬使用

  • 他們可以是一個惡夢維持，因爲他們可能會很複雜迅速

  • 他們可以打破文本複製

  • 他們產生負面影響屏幕閱讀器，並且可以使你的圓錐\10噸無法訪問一些用戶

  • 他們不靈活，因爲使用正確的語義標記

  • 他們從來沒有打算用於頁面佈局

來源

2012-05-09 19:12:20

+0

那麼具體問題怎麼樣 - 如何使用div渲染簡單的2 col表？ –

+0

@AmrinderArora你問了很多問題，但是約翰的回答最能解決你的問題，正如它在問題標題中所述（並且在正文中也是如此）。 – Madbreaks

+0

@Madbreaks子問題實際上是問題的「實例」。例如，約翰的迴應說基於表的代碼可能是噩夢來維護。從這我推斷基於div的代碼很容易維護。子問題的答案將作爲一個很好的例子。 –

1

如果你繪製的表格數據，通過各種手段使用表格 - 這就是他們的目的是爲了。你的例子可能有資格！但是，由於John Conde的回答中提供了很多原因，請不要使用表來創建頁面結構。

乾杯

來源

2012-05-09 19:18:03 Madbreaks

+0

謝謝，這很有幫助。如果我明白這一點，表格開始被用於許多佈局原因，並且divs是正確的方式來做到這一點，我同意。另外，我認爲這不是桌子被認爲是邪惡的（感謝上帝！），這只是他們的過度使用。我有權利嗎？ –

+0

正確。更具體的說，雖然（不打死馬），它正在使用它們來定義被認爲是邪惡的頁面佈局/結構。 FWW不會讓任何人告訴你，基於div的佈局更容易，因爲它不是。但是你會習慣它（我們都是）。正如其他地方提到的，CSS3有很大的幫助。 – Madbreaks

+0

再次感謝。如果我可以看到該表格的基於div的代碼，那麼我已經習慣了部分代碼可能剛剛開始。也許能夠關閉這個問題！ –

相關問題

 相關問題