DIV+CSS和Table區別

衆所周知,這(DIV+CSS和Table)兩種語句都經常被開發人員使用了來控制界面顯示,但是這兩種語法也有很大的不同,下面分別從這兩種語句的優缺點進行分析:


一、製作效率

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

 

二、瀏覽器的兼容問題

tablediv在兼容問題中,table更具有優勢。

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

 

三、擴展性和可讀性

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

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

 

四、Tablediv佈局都有各自的優缺點,Div佈局的優點:

1、大大縮減頁面代碼,提高頁面瀏覽速度,縮減帶寬成本;
2、結構清晰,容易被搜索引擎搜索到,天生優化了seo
3、縮短改版時間。只要簡單的修改幾個CSS文件就可以重新設計一個有成百上千頁面的站點。
4、強大的字體控制和排版能力。CSS控制字體的能力比糟糕的FONT標籤好多了,有了CSS,我們不再需要用FONT標籤或者透明的1 px GIF圖片來控制標題,改變字體顏色,字體樣式等等。
5、CSS非常容易編寫。你可以象寫html代碼一樣輕鬆地編寫CSS。
6、提高易用性。使用CSS可以結構化HTML,例如:<p>標籤只用來控制段落,heading標籤只用來控制標題,table標籤只用來表現格式化的數據等等。你可以增加更多的用戶而不需要建立獨立的版本。
7、可以一次設計,隨處發佈。你的設計不僅僅用於web瀏覽器,也可以發佈在其他設備上,比如PowerPoint。
8、更好的控制頁面佈局。
9、表現和內容相分離。將設計部分剝離出來放在一個獨立樣式文件中,你可以減少未來網頁無效的可能。
10、更方便搜索引擎的搜索。用只包含結構化內容的HTML代替嵌套的標籤,搜索引擎將更有效地搜索到你的內容,並可能給你一個較高的評價(ranking)。
11、Table 佈局靈活性不大,你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 還可以 ul li ……但標準語法最好有序的寫。
12、另外如果你不是javascript的高手,你可以不必去寫ID,只用class就可以。當客戶端程序員寫完程序,需要調整時候,你可以在利用他的ID進行控制。
13、Table 中佈局中,垃圾代碼會很多,一些修飾的樣式及佈局的代碼混合一起,很不利於直觀。而Div 更能體現樣式和結構相分離,結構的重構性強。
14、在幾乎所有的瀏覽器上都可以使用。

15、以前一些非得通過圖片轉換實現的功能,現在只要用CSS就可以輕鬆實現,從而更快地下載頁面。

16、使頁面的字體變得更漂亮,更容易編排,使頁面真正賞心悅目。

17、你可以輕鬆地控制頁面的佈局 。


五、總結:

對於公司經常製作的中小型企業網站,大家可以先試着用div+table去做,這只是一個過渡期。你會發現這個時期做起來比純table和純div+css去做要快很多。兩種做法的優缺點都可以很好的互補。熟練後,可以用div去做下。另外w3c之所以推出div+css,其目的就是爲了提高執行效率,優化程序,由原有的HTMLXML過度,作爲長遠的發展.div肯定是勝過table的。

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