[DreamWeaver教程] DW打造细线表格

乌龙

如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000")，表格线其实是2px的，要做细线表格，有三种方法：
　　1.在Dreamweaver中按Ctrl+Alt+T(或者在菜单栏单击“插入”－“表格”)，弹出插入表格的对话框，参数设置如图(带红框项为固定值，否则无效果)：

2008-2-19 13:29

以上设置意义为：边框粗细＝0，单元格间距＝1
其中单元格间距为单元格到表格边框间的距离

选中表格，在属性面板中设置表格的背景颜色：

2008-2-19 13:29

光标定位到第一个单元格里，按住Shift键单击最后一个单元格，全选所有单元格，然后在属性面板中设置所有单元格的颜色：

2008-2-19 13:29

这两步的含义是：表格设置黑色背景，单元格设置白色背景。单元格看上去是白色的，又因为单元格与单元格、单元格与表格之间有1px的间距，这个间距内可以看到表格的颜色（黑色），形成细边框。

完成后效果如图：

2008-2-19 13:29

乌龙

其实细线表格的方法有很多，但兼容性最好的就是以上这种。处于易学易用考虑，在此不介绍其他方法。

另外，使用css可以减少以上方法的代码：

1. 
   
2. <style>
   
3. .thin{background:#000000}
   
4. .thin td{background:#FFFFFF}
   
5. </style>
   
6. <table width="200" border="0" cellspacing="1" cellpadding="0" class="thin">
   
7. <tr>
   
8. <td> </td>
   
9. <td> </td>
   
10. <td> </td>
    
11. </tr>
    
12. <tr>
    
13. <td> </td>
    
14. <td> </td>
    
15. <td> </td>
    
16. </tr>
    
17. <tr>
    
18. <td> </td>
    
19. <td> </td>
    
20. <td> </td>
    
21. </tr>
    
22. </table>

复制代码

乌龙

现在开始扩展：

如果要让整个页面的表格都变成细线表格，那要怎么做？

答案当然是css：

刚才对table进行css控制用的是
.thin
.thin td
现在我们直接对全局进行控制：
table {}
td {}

看明白了吗？不明白的话请阅读：http://bbs.bianews.com/thread-20657-1-2.html

1. 
   
2. <style>
   
3. table {background:#000000;border:0px;padding:1px;}
   
4. td {background:#FFFFFF}
   
5. </style>
   
6. <table width="200">
   
7. <tr>
   
8. <td> </td>
   
9. <td> </td>
   
10. <td> </td>
    
11. </tr>
    
12. <tr>
    
13. <td> </td>
    
14. <td> </td>
    
15. <td> </td>
    
16. </tr>
    
17. <tr>
    
18. <td> </td>
    
19. <td> </td>
    
20. <td> </td>
    
21. </tr>
    
22. </table>

复制代码

[ 本帖最后由 乌龙 于 2008-2-19 13:53 编辑 ]

啊野

学习一下常营网(常营社区)发来祝福www.ichangying.com