爲何不使用表格在HTML中進行佈局？ [關閉]

人們廣泛認爲 ，不該在HTML中使用表格進行佈局。

爲何？

我歷來沒有（或者說實話不多）對此有很好的論據。 一般的答案是：

• 將內容與佈局分開是很好的
  但這是一個謬論。 陳詞濫調思惟 。 我想這是真的，使用表格元素進行佈局與表格數據無關。 因此呢？ 我老闆在意嗎？ 個人用戶在意嗎？
  
  也許是我或個人同伴開發人員，他們須要維護網頁……表的維護性較差嗎？ 我認爲使用表格比使用div和CSS 更容易 。
  
  順便說一句...爲何使用div或span不能很好地將內容與佈局和表格分開？ 僅使用div得到良好的佈局一般須要大量嵌套的div。

• 代碼的可讀性
  我認爲這是另外一回事。 大多數人瞭解HTML，不多人瞭解CSS。

• SEO最好不要使用表格
  爲何？ 有人能夠證實它是嗎？ 仍是Google聲明從SEO角度不鼓勵使用表？

• 表比較慢。
  必須插入一個額外的tbody元素。 這是用於現代Web瀏覽器的花生。 向我展現一些基準測試，在這些基準測試中使用表會大大下降頁面速度。

• 沒有桌子，佈局檢修會更容易，請參見css Zen Garden 。
  大多數須要升級的網站也須要新內容（HTML）。 新版本的網站僅須要新的CSS文件的狀況不太可能發生。 Zen Garden是一個不錯的網站，可是有點理論化。 更不用說它對CSS的濫用 。

我真的對使用divs + CSS而不是表的良好參數感興趣。

---

#1樓

這是一個備受爭議的問題，這一事實證實了W3C沒法預期將要嘗試的佈局設計的多樣性。 使用divs + css進行語義友好的佈局是一個很棒的概念，可是實現的細節是如此有缺陷，以致於它們實際上限制了創做自由。

我試圖將咱們公司的一個站點從桌子切換到div，這使人頭疼，以致於我徹底放棄了我投入到表中的工做時間。 試圖與個人div搏鬥以得到對垂直對齊的控制權，使我陷入了重大的心理問題，只要這場爭論不斷，我就永遠不會動搖。

人們必須常常想出複雜而醜陋的變通方法來實現簡單的設計目標（例如垂直對齊），這一事實強烈代表，這些規則還不夠靈活。 若是規範足夠，那麼爲何備受矚目的站點（如SO）認爲有必要使用表和其餘變通辦法來彎腰規則呢？

---

#2樓

CSS / DIV-這只是設計人員的工做，不是嗎。 我花了數百個小時來調試DIV / CSS問題，在互聯網上搜索以使用晦澀的瀏覽器來得到某些標記，這使我發瘋。 您作了一點更改，整個佈局就大錯特錯了-在邏輯上，食堂在哪裏。 花費幾個小時以這種方式移動3像素，而後再移動2像素，使它們所有對齊。 這彷佛對我來講顯然是錯誤的。 僅僅由於您是一個純粹主義者而作某事是「不正確的事情」，並不意味着您應該在任何狀況下均可以使用n級，尤爲是當它使您的生活輕鬆1000倍時。

所以，我最終決定純粹是出於商業考慮，儘管我一直在儘可能減小使用，但若是我預計20個小時的工做才能正確放置DIV，我會堅持下去。 這是錯誤的，它使純粹主義者感到不安，但在大多數狀況下，它花費的時間更少且管理起來更便宜。 而後，我能夠專一於讓應用程序按照客戶的要求運行，而不是取悅純粹主義者。 畢竟，他們確實要支付帳單，而我向強制使用CSS / DIV的經理提出論點-我只是指出，客戶也要支付他的薪水！

全部這些CSS / DIV參數出現的惟一緣由是由於CSS的缺點，並且由於瀏覽器彼此不兼容，若是兼容的話，世界上一半的Web設計師都將失業。 。

當您設計Windows窗體時，不要在佈局控件後嘗試移動控件，所以我以爲對於您爲何要使用Web窗體來作到這一點我感到很奇怪。 我根本沒法理解這種邏輯。 正確地開始佈局，這是什麼問題。 我認爲這是由於設計師喜歡調情創造力，而應用程序開發人員則更關心實際使應用程序正常工做，建立業務對象，實施業務規則，肯定客戶數據之間的相互關係，確保事物知足客戶的需求。需求-就像現實世界中的東西同樣。

不要誤會個人意思，兩個參數都是有效的，可是請不要批評開發人員選擇一種更簡單，更合乎邏輯的方法來設計表單。 與在div上使用表的正確語義相比，咱們一般要擔憂的事情更重要。

案例分析-基於此討論，我將一些現有的tds和trs轉換爲div。 45分鐘的時間弄得一團糟，試圖讓全部東西彼此排成一排，我放棄了。 TD在10秒後返回-在全部瀏覽器上都可正常運行-無需執行任何操做。 請嘗試讓我理解-您但願我以其餘任何方式這樣作有什麼可能的理由！

