2009-10-22 121 views
2

我不是CSS的專家,我知道它在一定程度上但不是很深;浮動和IE6讓我哭了。所以我總是很高興看到人們可以用它做什麼。沒有固定寬度的CSS佈局

但是,我看到的大多數示例都使用固定尺寸。據我所知,這是因爲CSS非常棘手,當元素有寬度時更容易入侵,特別是在IE6中。

但是,我非常喜歡靈活的寬度。因此,我不明白爲什麼使用表進行設計是錯誤的?有一本書叫做「你知道關於CSS的一切都是錯的!」這解釋了現在我們可以用CSS和最近的瀏覽器做表格佈局是好事情......但是,我們不能一直用HTML表格來做這件事嗎?是的,它不是CSS,也許不是那樣乾淨純粹的CSS ...但,畢竟表格佈局IS就是我們常需要的,如果我們有邪惡哈克CSS之間選擇這樣做,簡單的,但是,不可─純粹的HTML表格,我不明白爲什麼這些選擇應該被認爲是不好的。 KISS是件好事,不是嗎?

或者,也許我不明白,你可以在CSS表樣佈局 - 在IE6的工作 - 沒有的屁股太痛了?這樣的網站的任何例子?

更新:是的,我知道內容和風格分離。事實上,我對DRY,SRP和其他設計必備的東西很狂熱。這就是爲什麼我真的試圖在CSS中做的事情;但如果它比表格更難以且更不可靠,甚至像上面提到的那樣寫在書中,爲什麼這麼努力呢?我不是說所有的事情都必須在桌上完成;但如果它真的比CSS更容易 - 爲什麼我更喜歡CSS來一個簡單和可預測的解決方案?

也就是說,我並不是說你總是應該使用表格。請記住主頁面佈局 - 它是獨立的,不會影響其他頁面,我可以在20分鐘內從CSS切換到表格並返回(事實上我已經這樣做了),沒有任何問題 - 爲什麼我應該堅持使用CSS,即使表格是無害?

更新:我發現這是什麼,我想說的一個很好的總結:http://www.flownet.com/ron/css-rant.html。並討論http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments

對於那些誰是有興趣的,這裏有一個更好的文章:http://kv5r.com/articles/dev/layouttables1.asp

+0

」沒有太多的屁股疼痛?「疼痛是非常主觀的,是啊? – 2009-10-22 10:52:18

+0

不得不爲不同的瀏覽器創建和維護CSS hack,這就是我所說的痛苦,而我只能放桌子而忘了它 - 它不那麼痛苦或什麼? – queen3 2009-10-22 11:08:26

+0

已在下面的帖子中回覆了您的更新;你可以同意或不同意你的電話。 :) – 2009-10-22 11:14:00

回答

3

你基本上是對的。只要對於可訪問性,單元格的順序適合頁面,使用表格進行佈局並沒有什麼錯誤。我個人發現固定寬度的可用性惡化比表格式更糟糕。

當你使用表格佈局,確保從一開始就(其中修復的可用性問題表格佈局有一個出正確使用的樣式width: 100%; table-layout: fixed(和<col>與風格width),使瀏覽器可以擺桌子),這樣你就不會依賴IE的相當糟糕的自動佈局寬度猜測。

雖然我當然更喜歡CSS佈局儘可能,並且最簡單的站點佈局可以合理地使用CSS實現(特別是現在IE5和它的Quirky Box模型不見了),但有些情況下CSS不能破解它和表可以。常見的情況是複雜的流體寬度形式。

最重要的問題是缺乏能力說出諸如width: 100%-10em之類的東西來獲得一個列,該列是視口的寬度減去另一列的固定大小。對於簡單情況,您可以使用邊距和包裝div來解決這個問題,但是一旦開始重新排序頁面上的元素並添加多個包裝器,以使CSS佈局發揮作用,您就已經將演示文稿與內容:與表格沒有太大區別。

在最糟糕的情況下,最終會出現那些愚蠢的「CSS框架」,它們要求您使用嵌套和固定類名來完全指定標記本身內部的佈局。這根本不比桌子好;我發現這絕望的迴歸到糟糕的舊時代被認爲是一種時髦的尖端Web 2.0技術是絕對有趣的。

CSS3正在研究一些有趣的alternatives目前的定位選項,可能有一天會提供總標記和佈局分離的承諾。但今天還有很長的路要走。

4

看一看YamlFluid 960gs。這兩種功能都可以幫助你跨瀏覽器佈局。表格佈局不是答案,IE6遲早會消失。

+0

這是罕見的答案之一,是有益的,並回答我的問題;-) – queen3 2009-10-22 11:17:11

+0

YAML - 慢。 FireFox在滾動其表單示例時遇到了很大的問題。 – queen3 2009-10-22 11:38:07

+0

960看起來不錯,但似乎並不明顯易於學習。我必須進行調查,但謝謝。 – queen3 2009-10-22 11:43:43

0

你不想做一個使用表格作爲佈局是因爲設計和內容的解耦標記的原因。

您的標記應該坐下,對自己,因爲這是它的內容的完美的描述。基本上,你應該在你觸摸樣式之前在html中標記你的頁面。然後,您將使用CSS來修改默認情況下語義標記的外觀。

問題的實質是,你所設計的網頁內容不是'表格數據' - 標記是用於計算機/機器人閱讀,風格讓我們看到,混合兩者只是混淆一個或雙方通常都會增加維護成本。

1

