CSS美化表格边框汇总与效果

CSS美化表格边框汇总与效果
教程: CSS修饰表格

代码:
< html >
    
< head >
        
< title > 用css美化表格边框 </ title >
        
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
        
< style >
            .table1 
{  
                border
: #000000 dashed ;
                border-width
: 1 0 0 1 
                
}
            .td1 
{  
                border
: #000000 dashed ;
                border-width
: 0 1 1 0 
                
}
            .table2 
{  
                border
: #cc0000 solid ;
                border-width
: 1 0 0 1 ;
                background
: #ffffff 
                
}
            .td2 
{  
                border
: #cc0000 solid ;
                border-width
: 0 1 1 0 
                
}
            .table3 
{
                border
: green dotted ;
                border-width
: 2 0 0 2 
                
}
            .td3 
{  
                border
: green dotted ;
                border-width
: 0 2 2 0 
                
}
            .table4 
{  
                border
: blue solid ; border-width : 2 1 1 2 
            
}
            .td4 
{  
                border
: blue solid ; border-width : 0 1 1 0 
            
}
            .table5 
{  
                border
: teal 4 double 
            
}
            .td5 
{  
                border
: teal 1 solid 
                
}
            .table6 
{  
                border
: 3 outset 
                
}
            .td6 
{  
                border
:  1 solid 
                
}
            .table7 
{  
                border
: 3 inset 
                
}
            .td7 
{  
                border
: 1 solid 
                
}
            .table8 
{
                border
: #ee0000 3 ridge 
                
}
            .td8 
{  
                border
: 1 solid 
                
}  

            .table9 
{  
                border
:  4 skyblue ridge 
                
}
            .td9 
{  
                border
: 1 navy groove  ;
                background
: #ffffff 
                
}

            .td10 
{  
                border
: maroon 3 double 
                
}

            .table11 
{
                border
: purple 4  ; border-style : dashed double
            
}
            .td11 
{  
                border
: 1 solid 
                
}

            .out 
{  
                border-width
: 1 ;
                border-style
: solid ;
                border-color
: #cccccc #333333 #333333 #cccccc 
                
}
            .in 
{  
                border-width
: 1 ;
                border-style
: solid ;
                border-color
: #333333 #cccccc #cccccc #333333 ;
                background
: #ffcccc 
                
}
        
</ style >
    
</ head >
    
< body  bgcolor ="#FFFFFF"  text ="#000000" >
        
< div  align ="center" >  
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table1" >
                
< tr  >  
                    
< td  class ="td1" > 1 &nbsp; </ td >
                    
< td  class ="td1" > &nbsp; </ td >
                    
< td  class ="td1" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td1" > &nbsp; </ td >
                    
< td  class ="td1" > &nbsp; </ td >  
                    
< td  class ="td1" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td1" > &nbsp; </ td >
                    
< td  class ="td1" > &nbsp; </ td >
                    
< td  class ="td1" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table2" >
                
< tr  >  
                
< td  class ="td2" > 2 &nbsp; </ td >
                
< td  class ="td2" > &nbsp; </ td >
                
< td  class ="td2" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td2" > &nbsp; </ td >
                
< td  class ="td2" > &nbsp; </ td >
                
< td  class ="td2" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td2" > &nbsp; </ td >
                
< td  class ="td2" > &nbsp; </ td >  
                
< td  class ="td2" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table3" >
                
< tr  >  
                
< td  class ="td3" > 3 &nbsp; </ td >
                
< td  class ="td3" > &nbsp; </ td >
                
< td  class ="td3" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td3" > &nbsp; </ td >
                
< td  class ="td3" > &nbsp; </ td >
                
< td  class ="td3" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td3" > &nbsp; </ td >
                
< td  class ="td3" > &nbsp; </ td >
                
< td  class ="td3" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table4" >  
                
< tr  >  
                
< td  class ="td4" > 4 &nbsp; </ td >
                
< td  class ="td4" > &nbsp; </ td >
                
