表格特效代码全集中 1. 两种细线表格做法

表格特效代码全集中 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

你可能感兴趣的:(表格特效代码全集中 1. 两种细线表格做法)