表格table常见的边框设置和初步的立体效果

做网页时经常会遇到表格，常见的表格如下：

 <style type="text/css">
     .tbtest0
     {
         width:500px;
         height:200px;
         border:1px solid #331067;
     }
     .tbtest0 td
     {
         border:1px solid #331067;
     }
     </style> 

 <table   class="tbtest0">
 <tr><td></td><td></td><td></td></tr>
 <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>

这样出来的效果是：

显然这并不是我们需要用的，需要增加样式让边框变成单线，常见的有3种方法：

方法1、通过table和td不同的背景色来设置：

  <style type="text/css">
     .tbtest1
     {
         width:500px;
         height:200px;
         background:#7731DF; 

     }
     .tbtest1 td
     {
         background:#fff;
     }
     </style>

 <table  cellspacing="1"   class="tbtest1">
 <tr><td></td><td></td><td></td></tr>
 <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>

这里 cellspacing="1" 值为多少边框就会是多宽，  看结果：

方法2、通过指定td的左边框和上边框  + table的右边框和下边框来实现：

 <style type="text/css">
      .tbtest2
     {
         width:500px;
         height:200px;
         border-right:1px solid #F00;
         border-bottom:1px solid #F00;
     }
     .tbtest2 td
     {
         border-left:1px solid #F00;
         border-top:1px solid #F00
     }
     </style>

 <table cellspacing="0" class="tbtest2">
 <tr><td></td><td></td><td></td></tr>
 <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>

这里要加上cellspacing="0" 不然tdd的右下角会接不上， 效果：

方法3、通过table的border-collapse 来实现：

 <style type="text/css">
     .tbtest3
     {
         width:500px;
         height:200px;
         border:1px solid #000;
         border-collapse:collapse;
     }
     .tbtest3 td
     {
          border:1px solid #000;
     }
     </style>

 <table  class="tbtest3">
 <tr><td></td><td></td><td></td></tr>
 <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>

这个不需要指定cellspacing，   效果：

以上就是3种处理表格边框的方法，  合理利用可以做出一些有意思的东西，  比如方法2，可以做立体效果， 我这里简单弄个，本人审美不怎么样，初略的展示下：

就像墙上的瓷砖，  代码如下：

 <style>
     .tbtest4
     {
         width:500px;
         height:300px;
         border-right:1px solid #C1C1C1;
         border-bottom:1px solid #C1C1C1;
         cellspacing:0;
         cellpadding:0;
      }
     .tbtest4 td
     {
         border-left:3px solid #E9E9E9;
         border-top:3px solid #E9E9E9;
         border-right:2px solid #C1C1C1;
         border-bottom:2px solid #C1C1C1;
         background:#DDDDDB;
     }

     </style>

 <table  cellspacing="0"  class="tbtest4">
 <tr><td></td><td></td><td></td></tr>
 <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>

好了   就这些  ~   （出不去了，字只能打这里）