收藏十一种常用简单实用漂亮的HTML表格样式

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

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

<table cellspacing="0" bordercolordark="#efefef" width="100%" bordercolorlight="#333333" border="0"> <tbody> <tr bgcolor="#cccccc"> <td>晓龙工作室</td> </tr> </tbody> </table> <p>&nbsp;</p>

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

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

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

<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

第四种：圆角另类表格，代码如下：

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

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

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

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

<fieldset> <legend>item</legend> content </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 οnmοuseοver="this.className=’aa’" οnmοuseοut="this.className=’bb’" 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.cnbruce.com</td> </tr> </table>