你的位置:首页 > 软件开发 > 网页设计 > 写一个简单的CSS表

写一个简单的CSS表

发布时间:2017-01-18 12:00:08
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <titl ...

写一个简单的CSS表

 

写一个简单的CSS表写一个简单的CSS表
 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>

原标题:写一个简单的CSS表

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。