2008-09-18 36 views
2

有很多人問「爲什麼我們不應該使用表格來構建我們的HTML」,雖然有很多答案進來,但我很少看到任何人被轉換到世界上語義。也就是說,我還沒有看到任何有說服力的反駁來支持我們爲什麼應該(或可能)使用表格的理由。DIVs與TABLEs反駁請

任何人都在意提供什麼時候表格是有效結構標記的基本原理?


2008年11月7日

考慮到這個問題並沒有消失像我想的那樣,我想我會更好地闡明我的問題,並解釋它的存在。

通過在「DIVs vs. TABLE」問題後多次閱讀「表更容易」的論點而感到沮喪,我想讓問題更多地暴露出來,而不是讓桌上的愛好者如此輕鬆地擺脫困境。

對自己的其他人可能會說,但我永遠被給予一些應用程序放在我們的網站上,這些應用程序是由一些'表更容易'的開發人員,將大量蹩腳的HTML轉儲到我的網頁中,說實話,我只是沒有看到足夠的桌旁愛好者傾聽爭論。

當天有人使用曼波嗎?任何人都不得不把設計放在微軟Sharepoint的頂端?不得不通過所有嵌套的表格廢話來爭取你的方式是地獄,並認爲它是由一些血腥的好編程人員寫的惱人的我。合理的語義標記已經存在了很長時間,應該沒有理由讓開發人員繼續支持「表更容易」。桌子不容易 - 他們很懶!

我的問題值得表達否定態度的負面代表,但我仍然在等待人們接受他們使用表格的唯一原因是因爲他們不知道HTML。因爲如果他們這樣做了,那麼他們就會明白,正如jjrv所說,表格是用於表格數據的。

+2

請問可以回答的問題,不僅僅是討論(來自Ask Question頁面) – 2008-09-18 19:45:53

+0

我同意@AviewAnew - 這個問題很奇怪,考慮到您對此的回答昨天完全一樣的話題。 – delfuego 2008-09-18 19:52:00

+0

我見過很多這樣的底層問題:你的問題引發了很大的反應(其中一些達到了+13),但是在-6的罐裝。請註冊這個可憐的問題! – 2008-12-27 20:57:43

回答

16

當您有一張數據表時,表格有效。我已經看到了交互式網格小部件,他們在這裏使用一堆div來避免可怕的表格標籤。當它是表格數據時,將它製成表格。

我的一個更有爭議的觀點是,當你在處理CSS中的垂直佈局問題時遇到問題時,你可以使用一個表並且經常立即解決它。也許不應該像應該將內容與演示文稿混合在一起,但它可以完成工作並避免CSS黑客繞過IE。

0

即使在硬的舊式HTML v1.0瀏覽器中也支持表格。如果你的目標市場包括20世紀90年代在手機中使用嵌入式瀏覽器的人,那麼這可能是一個很好的理由。

許多現有的自動生成的HTML使用表。如果您的代碼需要與這些表進行交互或包含這些表,那麼最好保持一致性。

1

當您添加功能或修復錯誤或更改數據驅動的網站外觀時,使用現代語義標記會容易得多。添加AJAX功能或任何類型的交互式腳本對DIV和CSS的效果要好於TABLE。

如果您已經使用語義標記進行組織,轉移到像Drupal,Joomla,WordPress或類似的內容管理器會更容易。

較新的瀏覽器版本也將更有效地支持現代標記,並且您的網站將顯示更快。重新排列所有這些表格會導致顯示時間變慢。

另一方面,表格在這裏停留。有些人會繼續使用它們,瀏覽器將繼續顯示它們。如果這就是你想要的,非語義標記本身沒有任何問題。一個永遠不會被改變的完全靜態網站也可以像現代標記一樣運行在表格中。

至於有效的結構化標記,有這樣的:表是顯示錶格數據,如數據庫或電子表格表的好方法。它們對於其他任何東西都不是真正有效的標記。

