web開發中如何合理使用div與table

這篇文章主要介紹了web開發中如何合理使用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的需求。

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