表格特效代码全集中

2022-07-15 80酷酷网 80kuku.com

　　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. 虚线边框表格

　　源码如下：

5. 分类型表格

　　源码如下：

<fieldset>
<legend>item</legend>
content
</fieldset>

6. 变色的单元格1，通过a:hover做

　　源码如下：

<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，注意还有透明效果

　　源码如下：

<table width="100%">
<tr>
<td
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 ;
><div align="left">
Blueidea</div></td>
</tr>
<tr>
<td
; >
cnbruce</td>
</tr>
</table>

9. 透明表格

<table bgcolor=#ececec width=200 height=100 border=0>
<tr><td><center>cnbruce</td></tr>
</table>

10. 表格边框显示外阴影

　　源码如下：

11. VML代码实现的圆角表格
(1).

　　源码如下：

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox </v:RoundRect>
</body>
</html>

(2).

　　源码如下：

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
      <v:RoundRect textpathok="true" />
      <v:textpath on="true" string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce" />
        <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
        <v:TextBox </v:RoundRect>
</body>
</html>

(3).

　　源码如下：

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
   <v:RoundRect arcsize=0.5>
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox </v:RoundRect>
</body>
</html>