< td  class ="td4" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td4" > &nbsp; </ td >
                
< td  class ="td4" > &nbsp; </ td >
                
< td  class ="td4" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td4" > &nbsp; </ td >
                
< td  class ="td4" > &nbsp; </ td >
                
< td  class ="td4" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table5" >
                
< tr  >  
                
< td  class ="td5" > 5 &nbsp; </ td >
                
< td  class ="td5" > &nbsp; </ td >
                
< td  class ="td5" > &nbsp; </ td >
                
</ tr >  
                
< tr >  
                
< td  class ="td5" > &nbsp; </ td >
                
< td  class ="td5" > &nbsp; </ td >
                
< td  class ="td5" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td5" > &nbsp; </ td >
                
< td  class ="td5" > &nbsp; </ td >
                
< td  class ="td5" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table6" >
                
< tr  >  
                
< td  class ="td6" > 6 &nbsp; </ td >
                
< td  class ="td6" > &nbsp; </ td >
                
< td  class ="td6" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td6" > &nbsp; </ td >
                
< td  class ="td6" > &nbsp; </ td >
                
< td  class ="td6" > &nbsp; </ td >
                
</ tr >  
                
< tr >  
                
< td  class ="td6" > &nbsp; </ td >
                
< td  class ="td6" > &nbsp; </ td >
                
< td  class ="td6" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table7" >
                
< tr  >  
                
< td  class ="td7" > 7 &nbsp; </ td >
                
< td  class ="td7" > &nbsp; </ td >
                
< td  class ="td7" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td7" > &nbsp; </ td >
                
< td  class ="td7" > &nbsp; </ td >
                
< td  class ="td7" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td7" > &nbsp; </ td >
                
< td  class ="td7" > &nbsp; </ td >
                
< td  class ="td7" > &nbsp; </ td >
                
</ tr >  
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table8" >
                
< tr  >  
                
< td  class ="td8" > 8 &nbsp; </ td >
                
< td  class ="td8" > &nbsp; </ td >
                
< td  class ="td8" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td8" > &nbsp; </ td >
                
< td  class ="td8" > &nbsp; </ td >
                
< td  class ="td8" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td8" > &nbsp; </ td >
                
< td  class ="td8" > &nbsp; </ td >
                
< td  class ="td8" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="1"  cellpadding ="0"  border ="0"  class ="table9" >
                
< tr  >  
                
< td  class ="td9" > 9 &nbsp; </ td >
                
< td  class ="td9" > &nbsp; </ td >
                
< td  class ="td9" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td9" > &nbsp; </ td >
                
< td  class ="td9" > &nbsp; </ td >
                
< td  class ="td9" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td9" > &nbsp; </ td >
                    
< td  class ="td9" > &nbsp; </ td >
                    
< td  class ="td9" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="2"  cellpadding ="0"  border ="0" >
                
< tr  >  
                    
< td  class ="td10" > 10 &nbsp; </ td >
                    
< td  class ="td10" > &nbsp; </ td >
                    
< td  class ="td10" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td10" > &nbsp; </ td >  
                    
< td  class ="td10" > &nbsp; </ td >
                    
< td  class ="td10" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                
< td  class ="td10" > &nbsp; </ td >
                
< td  class ="td10" > &nbsp; </ td >
                
< td  class ="td10" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table11" >
                
< tr  >  
                
< td  class ="td11" > 11 &nbsp; </ td >
                
< td  class ="td11" > &nbsp; </ td >
                
< td  class ="td11" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td11" > &nbsp; </ td >
                    
< td  class ="td11" > &nbsp; </ td >
                    
< td  class ="td11" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td11" > &nbsp; </ td >  
                    
< td  class ="td11" > &nbsp; </ td >
                    
< td  class ="td11" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  border ="0"  cellspacing ="1"  cellpadding ="0"  style ="border:#cc0000 1 solid"   >
                
< tr >
                
< td >
                    
< table  width ="100%"  height ="100%"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table2" >
                        
