web開發(fā)中如何合理使用div與table

這篇文章主要介紹了web開發(fā)中如何合理使用div與table，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

一. 定位

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

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

二. 特性

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

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

div呢，在html語法中我們知道div的含有和作用，如果用它來實(shí)現(xiàn)布局頁面的話，幾乎完全要靠css來支撐，可以說div不能單獨(dú)使用，尤其是針對(duì)性強(qiáng)的web，給用戶視覺上的效果要求十分嚴(yán)格，div的使用要配合專業(yè)的css參數(shù)來實(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之類的所見即所得的軟件下我們可以輕易做出用div+css寫半天才能做出的東西。

三. 兼容

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“web開發(fā)中如何合理使用div與table”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!