---

#3樓

由於維護一個使用表的站點很麻煩，而且須要花費不少時間進行編碼。 若是您懼怕浮動div，請參加其中的課程。 它們並不難理解，它們的工做效率提升了約100倍，而痛苦也減小了百萬倍（除非您不理解它們-嘿，歡迎來到計算機世界）。

考慮使用表格進行佈局的任何人最好不要指望我維護它。 這是呈現網站的最粗暴的方式。 謝天謝地，咱們如今有一個更好的選擇。 我永遠不會回去。

使人恐懼的是，有些人可能沒有意識到使用現代工具建立網站所節省的時間和精力。

---

#4樓

佈局應該很容易。 事實上，有文章介紹瞭如何在CSS中使用頁眉和頁腳實現動態三列布局，這代表它是一個較差的佈局系統。 固然，您可使用它，可是實際上有數百篇有關如何執行此操做的文章。 對於表格的相似佈局，幾乎沒有此類文章，由於它顯然是顯而易見的。 不管您對錶說什麼並支持CSS，這一事實都沒法解決全部問題：CSS中基本的三列布局一般被稱爲「聖盃」。

若是那不能使您說出「 WTF」，那麼您如今真的須要放下酷玩樂隊。

我喜歡CSS。 它提供了驚人的樣式選項和一些很酷的定位工具，但做爲佈局引擎，它是不足的。 須要某種類型的動態網格定位系統。 一種無需多選框就能夠在多軸上對齊框的簡單方法。 若是您將其命名爲<table>或<gridlayout>或其餘名稱，我不會說該死的，但這是CSS所缺乏的基本佈局功能。

更大的問題是，因爲不認可缺乏某些功能，CSS狂熱分子一直在阻止CSS。 若是CSS像世界上其餘佈局引擎同樣提供了不錯的多軸網格定位，我將很是樂意中止使用表。 （您確實意識到，除了W3C以外，每一個人都已經用許多語言解決了許多問題，對嗎？沒有其餘人否定此功能頗有用。）

嘆。 足夠的排氣。 繼續前進，將頭伸回到沙灘上。

---

#5樓

我很驚訝地發現某些問題還沒有解決，所以，除了早些時候提出的全部很是有效的觀點以外，這是個人2美分：

.1。 CSS和SEO：

a）CSS過去經過容許將內容放置在頁面中的任何位置，對SEO產生很是重要的影響。 幾年前，搜索引擎很是重視「頁面上」因素。 頁面頂部的內容比頁面底部的內容與頁面更相關。 蜘蛛的「頁面頂部」表示「代碼的開頭」。 使用CSS，您能夠在代碼的開頭組織關鍵字豐富的內容，而且仍然能夠將其放置在頁面中的任何位置。 這仍然有些相關，可是頁面因素對於頁面排名愈來愈不重要。

b）當佈局移到CSS上時，HTML頁面變淺，所以對於搜索引擎蜘蛛來講加載速度更快。 （蜘蛛程序沒必要費心下載外部CSS文件）。 快速加載頁面是包括Google在內的多個搜索引擎的重要排名考慮因素

c）SEO工做一般須要測試和更改，這對於基於CSS的佈局要方便得多

.2。 生成的內容：

與等效的CSS佈局相比，以編程方式生成表要容易得多。

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

生成表既簡單又安全。 它是獨立的，能夠很好地集成到任何模板中。 要在CSS上執行相同的操做要困可貴多，並且可能根本沒有任何好處：難以在飛行中編輯CSS樣式表，而且內聯添加樣式與使用表沒有區別（內容未與佈局分開）。

此外，當生成表時，內容（在變量中）已經與佈局（在代碼中）分開，使其易於修改。

這就是爲何某些設計良好的網站（例如SO）仍然使用表格佈局的緣由之一。

固然，若是須要經過JavaScript對結果進行處理，則divs是值得的。

.3。 快速轉換測試

在肯定對特定受衆有用的內容時，可以以各類方式更改佈局以找出得到最佳效果的方法頗有用。 基於CSS的佈局使事情變得更加容易

.4。 針對不一樣問題的不一樣解決方案

一般不要使用佈局表，由於「全部人都知道divs和CSS」是解決之道。

可是，事實仍然是，與大多數CSS佈局相比，表的建立速度更快，更易於理解而且更強大。 （是的，CSS可能一樣強大，可是在不一樣的瀏覽器和屏幕分辨率下經過網絡快速瀏覽一般並不常見）

餐桌上有不少缺點，包括維護，缺少靈活性……但不要讓嬰兒洗澡時再扔水。 快速可靠的解決方案有不少專業用途。

前段時間，我不得不使用表重寫乾淨簡單的CSS佈局，由於很大一部分用戶將使用較舊版本的IE，但對CSS的支持確實不好

我一我的討厭膝蓋的反應，「哦，不！要擺放桌子！」

至於「它不是爲了這個目的，所以您不該該這樣使用」人羣，這不是僞善嗎？ 您如何看待要使大多數瀏覽器都能正常工做所需的全部CSS技巧？ 他們是爲了這個目的嗎？