用CSS控制表格

1.   两种细线表格做法   
  　　源码如下：  
   
  <table   width="100%"   border="1"   bordercolor="#000000">  
      <tr   bordercolor="#FFFFFF">  
          <td>表格边线为1，线色为黑，行线色为白。</td>  
      </tr>  
  </table>  
  <p>  
  <table   width="100%"   border="0"   cellspacing="1"   bgcolor="#000000">  
      <tr>  
          <td   bgcolor="#FFFFFF">表格边线为0，间距为1，背景色为黑，行背景色为白。</td>  
      </tr>  
  </table>  
   
  　　2.   立体表格   

  　　源码如下：  
   
  <table     border=1   cellspacing=0     width=100%   bordercolorlight=#333333   bordercolordark=#efefef>  
      <tr   bgcolor=#cccccc>  
          <td>it365cn</td>  
          <td>it365cn</td>  
          <td>it365cn</td>  
          <td>it365cn</td>  
      </tr>  
      <tr   bgcolor=#cccccc>  
          <td>cnbruce</td>  
          <td>cnbruce</td>  
          <td>cnbruce</td>  
          <td>cnbruce</td>  
      </tr>  
  </table>  
  <center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc  
   
  　　3.   另类圆角表格制作   

  　　源码如下：  
   
  原图：  
  <table   cellpadding=0   cellspacing=0   border=0   width=282   align=center>  
      <tr   height=1>  
          <td   rowspan=4   width=1></td>  
          <td   rowspan=3   width=1></td>  
          <td   rowspan=2   width=1></td>  
          <td   width=2></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   width=2></td>  
          <td   rowspan=2   width=1></td>  
          <td   rowspan=3   width=1></td>  
          <td   rowspan=4   width=1></td>  
      </tr>  
      <tr   height=1>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=1>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=3   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=2>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=5   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
  </table>  
  <p>放大  
  <table   cellpadding=0   cellspacing=0   border=1   width=282   align=center>  
      <tr   height=10>  
          <td   rowspan=4   width=10></td>  
          <td   rowspan=3   width=10></td>  
          <td   rowspan=2   width=10></td>  
          <td   width=20></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   width=20></td>  
          <td   rowspan=2   width=10></td>  
          <td   rowspan=3   width=10></td>  
          <td   rowspan=4   width=10></td>  
      </tr>  
      <tr   height=10>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=10>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=3   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=20>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=5   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
  </table>  
   
  　　4.   虚线边框表格   
    
    
  　　源码如下：  
   
  <style   type="text/css">  
  .tb{BORDER-BOTTOM:   #000000   1px   dotted;BORDER-top:   #000000   1px   dotted;BORDER-LEFT:  
  #000000   1px   dotted;BORDER-RIGHT:   #000000   1px   dotted;}  
  </style>  
  <table   width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>  
          <td   class="tb"><center>www.blueidea.com</td>  
      </tr>  
  </table>  
  <p>  
  虚线直线1  
  <hr   size=1   style="border:1px   dotted   #001403;">  
  虚线直线2  
  <p   size=1   style="border:1px   dotted   #001403;">  
   
  　　5.   分类型表格   

  　　源码如下：  
   
  <fieldset>  
  <legend>item</legend>  
  content  
  </fieldset>  
   
   
  　　6.   变色的单元格1，通过a:hover做   

  　　源码如下：  
   
  <style>  
  a:link,a:visited,a:hover  
  {width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}  
  a:hover{background:#0099ff;color:black}  
  td{background:#3366cc;color:white;padding:0px}  
  </style>  
   
   
   
  <TABLE   width=100%   cellspacing=1   bgcolor=black   >  
      <TR>  
          <TD><a   href="#">Blueidea  
          <TD><a   href="#">.com  
      <TR>  
          <TD><a   href="#">CNBruce  
          <TD><a   href="#">.com  
  </TABLE>  
   
  　　7.   变色的单元格2，已经做成了CSS，注意还有透明效果  
   
  　　源码如下：  
   
  <style   type="text/css">  
  .aa  
  {   background-color:#0000ff;   color:#ff0000;filter:   alpha(opacity=50)}  
  .bb    
  {   background-color:#3366cc;   color:#ffffff}  
  </style>     
    
    
    
  <table     width="100%">  
      <tr>  
          <td     οnmοuseοver="this.className='aa'"   οnmοuseοut="this.className='bb'"  
  class="bb"><center><b>cnbruce</td>  
        </tr>  
  </table>  
   
   
  　　8.   变色的单元格3，通过mouse事件做.有点微软的味道   

  　　源码如下：  
  <table   width="100%"   border="1"   cellpadding="3"   cellspacing="0"  
  bordercolor="#efefef"   bgcolor="#efefef">  
      <tr>    
          <td   onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";  
  onMouseOver="this.bgColor='#cccccc';   this.borderColor='#000033'"><div   align="left">  
  Blueidea</div></td>  
      </tr>  
      <tr>    
          <td    
  onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";   onMouseOver="this.bgColor='#cccccc';   this.borderColor='#000033'">  
  cnbruce</td>  
      </tr>  
  </table>  
   
  　　9.   透明表格  
   
  <table   bgcolor=#ececec   style="filter:alpha(opacity=50)"   width=200   height=100   border=0>  
      <tr><td><center>cnbruce</td></tr>  
  </table>  
   
  　　10.   表格边框显示外阴影   

  　　源码如下：  
   
  <table     align=center     width=200     height=100     bgcolor=#f3f3f3  
  style="filter:progid:DXImageTransform.Microsoft.Shadow  
  (Color=#333333,Direction=120,strength=5)">  
      <tr>  
          <td><center>www.cnbruce.com</td>  
      </tr>  
  </table>  
   
  　　11.   VML代码实现的圆角表格  
  　　(1).   

  　　源码如下：  
   
  <html   xmlns:v>  
  <style>  
  v/:*{behavior:url(#default#VML)}  
  </style>  
  <body>  
        <v:RoundRect   style="position:relative;width:150;height:240px">  
          <v:shadow   on="T"   type="single"   color="#b3b3b3"   offset="3px,3px"/>  
          <v:TextBox   style="font-size:10.2pt;">VML</v:TextBox>  
          </v:RoundRect>    
  </body>  
  </html>  
   
  　　(2).   
    
  　　源码如下：  
   
  <html     xmlns:v>  
  <style>  
  v/:*{behavior:url(#default#VML)}  
  </style>  
  <body>  
              <v:RoundRect     style="position:relative;width:150;height:240px">  
  <v:path     textpathok="true"     />  
              <v:textpath     on="true"     string="cnbrucecnbrucecnbrucecnbrucecnbruc  
  ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"     />  
                  <v:shadow     on="T"     type="single"     color="#b3b3b3"     offset="3px,3px"/>  
                  <v:TextBox     style="font-size:10.2pt;">VML</v:TextBox>  
                  </v:RoundRect>      
  </body>  
  </html>  
   
  　　(3).   

  　　源码如下：  
   
  <html   xmlns:v>  
  <style>  
  v/:*{behavior:url(#default#VML)}  
  </style>  
  <body>  
        <v:RoundRect   style="position:relative;width:150;height:240px"   arcsize=0.5>  
          <v:shadow   on="T"   type="single"   color="#b3b3b3"   offset="3px,3px"/>  
          <v:TextBox   style="font-size:10.2pt;">VML</v:TextBox>  
          </v:RoundRect>    
  </body>  
  </html