Div與table的區別

2021-09-05 22:55:09 字數 2319 閱讀 9466

div與table的區別

1:速度和載入方式方面的區別

div

和table 的差異不是速度,而是載入方式,速度只能是指網路速度,如果速度足夠快,是沒有差異的:

div

的載入方式是即讀即載入,遇到沒有遇到

的時候一樣載入div 中的內容,讀多少載入多少;table 的載入方式是完成後載入,遇到後,在讀到

之前,table 中的內容不載入,或者傳輸中斷了(document.onload()事件)的時候載入,這是因為table牽涉到多行多列問題,所以只有當table所有內容載入完畢,ie才知道該怎麼顯示

2:在網頁應用中的差別

如果頁面首尾加table ,那麼必須等整個頁面讀完了才載入

如果頁面首尾加div ,無任何影響

3:div

與table

布局在大型**的可用性比較

div

與table本身並不存在什麼優缺點,所謂web標準只是推薦的是正確的使用標籤,好比說:div用於布局,而table則本來就是轉二維資料的。讓table做該做的事,並不是說頁面裡不出現table就是多麼多麼牛。

用div進行排版的優勢就是我不說,大家應該都比較清楚。div是標準,是大勢所趨,但並不意味著所有的頁面都適合用它來做。

為什麼div不適合他們?下面我從幾個方面來逐一說明:

精簡**:

大家都說div的布局精簡**,但是用div替代table所節約的**又被css(樣式)所占用,而這些樣式大多用於控制div的排版布局。那你會說了,css可以放在外部重用啊,要想得到這個問題的答案請往下看。

通訊:統一的樣式表檔案採用外部呼叫的形式,這樣每次載入單個頁面都會多一次對伺服器的http請求伺服器都會增加一次響應,這樣對前端web伺服器 會是很大的消耗。而原來很長時間都是將css和js寫在頁面前端(大家可以看看sohu和sina的頁面,大多都是採用這樣的形式),而不是作為外部呼叫 的形式,也是為了盡量避免給伺服器增加消耗。

頁面快取:

相容性:

對於css(樣式表)並不是所有瀏覽器的所有版本都支援的很好,比如ie5以前的瀏覽器對於css的支援就不是很好。而現在使用ie5以前版本 瀏覽器的使用者不在少數,這樣就使得在頁面製作的過程中需要針對不同瀏覽器版本進行測試,以保證相容性,無形中也增加很多任務作量(至少我接觸的開發人員製作div頁面比table頁面的標準時間要長一些)。

橫切與延展性:

橫切——

以上我們只是討論某一技術在某一領域的可用性,而非技術本身。

說了這麼多並不是說div這種布局方式不好,而是說我們應該正確的看待table在以內容為基礎的大型門戶中的作用,而不是人云亦云。之所以div的布局方式沒有在大型**應用,不是說門戶沒有用div是技術落後,是裡面的人沒有前瞻性,而是多種原因決定的。網易之所以全部採用div的方式是因為內容並不是他們主攻方向。而對於其他門戶來說,這樣的決策是要靠時間來驗證的。只是現在這個時機還不成熟而已。

4:div+css

而現在我認為div +css並不是字面上的含義那麼簡單,而有兩重內在含義:

1、結構與表現分離,用div完成結構,用css控制表現,這樣帶來的好處非常多,div精簡了頁面,提高了靈活性。而精通css的設計師能避免div的重複巢狀,從而大大提高頁面載入速度,以及站點的可以維護性。

2、選用div 來配合css的原因,css 的核心是

「盒子模型

」,而沒有哪個標籤能比div更好的詮釋

「盒子模型

」的精髓,table的結構過於複雜,並不能很好的做到這一點,雖然table+css也是一種選擇,但別忘了div還有另外乙個優勢,浮動層疊,而且用table進行布局的**是不能通過w3c驗證的。

在我親身經驗中,使用div+css的團隊,與使用table+css的團隊相比,工期縮短30%-50%。

Div 與 table 的區別

1 速度和載入方式方面的區別 div 和 table 的差異不是速度,而是載入方式,速度只能是指網路速度,如果速度足夠快,是沒有差異的 div 的載入方式是即讀即載入,遇到 沒有遇到 的時候一樣載入 div 中的內容,讀多少載入多少 table 的載入方式是完成後載入,遇到 後,在讀到 之前,tab...

Div 與 table 的區別

一.速度和載入方式方面的區別 div 和 table 的差異不是速度,而是載入方式,速度只能是指網路速度,如果速度足夠快,是沒有差異的 div 的載入方式是即讀即載入,遇到 沒有遇到 的時候一樣載入 div 中的內容,讀多少載入多少 table 的載入方式是完成後載入,遇到 後,在讀到 之前,tab...

Div與table的區別

1 速度和載入方式方面的區別 div 和 table 的差異不是速度,而是載入方式,速度只能是指網路速度,如果速度足夠快,是沒有差異的 div 的載入方式是即讀即載入,遇到 沒有遇到 的時候一樣載入 div 中的內容,讀多少載入多少 table 的載入方式是完成後載入,遇到 後,在讀到 之前,tab...