首页 > > 网页制作 > css >

写一个简单的CSS表

2018-06-24 00:54:10来源：未知阅读 ()

  1 <html>
  2 <head>
  3   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4   <title>Lite List</title>
  5   <style type="text/css">
  6     table   { border: 1px solid #aaa; width: 100%; background-color:#ccc; color:black; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size:120%; margin-bottom: 10px; }
  7     td      { color: #333; vertical-align: middle; }
  8     pre     { font-family: Verdana, sans-serif; font-size: 80%; border-width: 1; border-left: 1; border-right: 0; border-top: 0; border-bottom: 0; padding-left: 7px; border-color: #666; border-style: solid; margin-left: 20px; margin-top: 0px; margin-bottom: 10px; }
  9     .button { display: none; font-family: Arial, sans-serif; background-color: white; border-width: 1; border-style: solid; border-color: #999; font-size: 14px; width: 18px; height: 16px; cursor: pointer; text-decoration: none; margin: 2px; font-weight: 700; color: #900; }
 10     .close  { padding-left: 1px; padding-right: 2px; }
 11     .open   {}
 12     .ver     { color: #900; }
 13   </style>
 14   <script><!--
 15   function Expand( x )
 16   {
 17       x = x.replace( /Expand/, "" );
 18       document.getElementById( "Block" + x ).style.display = "inline";
 19       document.getElementById( "Expand" + x ).style.display = "none";
 20       document.getElementById( "Collapse" + x ).style.display = "inline";
 21   }
 22   function Collapse( x )
 23   {
 24       x = x.replace( /Collapse/, "" );
 25       document.getElementById( "Block" + x ).style.display = "none";
 26       document.getElementById( "Expand" + x ).style.display = "inline";
 27       document.getElementById( "Collapse" + x ).style.display = "none";
 28   }
 29   function NumberIncremental( tagType, tagId, prefixId )
 30   {
 31     var el = document.getElementsByTagName( tagType );       
 32     var which = 0;
 33     for( index=0; index<el.length; index++ )
 34     {
 35       if( el[index].id == tagId )
 36       {
 37         el[index].id = prefixId + which++;
 38         el[index].display = "inline";
 39       }
 40     }
 41   }
 42   function Init()
 43   {
 44     NumberIncremental( "div", "Blocker", "Block" );
 45     NumberIncremental( "a", "Collapser", "Collapse" );
 46     NumberIncremental( "a", "Expander", "Expand" );
 47     Expand( "Expand0" );
 48     for( index=1;; index++ )
 49     {
 50       if( document.getElementById( "Block"+index ) )
 51         Collapse( "Collapse"+index );
 52       else
 53         break;
 54     }    
 55   }
 56   //-->
 57   </script>
 58 </head>
 59 
 60 <body onload="Init();">
 61 <table>
 62 <tr>
 63 <td align="center" nowrap width="35">
 64 <a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
 65 <a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
 66 </td>
 67 <td width="98%">Class.1 (<span class="ver">1.0.1</span> - <span class="ver">1.0.6</span>)</td>
 68 </tr>
 69 </table>
 70 <div id="Blocker">
 71 <pre>
 72 Text 1 &quot;1&quot;.
 73 Text 1 &quot;2&quot;.
 74 Text 1 &quot;3&quot;.
 75 End.
 76 </pre>
 77 </div>
 78 
 79 <table>
 80 <tr>
 81 <td align="center" nowrap width="35">
 82 <a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
 83 <a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
 84 </td>
 85 <td width="98%">Class.2 (<span class="ver">2.0.1</span> - <span class="ver">2.0.5</span>)</td>
 86 </tr>
 87 </table>
 88 <div id="Blocker">
 89 <pre>
 90 Text 2 &quot;1&quot;.
 91 Text 2 &quot;2&quot;.
 92 Text 2 &quot;3&quot;.
 93 End.
 94 </pre>
 95 </div>
 96 
 97 <table>
 98 <tr>
 99 <td align="center" nowrap width="35">
100 <a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
101 <a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
102 </td>
103 <td width="98%">Class.3 (<span class="ver">3.0.1</span> - <span class="ver">3.0.5</span>)</td>
104 </tr>
105 </table>
106 <div id="Blocker">
107 <pre>
108 Text 3 &quot;1&quot;.
109 Text 3 &quot;2&quot;.
110 Text 3 &quot;3&quot;.
111 End.
112 </pre>
113 </div>
114 </body>
115 </html>