普通及使用VML实现表格特效

　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  onmouseover="this.className='aa'" onmouseout="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>