< tr  >  
                            
< td  class ="td2" > 12 &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                        
</ tr >
                        
< tr >  
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                        
</ tr >
                        
< tr >  
                            
< td  class ="td2" > &nbsp; </ td >  
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                        
</ tr >
                    
</ table >
                
</ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  border ="0"  cellspacing ="3"  cellpadding ="0"  style ="border:#cc0000 1 solid"  background ="back.jpg" >
                
< tr >  
                    
< td >  
                        
< table  width ="100%"  height ="100%"  cellspacing ="0"  cellpadding ="0"  border ="0"  class ="table2" >
                        
< tr  >  
                            
< td  class ="td2" > 13 &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                        
</ tr >
                        
< tr >  
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >  
                        
</ tr >
                        
< tr >  
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                            
< td  class ="td2" > &nbsp; </ td >
                        
</ tr >
                        
</ table >
                    
</ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  cellspacing ="2"  cellpadding ="0"  border ="0"  style ="border:1 navy solid"  background ="back.jpg" >
                
< tr  >  
                    
< td  class ="td9" > 14 &nbsp; </ td >
                    
< td  class ="td9" > &nbsp; </ td >
                    
< td  class ="td9" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td9" > &nbsp; </ td >
                    
< td  class ="td9" > &nbsp; </ td >
                    
< td  class ="td9" > &nbsp; </ td >
                
</ tr >
                
< tr >  
                    
< td  class ="td9" > &nbsp; </ td >
                    
< td  class ="td9" > &nbsp; </ td >  
                    
< td  class ="td9" > &nbsp; </ td >
                
</ tr >
            
</ table >
            
< p > &nbsp; </ p >
            
< table  width ="500"  border ="0"  cellspacing ="3"  cellpadding ="0" >
                
< tr >  
                
< td >  
                    
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                        
< tr >  
                            
< td  class ="in" > 15 &nbsp; </ td >
                        
</ tr >
                    
</ table >
                
</ td >
                
< td >  
                    
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                        
< tr >  
                            
< td  class ="in" > &nbsp; </ td >
                        
</ tr >
                    
</ table >
                
</ td >
                
< td >  
                    
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >  
                        
< tr >  
                            
< td  class ="in" > &nbsp; </ td >
                        
</ tr >
                    
</ table >
                
</ td >
                
</ tr >
                
< tr >  
                    
< td >  
                        
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                            
< tr >  
                                
< td  class ="in" > &nbsp; </ td >
                            
</ tr >
                        
</ table >
                    
</ td >
                    
< td >  
                        
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                            
< tr >  
                                
< td  class ="in" > &nbsp; </ td >
                            
</ tr >
                        
</ table >
                    
</ td >
                    
< td >  
                        
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                            
< tr >  
                                
< td  class ="in" > &nbsp; </ td >  
                            
</ tr >
                        
</ table >
                    
</ td >
                
</ tr >
                
< tr >  
                    
< td >  
                        
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                            
< tr >  
                                
< td  class ="in" > &nbsp; </ td >
                            
</ tr >
                        
</ table >
                    
</ td >
                    
< td >  
                        
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                            
< tr >  
                                
< td  class ="in" > &nbsp; </ td >
                            
</ tr >
                        
</ table >
                    
</ td >
                    
< td >  
                        
< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  height ="100%"  class ="out" >
                            
< tr >  
                                
< td  class ="in" > &nbsp; </ td >
                            
</ tr >
                        
</ table >
                    
</ td >
                
</ tr >  
            
</ table >
        
</ div >
    
</ body >
</ html >  


效果:

   
     
     

 

   
     
     

 

   
     
     

 

   
     
     

 

   
     
     

 

   
     
     

 

   
     
     

 

   
     
     

 

   
     
     

 

10     
     
     

 

11     
     
     

 

12     
     
     

 

13     
     
     

 

14     
     
     

 

15 
 
 
 
 
 
 
 
 

你可能感兴趣的:(CSS美化表格边框汇总与效果)