和webpage打交道起頁(yè)面布局就一直是我關(guān)注的內(nèi)容，從早期table構(gòu)架頁(yè)面到DIV再到DIV＋Table，可以說(shuō)我們的需求一直在變，但是目的一直沒(méi)有改變。為什么這么說(shuō)，很明顯從簡(jiǎn)單到復(fù)雜，再?gòu)膹?fù)雜到簡(jiǎn)單；從簡(jiǎn)單運(yùn)用到復(fù)雜運(yùn)用；一切都是圍繞需求性來(lái)做的。很多開發(fā)設(shè)計(jì)人員在從事頁(yè)面布局開發(fā)的時(shí)候都要考慮到幾點(diǎn)：布局是否合理，結(jié)構(gòu)是否緊湊，是否有充分的擴(kuò)展性，可讀性是否強(qiáng)。而合理使用Table和DIV來(lái)構(gòu)架我們的web是我們探討的一個(gè)重要問(wèn)題。對(duì)此要從幾個(gè)不同的方位來(lái)看待：

一. 定位

首先，嚴(yán)格意義來(lái)說(shuō)，table和div都是可用合理的布局方法，你不能否認(rèn)table的價(jià)值，或者div只有優(yōu)點(diǎn)沒(méi)有缺點(diǎn)?？梢哉f(shuō)web架構(gòu)即可以使用table也可以div。那么關(guān)鍵就是你對(duì)你的web需求的定位。

我們需要考慮到web頁(yè)面給我們的site會(huì)帶來(lái)多大的影響。如我們的site針對(duì)的海量的訪問(wèn)，海量的數(shù)據(jù)，（當(dāng)然cache問(wèn)題這里不討論）那么在構(gòu)架上通常會(huì)減少table使用量，尤其是大量的循環(huán)的時(shí)候，當(dāng)然table也是有用的。對(duì)于復(fù)雜的site來(lái)說(shuō)，div+css有時(shí)候很難準(zhǔn)確定義出我們所表達(dá)的內(nèi)容這時(shí)候table就是很好的選擇。這也是開發(fā)前要考慮的問(wèn)題，在要達(dá)到開發(fā)目的的同時(shí)保證所需要的成本。同樣用div+css來(lái)實(shí)現(xiàn)一個(gè)結(jié)構(gòu)復(fù)雜的page時(shí)往往不如用一個(gè)table就能簡(jiǎn)單得搞定。

二. 特性

table和div有其各自得特征。這也意味著他們價(jià)值取向有不同，對(duì)于開發(fā)設(shè)計(jì)的人員來(lái)說(shuō)很重要的。

table可以很容易建立起結(jié)構(gòu)化的界面，通過(guò)table自身的參數(shù)定義，我們能把頁(yè)面布局很快定義成我們所需要的效果。當(dāng)然css的配合就可以相對(duì)減少。缺點(diǎn)就是擴(kuò)展性和可讀性相對(duì)較差，擴(kuò)展性差表現(xiàn)在維護(hù)和修正上面，一個(gè)復(fù)雜的table布局的site，她的海量頁(yè)面在隨著需求變化下，開發(fā)人員將一籌莫展，大量的修改需求會(huì)把web的界面開發(fā)工作徹底粉碎?？勺x性差，這個(gè)也是相對(duì)來(lái)說(shuō)，來(lái)看個(gè)例子：我們用同一效果table和div來(lái)顯示一個(gè) 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在表現(xiàn)上更加“嚴(yán)謹(jǐn)”，有局限性。在表現(xiàn)復(fù)雜的結(jié)構(gòu)時(shí)會(huì)非常難懂。往往我們的website的程序內(nèi)容又十分龐大，對(duì)開發(fā)人員來(lái)說(shuō)要把代碼馬上從頭腦中有清晰的輪廓十分不易。

div呢，在html語(yǔ)法中我們知道div的含有和作用，如果用它來(lái)實(shí)現(xiàn)布局頁(yè)面的話，幾乎完全要靠css來(lái)支撐，可以說(shuō)div不能單獨(dú)使用，尤其是針對(duì)性強(qiáng)的web，給用戶視覺(jué)上的效果要求十分嚴(yán)格，div的使用要配合專業(yè)的css參數(shù)來(lái)實(shí)現(xiàn)。從前面的例子可以看出div布局更加靈活，能簡(jiǎn)單也能夠復(fù)雜。相同的顯示效果在css和div的配合上可以產(chǎn)生不同的搭配方式。擴(kuò)展性強(qiáng)是她的優(yōu)點(diǎn)，開發(fā)設(shè)計(jì)人員只要對(duì)相應(yīng)的css做調(diào)整就能讓布局煥然一新，這點(diǎn)是table遠(yuǎn)遠(yuǎn)不及的。但在對(duì)結(jié)構(gòu)相對(duì)復(fù)雜的局部，往往div+css開發(fā)難度高，一個(gè)簡(jiǎn)單效果div和css要寫半天，這點(diǎn)table就好很多了，用dw之類的所見(jiàn)即所得的軟件下我們可以輕易做出用div+css寫半天才能做出的東西。

三. 兼容

這是每個(gè)website的一個(gè)重要課題，瀏覽器的兼容問(wèn)題。table和div在兼容問(wèn)題中，table更具有優(yōu)勢(shì)。

我們常用的ie，ff瀏覽器對(duì)div css設(shè)置上非常挑剔，往往同一個(gè)css在2種瀏覽器上會(huì)有不同的結(jié)果，對(duì)開發(fā)人員來(lái)說(shuō)是個(gè)可怕的問(wèn)題。我們不可能對(duì)用戶的瀏覽器進(jìn)行排斥，因此只有通過(guò)在開發(fā)的時(shí)候調(diào)整我們的語(yǔ)法和布局方法。div要求我們嚴(yán)格css支持，而table可以不用考慮這么多。table的嚴(yán)謹(jǐn)在不同瀏覽器中得到了很好的表現(xiàn)。

在考慮我們的定位，特征，兼容問(wèn)題后，如何布局，采用何種構(gòu)架方案我想大家心里應(yīng)該都很清楚了，我想說(shuō)對(duì)于真正的開發(fā)者來(lái)說(shuō)善用其利是最重要的理念。而不是一味偏好，或者體現(xiàn)自己技術(shù)能力來(lái)做開發(fā)設(shè)計(jì)工作。對(duì)于div我們可以充分發(fā)揮其靈活清晰的架構(gòu)特性，配合table的嚴(yán)謹(jǐn)來(lái)實(shí)現(xiàn)各種webpage的需求。