關(guān)于這個(gè)細(xì)線表格的制作方法，百度一下可能就會(huì)有答案告訴你設(shè)置這幾個(gè)值：給table設(shè)置border="0" cellspacing="1" bgcolor="#990033"這幾個(gè)值，還要給單元格單獨(dú)設(shè)置背景色,例如：bgcolor="#fff"。但是關(guān)于為什么要設(shè)置這幾個(gè)值，估計(jì)就沒(méi)有詳細(xì)的講解了！
那么今天突然想到記錄一下關(guān)于這個(gè)細(xì)線表格的原理，也是因?yàn)檫@幾天在給學(xué)生上基礎(chǔ)課，學(xué)生關(guān)于這個(gè)細(xì)線表格原理不是很明白，所以想初學(xué)者的話，估計(jì)都會(huì)遇到類似的問(wèn)題，所以這里就說(shuō)一下為什么設(shè)置這幾個(gè)值。
首先我們先看看將表格的border的值設(shè)置為1的時(shí)候的效果，哪怕border="1",單元格之間的距離cellspacing="0",表格的粗細(xì)看起來(lái)還是比較粗糙：
我們?cè)倏纯赐ㄟ^(guò)制作細(xì)線表格方法制作出來(lái)的是什么效果：
相比之下，后面的表格更為精致一些。
那么現(xiàn)在我先把制作細(xì)線表格的步驟歸納一下：
制作細(xì)線表格的步驟：
- 設(shè)置table的背景色(也就是視覺(jué)上表格邊框的顏色)；
- 設(shè)置td(單元格)的背景色（視覺(jué)上整個(gè)表格的整體顏色）
- 設(shè)置table的邊框值為0(border=“0”)， 間距的值為1 （ cellspacing=“1”，使table的背景色透過(guò)這個(gè)間距顯示出來(lái)，成為視覺(jué)上的邊框 ）。
分析：table的背景色其實(shí)就是細(xì)線表格視覺(jué)上看起來(lái)的細(xì)線，因?yàn)槲覀儗order設(shè)置為0，并且單元格之間的間距cellspacing設(shè)置為1了，那么table的背景色就是透過(guò)這一像素的空隙透出來(lái)的顏色，給單元格設(shè)置背景色，就是為了和table的背景色區(qū)分開(kāi)來(lái)。為了更好理解，我這里用圖片分析一下：
1、假設(shè)下面的表格border="1",顯示如下：
2、當(dāng)設(shè)置單元格間距cellspacing="0"時(shí)，兩個(gè)1像素的邊線挨在一起，就會(huì)顯得邊框很粗：
所以不能通過(guò)border="1"來(lái)設(shè)置細(xì)線效果
那我我們用細(xì)線方法來(lái)制作原理如下：
如果本文對(duì)您有幫助，記得推薦哦
原文地址：http://www.cnblogs.com/xcaocao/p/5643351.html