从制造到创造
软件工程师成长之路
posts - 249,  comments - 96,  trackbacks - 0
教程: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 
 
 
 
 
 
 
 
 
posted on 2008-02-03 15:09 CoderDream 阅读(5445) 评论(0)  编辑  收藏 所属分类: CSS

只有注册用户登录后才能发表评论。


网站导航:
 

<2008年2月>
272829303112
3456789
10111213141516
17181920212223
2425262728291
2345678

常用链接

留言簿(9)

我参与的团队

随笔分类(245)

随笔档案(239)

文章分类(3)

文章档案(3)

收藏夹(576)

友情链接

搜索

  •  

积分与排名

  • 积分 - 430093
  • 排名 - 118

最新评论

阅读排行榜

评论排行榜