在web開發(fā)中，設(shè)置table邊框是再常見不過的事情了，但通常都是怎么去實(shí)現(xiàn)的呢？

今天剛好和一位朋友在msn上探討了這個(gè)問題，簡(jiǎn)單做如下總結(jié)：

1.定義table的cellpadding設(shè)置為0,cellspacing設(shè)置為1，然后根據(jù)table和td背景色的不同給人的感覺就像表格的邊框一樣；這樣不失為一種不錯(cuò)的方法，但有時(shí)候我們需要將這些屬性轉(zhuǎn)移到css中，以便實(shí)現(xiàn)HTML Tags和css style的分離,這樣就顯得不很友好了。

2.索性將table的cellpadding,cellspacing都設(shè)置為0,直接在td中定義border,主要是利用邊框的缺失拼起來的；這樣做可以將樣式都分離到css中，但不好的一點(diǎn)是設(shè)置太過復(fù)雜，我們會(huì)將一個(gè)td設(shè)置1到2種樣式。

3.在css中定義td的border-top,border-left(當(dāng)然只要是水平和垂直方向上都可以),然后在定義table的邊框，注意一定是要和td設(shè)置的對(duì)應(yīng)，這樣可以完全的實(shí)現(xiàn)屬性定義和css的分離。

4.先將table的cellspacing設(shè)置為0,然后設(shè)置td的border-spacing:1px;和border就可以了。

雖然第三，和四種方法看起來不錯(cuò)，但也算是寫了額外的處理，我們還是寄希望于w3c早日指定出一套更規(guī)范的屬性來控制table邊框。

第一種方案：

第二種方案：

第三種方案：

第四種方案：

因?yàn)槔锩娴臉邮脚c站點(diǎn)樣式可能有點(diǎn)沖突，因此第一種方案會(huì)顯示的不正確，大家可以到這里查看效果。

該文章在 2010/8/13 21:33:21 編輯過