Table special effects code full focus

1. Two lines of thin-form approach

The source code is as follows:

<table width= "100%" border= "1" bordercolor= "#000000" >
<tr bordercolor= "#FFFFFF" >
<td> table Edge is 1, the line color is black, the line color is white. </td>
</tr>
</table>
<p>
<table width= "100%" border= "0" cellspacing= "1" bgcolor= "#000000" >
<tr>
<TD bgcolor= "#FFFFFF" > Table edge is 0, spacing is 1, background color is black, row background color is white. </td>
</tr>
</table>

2. Three-dimensional form

The source code is as follows:

<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> table Edge is 1, interval is 0, upper left is #333333, bottom right is #efefef, row background color is #cccccc

3. Alternative round corner form production

The source code is as follows:

Original:
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
<tr height=1>
&LT;TD rowspan=4 width=1></td>
&LT;TD rowspan=3 width=1></td>
&LT;TD rowspan=2 width=1></td>
&LT;TD width=2></td>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD width=2></td>
&LT;TD rowspan=2 width=1></td>
&LT;TD rowspan=3 width=1></td>
&LT;TD rowspan=4 width=1></td>
</tr>
<tr height=1>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
</tr>
<tr height=1>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD colspan=3 bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
</tr>
<tr height=2>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD colspan=5 bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
</tr>
</table>
<p> enlarge
<table cellpadding=0 cellspacing=0 border=1 width=282 align=center>
<tr height=10>
&LT;TD rowspan=4 width=10></td>
&LT;TD rowspan=3 width=10></td>
&LT;TD rowspan=2 width=10></td>
&LT;TD width=20></td>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD width=20></td>
&LT;TD rowspan=2 width=10></td>
&LT;TD rowspan=3 width=10></td>
&LT;TD rowspan=4 width=10></td>
</tr>
<tr height=10>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
</tr>
<tr height=10>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD colspan=3 bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
</tr>
<tr height=20>
&LT;TD bgcolor= #43B5C9 ></td>
&LT;TD colspan=5 bgcolor= #43B5C9 ></td>
&LT;TD bgcolor= #43B5C9 ></td>
</tr>
</table>

4. Dotted Border table

The source code is as follows:

<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>
Dashed Line 1
Dashed Line 2
<p size=1 style= "border:1px dotted #001403;" >

5. Classification form

The source code is as follows:

<fieldset>
<legend>item</legend>
Content
</fieldset>

6. Discoloration of the cell 1, through the a:hover do

The source code is as follows:

<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. Discoloration of the cell 2, has been made of CSS, note that there are transparent effects

The source code is as follows:

<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" ><center><b>cnbruce</td>
</tr>
</table>

8. Discoloration of the cell 3, through the mouse event to do. A little bit of Microsoft flavor

The source code is as follows:
<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. Transparent forms

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

10. Table Border Display outer Shadow

The source code is as follows:

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

Corner table for VML code implementations
(1).

The source code is as follows:

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

(2).

The source code is as follows:

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

(3).

The source code is as follows:

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