欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS美化表格边框汇总与效果(转载)

程序员文章站 2022-06-09 15:34:32
...
<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美化表格边框汇总与效果(转载)
            
    
    博客分类: css css表格美化 

 

 

相关标签: css表格美化