[總結]細線表格製做技巧－表格邊框樣式設置集錦

關鍵字:細線表格 表格技巧 細線表格代碼 CSS細線表格
摘要:看到很多朋友在問細線表格如何設置,雖然簡單,偶仍是總結一下拿出來,也方便新手學習。缺陷失誤之處請你們指點.看的朋友若是有其餘的實現方法,也但願能發佈到這裏,謝謝!

不知道怎麼發佈html執行後的樣子，全是代碼，真不直觀，會的朋友指點下，謝謝！
暫時，能夠先把下面的代碼拷貝到記事本，保存，而後再修改擴展名爲html，打開，這樣看比較直觀。

< style >
* { font-size:90%;}
font { color:#0000CC;}
</style>
< font >下面的細線表格是用cellspacing來實現的，用表格的背景色作爲邊框的顏色。 </font>不方便的是每一行都要再設置一個背景色。
<table width="400" border="0" cellspacing="1" cellpadding="0"
bgcolor="#000000">
     < tr bgcolor ="#006600" >
         < td >  </td>
         < td >  </td>
         < td >  </td>
     </tr>
     < tr bgcolor ="#FFFFFF" >
         < td >  </td>
         < td >  </td>
         < td >  </td>
     </tr>
</table>
< br />
< font >下面的細線表格是設置bordercolordark來實現的 </font>，由於默認的border其實寬度是2，即便設置爲1也沒用，bordercolorlight和bordercolordark一塊兒做爲表格的邊框。因此設置其中一個爲背景色，表格邊框看起來就會細一些。
<table width="400" border="1" cellspacing="0" cellpadding="0"    
bordercolor="#000000" bordercolordark="#FFFFFF">
     < tr bgcolor ="#006600" >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
</table>
< br />
< font >下面的表格是用css來實現的。 </font> < br />
css技巧比較多，列舉幾種：
A：設置border="1"、bordercolor，再加上style="border-collapse:collapse;"。style裏面的內容就是css。
<table width="400" border="1" bordercolor="#000000" cellspacing="0"
cellpadding="0" style="border-collapse:collapse;">
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
</table>
< br />
B：這個用css來設置邊框，結果只顯示錶格的最外層邊線。裏面的線不顯示。
<table width="400" cellspacing="0" cellpadding="0"    
style="border:#000000 1px solid;">
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
</table>
< br />
C: 若是你想要頁面的全部表格都是細線表格，也不用一個一個去設置。由於這裏是演示用，因此加上了id，你用的時候直接
在head裏面加上style標籤，裏面寫 table {border-collapse:collapse;} td {border:#000000 1px solid;}，全部該頁的table就都是細線了。
< style >
#tab1 {border-collapse:collapse;}
#tab1 td {border:#000000 1px solid;}
</style>
< table id ="tab1" width ="400" >
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
</table>
< br />
< br />

< font >表格邊框控制的其餘方法(rules和frame)： </font> < br />說明： < br />
一、這兩個屬性有時候設置會看不到做用，這是由於與表格邊框的css設置衝突。因此說若是須要這些效果，而且還須要細線，那就用下面的方式來實現即設置這三個屬性，border="1" bordercolor="#000000" style="border-collapse:collapse;"，而後再設置rules和frame，若是你測試到有其餘的方法，但願能發佈出來和你們共享。 < br />
二、下面的效果只是我列舉出來作演示用的，靈活設置這些屬性能夠作出更多效果。 < br />
rules="cols"的效果（中間的橫線沒有了）
<table width="400" border="1" bordercolor="#000000"    
style="border-collapse:collapse;" rules="cols">
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
</table>
< br />
frame="void"的效果（外邊線沒有了）
<table width="400" border="1" bordercolor="#000000"    
style="border-collapse:collapse;" frame="void">
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
</table>
< br />
rules和frame結合的效果(frame="hsides" rules="rows"，只留下橫線)
<table width="400" border="1" bordercolor="#000000"    
style="border-collapse:collapse;" frame="hsides" rules="rows">
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
     < tr >
         < td >  </td>
         < td >  </td>
     </tr>
</table>

轉至 [url]http://www.cnblogs.com/lgamoy/archive/2006/11/20/565695.html[/url]