收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格，会显得段落分明的效果，收到意想不到的效果。

第一种：单格样式，可以不定义宽度，把width="100%"去掉即可：

<table cellspacing="0" bordercolordark="#efefef" width="100%"  bordercolorlight="#333333" border="0">
    <tbody>
        <tr bgcolor="#cccccc">
            <td>菜鸟之家_电脑爱好者</td>
        </tr>
    </tbody>
</table>

第二种：细线表格，代码如下：

<table width="100%" border="1" bordercolor="#000000">
   <tr bordercolor="#FFFFFF">
     <td>表格边线为1，线色为黑，行线色为白。</td>
   </tr>
</table>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
   <tr>
     <td bgcolor="#FFFFFF">表格边线为0，间距为1，背景色为黑，行背景色为白。</td>
   </tr>
</table>

第三种：立体表格，代码如下：

<table   border=1 cellspacing=0   width=100% bordercolorlight=#333333  bordercolordark=#efefef>
   <tr bgcolor=#cccccc>
     <td>菜鸟之家_电脑爱好者</td>
     <td>菜鸟之家_电脑爱好者</td>
     <td>菜鸟之家_电脑爱好者</td>
     <td>菜鸟之家_电脑爱好者</td>
   </tr>
   <tr bgcolor=#cccccc>
     <td>08zx.com</td>
     <td>08zx.com</td>
     <td>08zx.com</td>
     <td>08zx.com</td>
   </tr>
</table>
<center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc

第四种：边框虚线表格，代码如下：

<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.08zx.com</td>
   </tr>
</table>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">

第五种：分类表格，代码如下：

<fieldset>
<legend>菜鸟之家</legend> 
电脑爱好者 08zx.com 
</fieldset>

第六种： 第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>

第七种： 第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   onmouseover="this.className=&rsquo;aa&rsquo;" onmouseout="this.className=&rsquo;bb&rsquo;"  class="bb"><center><b>cnbruce</td>
    </tr>
</table>

第八种：第3种变色单元格，通过鼠标事件实现，代码如下：

<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>

第九种： 透明的表格，代码如下：

<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100  border=0> 
<tr><td><center>cnbruce</td></tr>
</table>

第十种： 边框有外阴影效果，代码如下：

<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.08zx.com</td>
   </tr>
</table>