table與css和div的之間的對比

二．p+css簡介

“p+CSS”其實是錯誤的叫法，而標準的叫法應是XHTML+CSS。因為p與Table都是XHTML或HTML語言中的一個標記，而CSS只是一種表現形式。

p +CSS有兩重內在含義：

1、結構與表現分離，用p完成結構，用CSS控制表現，這樣帶來的好處非常多，p精簡了頁面，提高了靈活性。而精通CSS的設計師能避免p的重復嵌套，從而大大提高頁面加載速度，以及站點的可以維護性。
2、選用p 來配合CSS的原因，CSS 的核心是 “盒子模型”，而沒有哪個標簽能比p更好的詮釋“盒子模型”的精髓，TABLE的結構過于復雜，并不能很好的做到這一點，雖然TABLE+CSS也是一種選擇，但別忘了p還有另外一個優勢，浮動層疊，而且用TABLE進行布局的網站是不能通過W3C驗證的。

2.1 p簡介

2.2 css簡介

CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用于描述網頁上的信息格式化和現實的方式。CSS樣式可以直接存儲于HTML網頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規則。外部使用時，樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。

樣式規則是可應用于網頁中元素，如文本段落或鏈接的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式單直接放在網頁中，外部樣式單保存在獨立的文檔中，網頁通過一個特殊標簽鏈接外部樣式單。

名稱CSS中的“層疊（cascading）”表示樣式單規則應用于HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優先級由CSS根據這個層次結構決定，從而實現級聯效果。

三．Table與p+css的區別

1：速度和加載方式方面的區別
p 的加載方式是即讀即加載，遇到 <p> 沒有遇到 </p> 的時候一樣加載 p 中的內容，讀多少加載多少；table 的加載方式是完成后加載，遇到 <table> 后，在讀到 </table> 之前，table 中的內容不加載，或者傳輸中斷了(document.onload()事件)的時候加載，這是因為TABLE牽涉到多行多列問題,所以只有當TABLE所有內容加載完畢,IE才知道該怎么顯示
2：在網頁應用中的差別
　　如果頁面首尾加 table ，那么必須等整個頁面讀完了才加載
　　如果頁面首尾加 p ，無任何影響
3：p與Table布局在大型網站的可用性比較
p與TABLE本身并不存在什么優缺點，所謂web標準只是推薦的是正確的使用標簽，好比說:p用于布局，而TABLE則本來就是轉二維數據的。讓TABLE做該做的事，并不是說頁面里不出現TABLE就是多么多么牛。

4：制作效率

我想沒人反對表格的制作效率要高于p的效率。很明顯p布局代碼全部都要手寫。即使你在熟悉代碼，也沒有 Dreamweaver生成來的快吧！所以Table可以很容易建立起結構化的界面，通過table自身的參數定義，我們能把頁面布局很快定義成我們所需要的效果。

5：瀏覽器的兼容問題

table和p在兼容問題中，table更具有優勢。

我們常用的IE6.0，IE7.0火狐Firefox瀏覽器對p css設置上非常挑剔，往往同一個css在2種瀏覽器上會有不同的結果，對設計制作人員來說是個可怕的問題。我們不可能對用戶的瀏覽器進行排斥和統一化，因此只有通過在制作的時候調整我們的語法和布局方法。p要求我們嚴格css支持，而table可以不用考慮這么多。table的嚴謹在不同瀏覽器中得到了很好的表現。

6：擴展性和可讀性

Table的擴展性和可讀性都是很差的，擴展差表現在維護和修正上面。p不用重新設計排版網頁，甚至于不用動原網站的任何HTML和程序頁面，只需要改動CSS文件就完成了所有改版。而Table則需要一個頁面一個頁面的更改需要變動的地方。

而可讀性table基本上是沒有的，誰能從一大堆代碼里面看的出哪是標題哪是正文。全部是<table><tr><td></td></tr></table>。還一個障礙便是當table容器內內容過多時，使頁面的加載時間增加，因為瀏覽器首先要加載<table> 標簽，而在加載到</table>之前，table里的內容不會顯示。

四．Table與p+css的優缺點

table優點：開發時間短（使用DW開發速度快）；純table各瀏覽器不會有兼容問題；內容可自適應；在搜索引擎排名能靠前

table缺點：如果布局變更，需要重新開發；如果table里有p ul 等，可能會出現瀏覽器兼容問題；加載速度慢；table套table，維護復雜

p優點：內容和顯示分離，便于維護擴展，網頁布局方便，當需求改變的時候，效果最明顯

使用p的方法布局網頁框架的優點：可以通過css樣式給框架進行功能強大的屬性設置以及給網頁的局部進行任意的定位，制作出來的頁面瀏覽速度較快，同時頁面的風格可以通過修改單獨的css文件進行隨意的修改和更新；缺點：每個p容器都需要定義css樣式來控制，制作過程相比table方式要復雜。現在的網頁越來越傾向于使用p的方法來布局網頁了。

CSS＋p網站設計的優勢

首先，CSS的極大優勢表現在簡潔的代碼，對于一個大型網站來說，可以節省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼（其真正意義在于，增加了有效關鍵詞占網頁總代碼的比重），因此使用CSS＋p的web標準制作的網站具有搜索引擎友好的一定優勢。

其次，CSS+p制作的網站使得網站改版相對簡單，很多問題只需要改變CSS而不需要改動程序，從而降低了網站改版的成本。

CSS＋p網站設計的劣勢

第一，對于CSS的高度依賴使得網頁設計變得比較復雜。相對于HTML4.0中的表格布局（table），CSS+p盡管不是高不可及，但至少要比表 格定位復雜的多，即使對于網站設計高手也很容易出現問題，更不要說初學者了，這在一定程度上影響了XHTML網站設計語言的普及應用。

第二，CSS文件異常將影響整個網站的正常瀏覽。CSS網站制作的設計元素通常放在幾個l外部文件中，這一個或幾個文件有可能相當復雜，甚至比較龐大，如果CSS文件調用出現異常，那么整個網站將變得慘不忍睹。

第三，對于CSS網站設計的瀏覽器兼容性問題比較突出。基于HTML4.0的網頁設計在IE4.0之后的版本中幾乎不存在瀏覽器兼容性問題，但 CSS+p設計的網站在IE瀏覽器里面正常顯示的頁面，到火狐瀏覽器（FireFox ）中卻可能面目全非（這也是為什么建議網絡營銷人員使用火狐瀏覽器的原因所在 ）。CSS+p還有待于各個瀏覽器廠商的進一步支持。

用過p+css作個整個網站，如果是純粹的p的布局是比較麻煩的，尤其是你p里面嵌套p的，p布局的時候，你有些頁面效果還是要舍棄 一點的，比如圖片的圓角，這些如果套p比較麻煩，在一個p在VS2005設計器里面可能變形，如果過多的套p，你實現ajax拖動效果的時候 比較麻煩，所以我覺得眼下還是p+嵌套table比較好。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com