表格特效代码全集中

两种细线表格做法

　　源码如下：

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

 

 

　　源码如下：

<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. 另类圆角表格制作

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: