網頁設計：如何設計細線條的表格

l         若是僅僅是定義表格的邊框爲1(border="1")和邊框顏色值(如borderColor="#000000")，表格線實際上是2px的，要作細線表格，有三種方法：

　　1.在Dreamweaver中按Ctrl+Alt+T，彈出插入表格的對話框，參數設置如圖(帶紅框項爲固定值，不然無效果)：

　　選中表格，在屬性面板中設置表格的背景顏色：

　　光標定位到第一個單元格里，按住Shift鍵單擊最後一個單元格，全選全部單元格，而後在屬性面板中設置全部單元格的顏色：

 

完成後效果如圖：

評價：
優勢：簡單
缺點：在單元格內容爲空的時候會缺少美觀：
  

　　2.利用表格的暗邊框(bordercolordark)和亮邊框(bordercolorlight)屬性作的細線表格：
仍是按Ctrl+Alt+T插入表格，在對話框中設置如圖(帶紅框項爲固定植，不然無效果)

　　選中表格後按F9，展開"Tag Inspector"面板組，在"Attributes"面板中設置如圖：

　　完成後如圖：

評價：
優勢：不會出如今單元格內容爲空時「掉線」的問題，可使用cellspadding
缺點：不能利用cellspacing作其餘事，一般狀況下必須先指定<table bgcolor="your color">，後限定<td bgcolor=#ffffff></td>

　　3.設置表格的CSS屬性border-collapse爲collapse：按Ctrl+Alt+T插入表格，對話框的設置同法2。選中表格，在屬性面板中設置表格的邊框顏色：

　　按F9展開"Tag Inspector"面板，在"Attributes"面板中的"style"裏填入"border-collapse:collapse;"

　　完成後如圖：

評價：
優勢：css使用起來更簡單
缺點：同上，另外是兼容性問題：法3所做的細線表格只適用於IE5+，兼容性最好的是法1，法二並非嚴格意義上的細線表格。

技巧：法1中能夠用CSS定義表格單元格的背景顏色，以減小代碼量：

<style>
.thin{background:#000000}
.thin td{background:#FFFFFF}
</style> <table width="200" border="0" cellspacing="1"cellpadding="0" class="thin"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>