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

写一个简单的CSS表

程序员文章站 2022-04-23 23:35:39
...
写一个简单的CSS表
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Lite List</title>
  <style type="text/css">
    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; }
    td      { color: #333; vertical-align: middle; }
    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; }
    .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; }
    .close  { padding-left: 1px; padding-right: 2px; }
    .open   {}
    .ver     { color: #900; }
  </style>
  <script><!--
  function Expand( x )
  {
      x = x.replace( /Expand/, "" );
      document.getElementById( "Block" + x ).style.display = "inline";
      document.getElementById( "Expand" + x ).style.display = "none";
      document.getElementById( "Collapse" + x ).style.display = "inline";
  }
  function Collapse( x )
  {
      x = x.replace( /Collapse/, "" );
      document.getElementById( "Block" + x ).style.display = "none";
      document.getElementById( "Expand" + x ).style.display = "inline";
      document.getElementById( "Collapse" + x ).style.display = "none";
  }
  function NumberIncremental( tagType, tagId, prefixId )
  {
    var el = document.getElementsByTagName( tagType );       
    var which = 0;
    for( index=0; index<el.length; index++ )
    {
      if( el[index].id == tagId )
      {
        el[index].id = prefixId + which++;
        el[index].display = "inline";
      }
    }
  }
  function Init()
  {
    NumberIncremental( "div", "Blocker", "Block" );
    NumberIncremental( "a", "Collapser", "Collapse" );
    NumberIncremental( "a", "Expander", "Expand" );
    Expand( "Expand0" );
    for( index=1;; index++ )
    {
      if( document.getElementById( "Block"+index ) )
        Collapse( "Collapse"+index );
      else
        break;
    }    
  }
  //-->
  </script>
</head>

<body onload="Init();">
<table>
<tr>
<td align="center" nowrap width="35">
<a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
<a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
</td>
<td width="98%">Class.1 (<span class="ver">1.0.1</span> - <span class="ver">1.0.6</span>)</td>
</tr>
</table>
<div id="Blocker">
<pre>
Text 1 &quot;1&quot;.
Text 1 &quot;2&quot;.
Text 1 &quot;3&quot;.
End.
</pre>
</div>

<table>
<tr>
<td align="center" nowrap width="35">
<a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
<a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
</td>
<td width="98%">Class.2 (<span class="ver">2.0.1</span> - <span class="ver">2.0.5</span>)</td>
</tr>
</table>
<div id="Blocker">
<pre>
Text 2 &quot;1&quot;.
Text 2 &quot;2&quot;.
Text 2 &quot;3&quot;.
End.
</pre>
</div>

<table>
<tr>
<td align="center" nowrap width="35">
<a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
<a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
</td>
<td width="98%">Class.3 (<span class="ver">3.0.1</span> - <span class="ver">3.0.5</span>)</td>
</tr>
</table>
<div id="Blocker">
<pre>
Text 3 &quot;1&quot;.
Text 3 &quot;2&quot;.
Text 3 &quot;3&quot;.
End.
</pre>
</div>
</body>
</html>

更多写一个简单的CSS表相关文章请关注PHP中文网!

相关标签: CSS