還有一個原因是HTML表是壞的任何東西比表格數據等。 HTML是數據內容的標記語言,因此應該包含實際數據的分組,而不是該數據的佈局。 CSS旨在完全用於佈局和樣式目的;因此它的名字。因此,CSS應該包含網頁的整個外觀,而HTML包含數據的結構;永遠不會有兩個人見面。

在表格中做所有事情都是有原因的。

你應該把它看作是風格和內容之間的抽象,你可以從這裏得到很好的破敗:在直接回答http://www.alistapart.com/articles/separationdilemma/

而且你的問題轉到「列表除了」,並通過您的文章進行搜索。他們描述你將要在這裏做的旅程:http://www.alistapart.com/articles/journey/

爲什麼我更喜歡CSS來一個簡單和可預測的解決方案?

這就是我們要說的。在短期內看起來似乎更容易,但是你寫的任何東西在將來都不易維護和編輯。你可以去寫一個短期看起來更容易的網頁,但是當你想要做更多的事情時,你只是在真正地將自己刺入腳中。爲什麼不在第一時間做對? (真的只是少量的額外努力)

+1

因爲YAGNI(你不需要它)仍然適用於這裏。桌子上做起來容易得多。如果(並且只有)我不能在表格中做,我會切換到CSS(當然要求智能CSS設計者)。我不是說這應該是爲了一切;我總是嘗試使用CSS;但對於母版頁中單個實例的網站佈局,並不影響任何內容 - 爲什麼我應該打擾?我會很容易地將其轉換爲CSS,而不會影響任何內容 - 如果需要的話。但我不會做過早的優化...... CSS-zation。 – queen3 2009-10-22 11:20:01

+0

這裏有一段引用來自您的旅程鏈接:「例如,WaSP的網站一直遵循標準,並一直使用CSS來控制它的排版,但是佈局是用HTML表格完成的,所以網站可以在任何桌面上運行瀏覽器。「咦? – queen3 2009-10-22 11:25:35

+1

@ queen3旅程文檔已經有8年多了,當時面對高劑量CSS時自動點燃的瀏覽器仍然比較普遍。 – fvu 2009-10-22 11:52:48

0

這是我個人遇到的情景,我會喜歡這個分享。請注意:我並不是主張「無表格」,它確實可以滿足其他要求。

我創建了一個表格(視覺自上而下流):由於我沒有使用的表

Heading1 
Label1 Textbox1  Label2 Textbox2 

Heading2 
Label3 Dropdown3 Label4 Textbox4 
Label5 Textbox5 

Heading1 
Label1 
Textbox1 
Label2 
Textbox2 

Heading2 
Label3 
Dropdown3 
Label4 
Textbox4 
Label5 
Textbox5 

然後客戶想要一個更有條理的管狀一個這樣的TR TD排序,我可以輕鬆(幾乎)使用CSS修改和輕微的HTML標記更改來轉換結構。

+0

我的問題出於同樣的原因(除其他外),客戶想重組網站。我發現調整master page和site.css比ONLY site.css更容易。對我來說,轉換爲表格結構是一個簡單的答案。在你的情況下,我會有幾個TD與舊的ID - 所以幾乎所有的CSS仍然適用,並且很容易像新設計那樣安排桌子。而且由於頁面佈局和CSS一起工作,我不明白爲什麼我應該爭取純CSS解決方案,以便我不必觸摸HTML標記。 – queen3 2009-10-22 11:16:34

+0

@ queen3:是的,你有你的觀點。對於我的情況,我已經將標記與HTML一起編程。因此,設計人員可以在不觸及(幾乎)表單文件本身的情況下處理CSS文件。就像我說的,我並不是說CSS佈局是唯一的出路,「傳統」表格仍然可以提供更好的信心和控制感(在某些方面)。 – 2009-10-22 12:34:19

1

僅僅因爲CSS佈局對你來說是一個挑戰,那並不能使它低於表格。通過說明這一點,你犯了一個被稱爲相對主義謬誤的邏輯謬誤。

一旦你完全理解CSS,如何使用它,以及大多數不同的瀏覽器怪癖,你會發現它遠遠優於HTML表格。

標記應該是語義的。也就是說,它應該準確地描述它包含的內容。這使得它機器可讀(對於SEO和其他應用程序)。用於佈局的表格根本不是語義的。

不同層次的抽象有助於使網站更容易維護。保持HTML中的內容,Javascript中的行爲以及CSS中的表示。

雖然你說的CSS有其不足之處。但桌子有更多,這更糟糕。 「

+0

我不同意表格的佈局不是語義的。他們是 - 我想可能佈局是表格式的,頂部有3個單元格,底部有兩個單元格......這是我的佈局的語義,而不是5個div。 CSS發明了表格佈局的事實證明了這一點。實際上,我並不孤單,引用如下:「這很容易的原因是表格具有正確的佈局語義,CSS不支持」。 (c)flownet.com/ron/css-rant.html。 – queen3 2009-10-23 10:55:48

+0

是的,表格不允許重新安排CSS,所以用戶缺乏這種能力......等等......但除非我知道用戶需要這樣做(因爲我使用IE6,所以您可以對企業用戶進行映像)我爲什麼要打擾? – queen3 2009-10-23 10:57:01

+0

您可以發佈一些鏈接到您認爲在CSS中不可執行的設計嗎? HTML中的語義與您的「佈局」的「語義」無關。這是關於你的內容的語義......這是一個標題,這是一個段落,等等。一個表格是表格數據。這就是W3C規範所說的。 – 2009-10-24 01:43:16

相關問題