表格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>

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