CSS 使用table布局網頁是不明智

2022-09-25 14:24:11 字數 2872 閱讀 6661

使用table布局頁面為什麼是不明智的?

大家看到標題,不要誤解認為在頁面中不能使用table,而是可以使用table,但是盡量不要用t程式設計客棧able去布局頁面,為什麼這麼說呢,因為使用t程式設計客棧able布局頁面會使頁面失去靈活性,怎麼個靈活法呢,比如今天你好不容易做出來的頁面,第二天老闆說我不喜歡登入模組放到右邊,還是放到左邊,通知板塊放到右側去,頁面風格最好乙個月換一種,如果遇到這種老闆,提出這種要求,並且你的頁面是用table布局的,那麼你會崩潰的,工作量那是大大滴~,如果不相信的話,你們自己可以找個頁面,用table布局出來,然後變換板塊和風格,你就會體會到table布局的不靈活性,這是為什麼呢,因為table的誕生是為儲存資料用的,功能和execel差不多,不是用來布局用的,只不過後來大家發現用table可以把想放的頁面元素,比如,放到任何自己想放的地方,且做出來的頁面可以相容多種瀏程式設計客棧覽器,於是table就承擔起了布局頁面的重擔,這一做就是好幾年... ...直到web2.0時代的到來,table才從布局頁面的工作中逐漸解脫,專心的去儲存資料^_^

既然table是為儲存資料誕生的,那誰的誕生是為了頁面布局呢?

答案就是:div,div就是為布局頁面而誕生的,只不過一直不被人認同,原因就是div去布局頁面需要css的配合,使用比較繁瑣,還不如table拖拖拽拽頁面就布局ok了,感覺還不如table方便,從而div被人們放置在乙個無人問津的昏暗角落裡,暗暗的等待著伯樂的出現,直到2023年美國加州scott design公司參加了在舊金山舉辦的有關網頁排版和設計的乙個研討會上的演講,使div看到了陽光,走出了陰霾... ...

說了那麼多,我們對比一下table布局頁面和div布局頁面的優缺點

使用**進行頁面布局會帶來很多問題:

* 把格式資料混入你的內容中。這使得檔案的大小無程式設計客棧謂地變大,而使用者訪問每個 頁面時都必須**一次這樣的格式資訊,頻寬並非免費。

* 這使得重新設計現有的站點和內容極為消耗勞力 (且昂貴)。

* 這還使我們保持整個站點的視覺的一致性極難,花費也極高。

* 基於**的頁面還大大降低了它對殘疾人和用手機或 pda 瀏覽者的親和力。

而使用css進行網頁布局,它會:

* 使你的頁面載入得更快

* 降低你的流量費用

* 讓你在修改設計時更有效率而代價更低

* 幫助你的整個站點保持視覺的一致性

* 讓你的站點可以更好地被搜尋引擎找到

* 使你的站點對瀏覽者和瀏覽器更具親和力

* 在世界上越來越多人採用 web 標準時,它還能 提高你的職場競爭實力 (事實上也就是降低失業的風險)。

網上有一篇文章,轉過來,文章著重介紹div三點優勢,也許看完文章後,就像社群元老heflyaway說的感覺作者比較迷戀table,每篇文章都不可避免的帶有個人色彩,而轉出來的目的,其實就是想給大家降降div+css的溫度,免得「走火入魔」,視div+css是為萬能的,如果想學好css布局頁面,就要從多個方面看它,好了,不多說了,下面是作者對css布局頁面的三點優勢及理解:

1、內容和形式分離,網頁前台只需要顯示內容就行,形式上的美工交給css來處理。生成的html檔案**精簡,更小開啟更快。

2、改版**更簡單容易了,不用重新設計排版網頁,甚至於不用動原**的任何html和程式頁面,只需要改動css檔案就完成了所有改版。對於門戶**來說改版就像換件衣服一樣簡單容易。

3、搜尋引擎更友好,排名更容易靠前。

第一點、內容和形式分離

網頁前台只需要顯示內容就行,形式上的美工交給css來處理。生成的html檔案**精簡,更小開啟更快。

這個是div+css技術最顯著的特點,也是css存在的根源。完全的顛覆現在傳統(table)網頁設計的技術。所有現在用table製作的內容,都可以用css來解決掉,而且解決的更完美,更強大。不需要大家再**套**,讓生成的網頁檔案大小更精簡,更小。table時代,乙個頁面**達到10個以上是非常普遍的事情,但是現在用div+css,乙個table都可以不用,就完全達到之前的效果,這就直接導致網頁檔案大小比使用table時減少50%-80%,更節約各位站長的硬碟空間,訪問者開啟網頁時更快,而且用div+css時,不像以往使用table時,必須把全部table讀取完了才顯示頁面內容,現在是可以讀乙個div就顯示乙個效果,大家開啟網頁不用等。好處真是明顯而強大。

這個優點的確是顯著的,凡是使用傳統table建的網頁,內容多的話,有時候達到30k左右都有可能,檔案打了開啟時,肯定就有0.0幾秒的延遲。使用div+css,你前台開啟看到的全是直接內容,css檔案都是匯入鏈結的,是另乙個檔案,根本和html檔案大小沒關係,這種生成的html檔案,乙個也就10k左右大小。

第二點,改版**更簡單容易了

不用重新設計排版網頁,甚至於不用動原**的任何html和程式頁面,只需要改動css檔案就完成了所有改版。

div+css對於門戶**來說改版就像換件衣服一樣簡單容易,改版時,不用改動全站html頁面,只需要重新寫css,再用新css覆蓋以前的css就可以實現改版了。方便吧。

第三點,搜尋引擎更友好,確實能夠對seo起到一定的幫助。

通過div+css對網頁的布局,可以讓一些重要的鏈結、文字資訊,優先讓搜尋引擎蜘蛛爬取。這對於seo也有幫助。

綜上所述,個人感覺div+css不能太迷信它的很好很強大,它作為製作網頁,美化網頁的乙個重要輔助是很強大方便的。可以彌補table製作框架和**時的很多不足和美工上的缺點,但是完全只用它來做,太費時費力,對於全國中小型**長來說,真的不太適合。我個人覺得用table+div+css是最好的組合,也是最省時省力的辦法。

還需要再說明一下,本節講得是table布局頁面和css布局頁面的問題,討論的是「布局頁面」上用誰更好,並不是說在css布局的頁面內不能用table,真正厲害的人物是div、table、css用得恰到好處,他們三個各做各的事情,div布局頁面,table儲存資料,css給頁面穿衣服!

本文標題: css 使用table布局網頁是不明智

本文位址: /web/css/29236.html

網頁布局 table布局

table 的特性決定了它非常適合用來做布局,並且 中的內容可以自動居中,這是之前用的特別多的一種布局方式 而且也加入了display table dispaly table cell來支援 teble 布局。1.簡單布局 1 doctype html 2 html lang en 3 head 4...

如何使用table布局靜態網頁

html lang en width 100 cellpadding 0 cellspacing 0 align center width 100 align center width 100 align center bgcolor orange align center height 35 hr...

CSS網頁布局中div和table超出寬度自動換行

自動換行問題,正常字元的換行是比較合理的,而連續的數字和英文本元常常將容器撐大,挺讓人頭疼,在52css.com中不乏這方面的文章,現在總結一下css如何實現換行的方法,只要在css中定義了如下句子,可保網頁不會再被撐開了。對於div,p等塊級元素 正常文字的換行 亞洲文字和非亞洲文字 元素擁有預設...