DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 淺談 div 與 table 如何取捨結合利用
淺談 div 與 table 如何取捨結合利用
編輯:前端技巧     

和webpage打交道起頁面布局就一直是我關注的內容,從早期table構架頁面到DIV再到DIV+Table,可以說我們的需求一直在變,但是目的一直沒有改變。為什麼這麼說,很明顯從簡單到復雜,再從復雜到簡單;從簡單運用到復雜運用;一切都是圍繞需求性來做的。很多開發設計人員在從事頁面布局開發的時候都要考慮到幾點:布局是否合理,結構是否緊湊,是否有充分的擴展性,可讀性是否強。而合理使用Table和DIV來構架我們的web是我們探討的一個重要問題。對此要從幾個不同的方位來看待:

 

一. 定位

首先,嚴格意義來說,table和div都是可用合理的布局方法,你不能否認table的價值,或者div只有優點沒有缺點。可以說web架構即可以使用table也可以div。那麼關鍵就是你對你的web需求的定位。

 

我們需要考慮到web頁面給我們的site會帶來多大的影響。如我們的site針對的海量的訪問,海量的數據,(當然cache問題這裡不討論)那麼在構架上通常會減少table使用量,尤其是大量的循環的時候,當然table也是有用的。對於復雜的site來說,div+css有時候很難准確定義出我們所表達的內容這時候table就是很好的選擇。這也是開發前要考慮的問題,在要達到開發目的的同時保證所需要的成本。同樣用div+css來實現一個結構復雜的page時往往不如用一個table就能簡單得搞定。

 

二. 特性

table和div有其各自得特征。這也意味著他們價值取向有不同,對於開發設計的人員來說很重要的。

 

table可以很容易建立起結構化的界面,通過table自身的參數定義,我們能把頁面布局很快定義成我們所需要的效果。當然css的配合就可以相對減少。缺點就是擴展性和可讀性相對較差,擴展性差表現在維護和修正上面,一個復雜的table布局的site,她的海量頁面在隨著需求變化下,開發人員將一籌莫展,大量的修改需求會把web的界面開發工作徹底粉碎。可讀性差,這個也是相對來說,來看個例子:我們用同一效果table和div來顯示一個 page

 

----table----

<table width="300" border="0" cellspacing="0" cellpadding="0">

<tr>

<td rowspan="3" bgcolor="#FF0000"> </td>

<td> </td>

<td rowspan="3" bgcolor="#0000FF"> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

</table>

----table----

 

----div 1----

<div style="width:100px;background-color:red;"></div>

<div style="width:100px;background-color:white;">

<div></div>

<div></div>

<div></div>

</div>

<div style="width:100px;background-color:blue;"></div>

----div 1----

 

----div 2----

<div style="display:inline-table; width:300px;">

<div style="float:left; width:200px; clear:left">

<div style="display:inline-table;">

<div style="float:left;clear:left;width:100px; background-color:red;"></div>

<div style="float:right; clear:right; width:100px;">

<div></div>

<div></div>

<div></div>

</div>

</div>

</div>

<div style="float:right; width:100px; clear:right; background-color:blue;"></div>

</div>

 

----div 2----

...

 

table在表現上更加“嚴謹”,有局限性。在表現復雜的結構時會非常難懂。往往我們的website的程序內容又十分龐大,對開發人員來說要把代碼馬上從頭腦中有清晰的輪廓十分不易。

 

div呢,在html語法中我們知道div的含有和作用,如果用它來實現布局頁面的話,幾乎完全要靠css來支撐,可以說div不能單獨使用,尤其是針對性強的web,給用戶視覺上的效果要求十分嚴格,div的使用要配合專業的css參數來實現。從前面的例子可以看出div布局更加靈活,能簡單也能夠復雜。相同的顯示效果在css和div的配合上可以產生不同的搭配方式。擴展性強是她的優點,開發設計人員只要對相應的css做調整就能讓布局煥然一新,這點是table遠遠不及的。但在對結構相對復雜的局部,往往div+css開發難度高,一個簡單效果div和css要寫半天,這點table就好很多了,用dw之類的所見即所得的軟件下我們可以輕易做出用div+css寫半天才能做出的東西。

 

三. 兼容

這是每個website的一個重要課題,浏覽器的兼容問題。table和div在兼容問題中,table更具有優勢。

 

我們常用的ie,ff浏覽器對div css設置上非常挑剔,往往同一個css在2種浏覽器上會有不同的結果,對開發人員來說是個可怕的問題。我們不可能對用戶的浏覽器進行排斥,因此只有通過在開發的時候調整我們的語法和布局方法。div要求我們嚴格css支持,而table可以不用考慮這麼多。table的嚴謹在不同浏覽器中得到了很好的表現。

 

在考慮我們的定位,特征,兼容問題後,如何布局,采用何種構架方案我想大家心裡應該都很清楚了,我想說對於真正的開發者來說善用其利是最重要的理念。而不是一味偏好,或者體現自己技術能力來做開發設計工作。對於div我們可以充分發揮其靈活清晰的架構特性,配合table的嚴謹來實現各種webpage的需求。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved