為什麼您應該避免使用網頁佈局表格

CSS是構建網頁設計的最佳方式

學習編寫CSS佈局可能會非常棘手,特別是如果您熟悉使用表格來創建奇特的網頁佈局。 但是,雖然HTML5允許表格佈局,但這不是一個好主意。

表格無法訪問

就像搜索引擎一樣,大多數屏幕閱讀器按照它們在HTML中顯示的順序閱讀網頁。 屏幕閱讀器可能很難分析表格。 這是因為表格佈局中的內容雖然是線性的,但在從左到右和從上到下閱讀時並不總是有意義的。 另外,嵌套表格和表格單元格上的各種跨度可能會使頁面非常難以理解。

這就是HTML5規范建議針對錶格進行佈局的原因,以及為什麼HTML 4.01不允許。 可訪問的網頁允許更多人使用它們,並且是專業設計師的標誌。

使用CSS,您可以將一個部分定義為屬於頁面的左側,但將其最後放置在HTML中。 然後屏幕閱讀器和搜索引擎都會先讀取重要部分(內容),然後再讀取重要部分(導航)。

表是棘手的

即使您使用網頁編輯器創建表格,您的網頁仍然非常複雜且難以維護。 除了最簡單的網頁設計之外,大多數佈局表格都需要使用很多屬性和嵌套表格。

在做這件事時建立桌子看起來很容易,但是你需要保持它。 六個月後,記住為什麼嵌套表格或連續排列多少個單元格可能並不那麼容易,等等。 另外,如果你作為團隊成員維護網頁,你必須向每個人解釋這些表格是如何工作的,或者希望他們在需要進行修改時需要額外的時間。

CSS也可能很複雜,但它使得演示文稿與HTML分開,並且從長遠來看更容易維護。 另外,通過CSS佈局,您可以編寫一個CSS文件,並按照這種方式設置所有頁面的樣式。 而當你想改變你的網站的佈局時,你只需要改變一個CSS文件,整個網站就會改變 - 不再一次遍歷每個頁面來更新表格來更新佈局。

表是不靈活的

雖然可以使用百分比寬度創建表格佈局,但它們通常加載速度較慢,並且可能會顯著改變佈局的外觀。 但是,如果您為表格使用指定的寬度,則最終得到的佈局非常僵硬,在尺寸與您自己的大小不同的顯示器上看起來不太好。

在許多顯示器,瀏覽器和分辨率上創建靈活的佈局很容易。 事實上,通過CSS媒體查詢,您可以為不同大小的屏幕創建單獨的設計。

對於相同設計,嵌套表格比CSS緩慢

使用表格創建花哨佈局的最常見方法是“嵌套”表格。 這意味著一個(或多個)表格被放置在另一個表格內。 嵌套的表越多,Web瀏覽器呈現頁面所用的時間就越長。

在大多數情況下,表格佈局比CSS設計使用更多的字符來創建。 字符越少意味著下載次數越少。

表可能會損害搜索引擎優化

最常見的表格創建佈局的頁面左側有一個導航欄,右側有主要內容。 在使用表格時,這(通常)要求在HTML中顯示的第一個內容是左側導航欄。 搜索引擎根據內容對頁面進行分類,許多引擎確定顯示在頁面頂部的內容比其他內容更重要。 因此,首先使用左側導航的網頁會顯示內容不如導航重要。

使用CSS,您可以將重要內容放在HTML中,然後使用CSS確定它應該放置在設計中的位置。 這意味著即使設計將其放在頁面上,搜索引擎也會首先看到重要內容。

表格不總是打印良好

許多桌子設計打印不好,因為打印機太寬。 所以,為了使它們合適,瀏覽器會關閉表格並打印下面的部分,從而導致非常不連貫的頁面。 有時你會看到好看的頁面,但整個右側都不見了。 其他頁面將打印各種頁面上的部分。

使用CSS,您可以創建一個單獨的樣式表來打印頁面。

佈局表格在HTML 4.01中無效

HTML 4規範指出:“表格不應純粹用作佈局文檔內容的手段,因為這可能會在渲染到非可視媒體時出現問題。”

所以,如果你想編寫有效的HTML 4.01,你不能使用表格進行佈局。 您應該只使用表格來表格數據。 表格數據通常看起來像您可能在電子表格或可能的數據庫中顯示的內容。

但HTML5改變了規則,現在用於佈局的表格雖然不被推薦,但現在是有效的HTML。 HTML5規範聲明:“表不應該用作佈局幫助。”

正如我上面提到的,因為佈局表格難以讓屏幕閱讀器區分。

使用CSS來定位和佈局頁面是唯一有效的HTML 4.01方法,可用於獲取用於使用表格創建的設計。 HTML5也強烈推薦這種方法。

佈局表可能會影響您的工作前景

隨著越來越多的新設計師學習HTML和CSS,你在構建表格佈局方面的技能將越來越少。 是的,客戶通常不會告訴您應該使用確切的技術來構建他們的網頁。 但他們確實會問你這樣的事情:

如果你不能提供客戶要求的東西,他們會停止向你尋求設計,可能不是今天,但可能在明年或者一年之後。 你真的能夠承受讓你的業務遭受損失嗎?因為你不願意開始學習自20世紀90年代末以來一直在使用的技術?

道德:學會使用CSS

CSS可能很難學,但值得付出的努力值得。 不要讓自己的技能停滯不前。 學習CSS並按照他們的意圖構建您的網頁 - 使用CSS進行佈局。