0

我想說jjrv是正確的表格中是優秀的表格數據,走出自己的方式來實現所謂的「工作」之類的表,而不是隻使用一個表是邊緣遲鈍。

如果您關心標準,並在所有瀏覽器上實現可靠的實施,那麼大部分標記應該採用無表格佈局,而您的表格數據則在..您猜對了表格!

如果您需要迎合真正的舊瀏覽器,那是在可怕的ie6之前,那麼您將在css中出現很多問題,並且根據當前的使用情況統計數據,假設每個人都有一個「現代」瀏覽器支持css佈局。

這一切說他們很多時候你撞你靠着牆頭佈局上,你想/不說f___它通過它的表和它的作品。我希望這是一個不推薦的做法,但在成功的過程中,這確實給出了可預測的結果。

0

對最低公分母html或表格數據使用表格,其中跨列或行有意義。否則,一旦你掌握了它,css佈局就不那麼冗長了,而且更容易維護。

1

基於DIV的佈局受到限制。沒有表格,實質上是impossible來實現基於內容的高度正確增長的雙列布局。

1

一個有趣的筆記與高度複雜的JavaScript應用程序有關。如果您使用Firebug挑選Gmail或Google日曆,則會發現廣泛使用表格,即使是佈局也是如此。當然,這些通常是動態生成的,但這表明在極少數情況下,一些非常複雜的交互式用戶界面非常難以僅使用DIV進行構建。

6

RE:爲什麼表?

因爲有些人(畢竟這些年來)仍然害怕改變。他們聽說使用語義HTML是一件好事(通常不會完全理解這個概念)。所以他們嘗試使用CSS從未做過的佈局。他們遇到了一些(有據可查,通常很容易解決)問題,舉起手來,跑回桌子。

然後,他們決定CSS'太耗時'(「我不願意花時間學習它」)或'不實際'(「我不明白,太難了」)而這些表格是唯一真實的方式。通過固執和無知,他們相信他們自己的詭計,並說服他們的客戶和同行。

而且他們的世界仍然是快樂和不變,進一步衰落到過去和深入過時*

這就是「爲什麼表」。結束。

(*除了它們非常適合於編碼的HTML郵件)

2

表是誰可以懶得去搗鼓小時用CSS讓開發兩個相鄰columnesque的div擴大到100%高度和寬度與內容無關,然後拿到絕對挫折,他們訴諸於5秒修復黑客在所有瀏覽器的工作,無需添加額外的div包裝,然後最後:

<table width="100%"> 
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr> 
</table> 

事實上,大多數用戶(不包括那些使用屏幕閱讀器的用戶)確實不在意頁面是如何標記的,只要它加載得很快。

開發人員有預算和時間限制,「好」的CSS和標記需要時間。

事實上,網絡上有大量資源用大量的細節解釋瞭如何將兩個div替換成簡單的表格,我很清楚地告訴我這種設計本質上與表格一樣有缺陷。需要多少個教程來解釋如何add a table with two columns to a page

HTML5應該爲我們帶來全新的頁眉,頁腳,欄目,導航和旁邊標籤。 Example從NETTUTS採取+:

<div id="content"> 
    <div id="mainContent"> 
     <section> 
      <!-- Blog post --> 
     </section> 
     <section id="comments"> 
      <!-- Comments --> 
     </section> 
     <form> 
      <!-- Comment form --> 
     </form> 
    </div> 
    <aside> 
     <!-- Sidebar --> 
    </aside> 
</div> 

,然後這對CSS:

#content { 
    display: table; 
} 

    #mainContent { 
     display: table-cell; 
     width: 620px; 
     padding-right: 22px; 
    } 

    aside { 
     display: table-cell; 
     width: 300px; 
    } 

那些有敏銳的眼光一定會喜歡諷刺的感覺,當你注意到CSS具有的屬性: display: table;display: table-cell;

表回來了寶貝!通過HTML5後門進入;-)