div和table 用作佈局的 區別

本文向大家描述一下DIV和Table頁面佈局的區別和聯繫,一般來說Table開發快,容易控制,瀏覽器兼容也好些,另一部分認爲DIV好,是以後的發展趨勢,主要原因請看下文詳細介紹。

DIV佈局和Table頁面佈局的區別和聯繫

現在對於網頁製作是選擇傳統的Table還是用新型的DIV,有分歧。一部分說還是用Table好,開發快,容易控制,瀏覽器兼容也好些;另一部分認爲DIV好,以後的發展趨勢,主要是如下原因:

DIV+CSS佈局比Table佈局節省頁面代碼,代碼結構也更清晰明瞭。

DIV+CSS開發速度要比Table快,而且佈局更精確,不過手寫代碼明顯增加DIV+CSS佈局,使網站版面佈局修改變的更簡單。

DIV+CSS佈局能夠適應未來多種客戶端需求。

DIV+CSS佈局節約站點所佔空間和站點流量。這些都是DIV的好處。

DIV有這麼多好處是不是有些心動,決定學它。DIV佈局和Table各有長處,通常情況下它們可以互換使用。

使用DIV等佈局元素來製作頁面的設計佈局,定位,色塊,圖片等。使用Table,UL等這樣的元素來顯示頁面中需要展示的數據。因爲DIV不會像Table一樣,在IE下要將整個Table下載完後才全部顯示內容(firefox不會),所以用Table來佈局顯然是不合適的,尤其是數據量大時,在IE下用Table會發現慢的多。而DIV就好多了。當然,DIV也起整理數據的作用。

DIV用於佈局,Table用於顯示數據,這是現在最基本的設計原則。

1:Table裏可以內嵌DIV。反之DIV可以內嵌Table嗎??

當然可以了。

◆DIV定義

表示一塊可顯示HTML的區域。

SpecifiesacontainerthatrendersHTML.

註釋

此元素在InternetExplorer3.0及以上版本的HTML中可用,在InternetExplorer4.0及以上版本的腳本中可用。

此元素是塊元素。

此元素需要關閉標籤。

示例代碼

下面的例子使用了兩個DIV元素對兩段文字進行了不同的對齊處理。

  1. <DIV> 
  2. 此文本代表一段。可以在這裏放你的HTML或文本  
  3. </DIV> 
  4. <DIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGN=CENTER> 
  5. 此文本代表另外一段,其中文本居中顯示。  
  6. </DIV> 
  7.  

DIV本身就是容器性質的,你不但可以內嵌Table還可以內嵌文本和其它的HTML代碼。

2:DIV是不是跟Table一樣的作用?

DIV的作用跟Table是差不多的,但是DIV對xml的支持更好而且使用起來比較靈活,因此被推薦爲新的網頁佈局方式。

3:DIVTable哪個速度快?

DIV相對比較快,網頁內容的顯示需要將相對一整塊的內容下載完成後再顯示。使用DIV佈局是許多的獨立的相對較小的範圍,而使用Table佈局一般都會表格嵌套多層形成較大的下載範圍。


文章出自:http://blog.sina.com.cn/s/blog_66ea0e280100ribg.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章