zoukankan      html  css  js  c++  java
  • 表格样式

    <html>
    <head>
    <title>用css美化表格边框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    .table1{border:#000000 dashed;border-1 0 0 1}
    .td1{border:#000000 dashed;border-0 1 1 0}
    .table2{border:#cc0000 solid;border-1 0 0 1;background:#ffffff}
    .td2{border:#cc0000 solid;border-0 1 1 0}
    .table3{border:green dotted;border-2 0 0 2}
    .td3{border:green dotted;border-0 2 2 0}
    .table4{border:blue solid;border-2 1 1 2}
    .td4{border:blue solid;border-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-1;border-style:solid;border-color:#cccccc #333333 #333333 #cccccc}
    .in{border-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> </td>
    <td class="td1"> </td>
    <td class="td1"> </td>
    </tr>
    <tr> 
    <td class="td1"> </td>
    <td class="td1"> </td>
    <td class="td1"> </td>
    </tr>
    <tr> 
    <td class="td1"> </td>
    <td class="td1"> </td>
    <td class="td1"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table2">
    <tr > 
    <td class="td2"s> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    <tr> 
    <td class="td2"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    <tr> 
    <td class="td2"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table3">
    <tr > 
    <td class="td3"s> </td>
    <td class="td3"> </td>
    <td class="td3"> </td>
    </tr>
    <tr> 
    <td class="td3"> </td>
    <td class="td3"> </td>
    <td class="td3"> </td>
    </tr>
    <tr> 
    <td class="td3"> </td>
    <td class="td3"> </td>
    <td class="td3"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table4">
    <tr > 
    <td class="td4"> </td>
    <td class="td4"> </td>
    <td class="td4"> </td>
    </tr>
    <tr> 
    <td class="td4"> </td>
    <td class="td4"> </td>
    <td class="td4"> </td>
    </tr>
    <tr> 
    <td class="td4"> </td>
    <td class="td4"> </td>
    <td class="td4"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table5">
    <tr > 
    <td class="td5"> </td>
    <td class="td5"> </td>
    <td class="td5"> </td>
    </tr>
    <tr> 
    <td class="td5"> </td>
    <td class="td5"> </td>
    <td class="td5"> </td>
    </tr>
    <tr> 
    <td class="td5"> </td>
    <td class="td5"> </td>
    <td class="td5"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table6">
    <tr > 
    <td class="td6"> </td>
    <td class="td6"> </td>
    <td class="td6"> </td>
    </tr>
    <tr> 
    <td class="td6"> </td>
    <td class="td6"> </td>
    <td class="td6"> </td>
    </tr>
    <tr> 
    <td class="td6"> </td>
    <td class="td6"> </td>
    <td class="td6"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table7">
    <tr > 
    <td class="td7"> </td>
    <td class="td7"> </td>
    <td class="td7"> </td>
    </tr>
    <tr> 
    <td class="td7"> </td>
    <td class="td7"> </td>
    <td class="td7"> </td>
    </tr>
    <tr> 
    <td class="td7"> </td>
    <td class="td7"> </td>
    <td class="td7"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table8">
    <tr > 
    <td class="td8"> </td>
    <td class="td8"> </td>
    <td class="td8"> </td>
    </tr>
    <tr> 
    <td class="td8"> </td>
    <td class="td8"> </td>
    <td class="td8"> </td>
    </tr>
    <tr> 
    <td class="td8"> </td>
    <td class="td8"> </td>
    <td class="td8"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="1" cellpadding="0" border="0" class="table9">
    <tr > 
    <td class="td9"> </td>
    <td class="td9"> </td>
    <td class="td9"> </td>
    </tr>
    <tr> 
    <td class="td9"> </td>
    <td class="td9"> </td>
    <td class="td9"> </td>
    </tr>
    <tr> 
    <td class="td9"> </td>
    <td class="td9"> </td>
    <td class="td9"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="2" cellpadding="0" border="0">
    <tr > 
    <td class="td10"> </td>
    <td class="td10"> </td>
    <td class="td10"> </td>
    </tr>
    <tr> 
    <td class="td10"> </td>
    <td class="td10"> </td>
    <td class="td10"> </td>
    </tr>
    <tr> 
    <td class="td10"> </td>
    <td class="td10"> </td>
    <td class="td10"> </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="0" cellpadding="0" border="0" class="table11">
    <tr > 
    <td class="td11"> </td>
    <td class="td11"> </td>
    <td class="td11"> </td>
    </tr>
    <tr> 
    <td class="td11"> </td>
    <td class="td11"> </td>
    <td class="td11"> </td>
    </tr>
    <tr> 
    <td class="td11"> </td>
    <td class="td11"> </td>
    <td class="td11"> </td>
    </tr>
    </table>
    <p> </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"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    <tr> 
    <td class="td2"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    <tr> 
    <td class="td2"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <p> </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"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    <tr> 
    <td class="td2"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    <tr> 
    <td class="td2"> </td>
    <td class="td2"> </td>
    <td class="td2"> </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <p> </p>
    <table width="500" cellspacing="2" cellpadding="0" border="0" style="border:1 navy solid" background="back.jpg">
    <tr > 
    <td class="td9"> </td>
    <td class="td9"> </td>
    <td class="td9"> </td>
    </tr>
    <tr> 
    <td class="td9"> </td>
    <td class="td9"> </td>
    <td class="td9"> </td>
    </tr>
    <tr> 
    <td class="td9"> </td>
    <td class="td9"> </td>
    <td class="td9"> </td>
    </tr>
    </table>
    <p> </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"> </td>
    </tr>
    </table>
    </td>
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr> 
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr> 
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    <td> 
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
    <tr> 
    <td class="in"> </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    弹窗拖拽组件开发应用
    高级事件的运用
    常见排序算法(JS版)
    原生js实现仿window10系统日历效果
    原生js实现吸顶导航和回到顶部特效
    OVN实战---《The OVN Gateway Router》翻译
    OVN实战---《An Introduction to OVN Routing》翻译
    OVN实战---《A Primer on OVN》翻译
    深入理解CNI
    《CNI specification》翻译
  • 原文地址:https://www.cnblogs.com/hellman/p/4078588.html
Copyright © 2011-2022 走看看