html製做細線表格

關於這個細線表格的製做方法，百度一下可能就會有答案告訴你設置這幾個值：給table設置border="0" cellspacing="1" bgcolor="#990033"這幾個值，還要給單元格單獨設置背景色,例如：bgcolor="#fff"。可是關於爲何要設置這幾個值，估計就沒有詳細的講解了！

那麼今天忽然想到記錄一下關於這個細線表格的原理，也是由於這幾天在給學生上基礎課，學生關於這個細線表格原理不是很明白，因此想初學者的話，估計都會遇到相似的問題，因此這裏就說一下爲何設置這幾個值。

首先咱們先看看將表格的border的值設置爲1的時候的效果，哪怕border="1",單元格之間的距離cellspacing="0",表格的粗細看起來仍是比較粗糙：

咱們再看看經過製做細線表格方法制做出來的是什麼效果：

相比之下，後面的表格更爲精緻一些。

那麼如今我先把製做細線表格的步驟概括一下：

製做細線表格的步驟：

1. 設置table的背景色(也就是視覺上表格邊框的顏色)；
2. 設置td(單元格)的背景色（視覺上整個表格的總體顏色）
3. 設置table的邊框值爲0(border=「0」)， 間距的值爲1 （ cellspacing=「1」，使table的背景色透過這個間距顯示出來，成爲視覺上的邊框 ）。

分析：table的背景色其實就是細線表格視覺上看起來的細線，由於咱們將border設置爲0，而且單元格之間的間距cellspacing設置爲1了，那麼table的背景色就是透過這一像素的空隙透出來的顏色，給單元格設置背景色，就是爲了和table的背景色區分開來。爲了更好理解，我這裏用圖片分析一下：

一、假設下面的表格border="1",顯示以下：

二、當設置單元格間距cellspacing="0"時，兩個1像素的邊線挨在一塊兒，就會顯得邊框很粗：

因此不能經過border="1"來設置細線效果

那我咱們用細線方法來製做原理以下：

若是本文對您有幫助，記得推薦哦