表格特效代码全集中 1. 两种细线表格做法
IT教育介绍，源码如下：
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
tdit365cn/td
tdit365cn/td
tdit365cn/td
tdit365cn/td
/tr
tr bgcolor=cccccc
tdcnbruce/td
tdcnbruce/td
tdcnbruce/td
tdcnbruce/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"centerwww.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
legenditem/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
TDa href=""Blueidea
TDa href="".com
TR
TDa href=""CNBruce
TDa 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
class="bb"centerbcnbruce/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 style="filter:alpha(opacity=50)" width=200 height=100
border=0
trtdcentercnbruce/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
tdcenterwww.cnbruce.com/td
/tr
/table
11. VML代码实现的圆角表格
(1).
源码如下：
html xmlns:v
style
v\:*{behavior:url(defaultVML)}
/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(defaultVML)}
/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(defaultVML)}
/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
网友评论