• 丰搜首页
• 文档中心
• 视频中心
• 丰搜贴吧
• 问题集锦
• 更多功能

选择显示字体大小

• 最大
• 较大
• 标准

表格特效代码全集中

1. 两种细线表格做法

　　源码如下：

<table width=&quot;100%&quot; border=&quot;1&quot; bordercolor=&quot;#000000&quot;>
<tr bordercolor=&quot;#ffffff&quot;>
<td>表格边线为1，线色为黑，行线色为白。</td>
</tr>
</table>
<p>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; bgcolor=&quot;#000000&quot;>
<tr>
<td bgcolor=&quot;#ffffff&quot;>表格边线为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=&quot;text/css&quot;>
.tb{border-bottom: #000000 1px dotted;border-top: #000000 1px dotted;border-left:
#000000 1px dotted;border-right: #000000 1px dotted;}
</style>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td class=&quot;tb&quot;><center>www.blueidea.com</td>
</tr>
</table>
<p>
虚线直线1
<hr size=1 style=&quot;border:1px dotted #001403;&quot;>
虚线直线2
<p size=1 style=&quot;border:1px dotted #001403;&quot;>

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=&quot;#&quot;>blueidea
<td><a href=&quot;#&quot;>.com
<tr>
<td><a href=&quot;#&quot;>cnbruce
<td><a href=&quot;#&quot;>.com
</table>

7. 变色的单元格2，已经做成了css，注意还有透明效果

　　源码如下：

<style type=&quot;text/css&quot;>
.aa
{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}
.bb
{ background-color:#3366cc; color:#ffffff}
</style>

<table width=&quot;100%&quot;>
<tr>
<td onmouseover=&quot;this.classname='aa'&quot; onmouseout=&quot;this.classname='bb'&quot;
class=&quot;bb&quot;><center><b>cnbruce</td>
</tr>
</table>

8. 变色的单元格3，通过mouse事件做.有点微软的味道

　　源码如下：
<table width=&quot;100%&quot; border=&quot;1&quot; cellpadding=&quot;3&quot; cellspacing=&quot;0&quot;
bordercolor=&quot;#efefef&quot; bgcolor=&quot;#efefef&quot;>
<tr>
<td onmouseout=&quot;this.bgcolor='#efefef';this.bordercolor='#efefef'&quot;;
onmouseover=&quot;this.bgcolor='#cccccc'; this.bordercolor='#000033'&quot;><div align=&quot;left&quot;>
blueidea</div></td>
</tr>
<tr>
<td
onmouseout=&quot;this.bgcolor='#efefef';this.bordercolor='#efefef'&quot;; onmouseover=&quot;this.bgcolor='#cccccc'; this.bordercolor='#000033'&quot;>
cnbruce</td>
</tr>
</table>

9. 透明表格

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

10. 表格边框显示外阴影

　　源码如下：

<table align=center width=200 height=100 bgcolor=#f3f3f3
style=&quot;filter:progid:dximagetransform.microsoft.shadow
(color=#333333,direction=120,strength=5)&quot;>
<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=&quot;position:relative;width:150;height:240px&quot;>
<v:shadow on=&quot;t&quot; type=&quot;single&quot; color=&quot;#b3b3b3&quot; offset=&quot;3px,3px&quot;/>
<v:textbox style=&quot;font-size:10.2pt;&quot;>vml</v:textbox>
</v:roundrect>
</body>
</html>

(2).

　　源码如下：

<html xmlns:v>
<style>
v\:*{behavior:url(#default#vml)}
</style>
<body>
<v:roundrect style=&quot;position:relative;width:150;height:240px&quot;>
<v:path textpathok=&quot;true&quot; />
<v:textpath on=&quot;true&quot; string=&quot;cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce&quot; />
<v:shadow on=&quot;t&quot; type=&quot;single&quot; color=&quot;#b3b3b3&quot; offset=&quot;3px,3px&quot;/>
<v:textbox style=&quot;font-size:10.2pt;&quot;>vml</v:textbox>
</v:roundrect>
</body>
</html>

(3).

　　源码如下：

<html xmlns:v>
<style>
v\:*{behavior:url(#default#vml)}
</style>
<body>
<v:roundrect style=&quot;position:relative;width:150;height:240px&quot; arcsize=0.5>
<v:shadow on=&quot;t&quot; type=&quot;single&quot; color=&quot;#b3b3b3&quot; offset=&quot;3px,3px&quot;/>
<v:textbox style=&quot;font-size:10.2pt;&quot;>vml</v:textbox>
</v:roundrect>
</body>
</html>

　　

 

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

标准 网站致力的规范