Table Special Effects code three-dimensional table rounded corner table changing Cells

1. Two thin-line table practices

 

 

The source code is as follows:

<Table width = "100%" border = "1" bordercolor = "#000000">
<Tr bordercolor = "# ffffff">
<TD> the table edge is 1, the line color is black, and the line color is white. </TD>
</Tr>
</Table>
<P>
<Table width = "100%" border = "0" cellspacing = "1" bgcolor = "#000000">
<Tr>
<TD bgcolor = "# ffffff"> the table edge is 0, the spacing is 1, the background color is black, and the row background color is white. </TD>
</Tr>
</Table>

2. three-dimensional table

The source code is as follows:

<TableBorder = 1 cellspacing = 0Width = 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> the table edge is 1, the interval is 0, the top left is #333333, the bottom right is # efefef, And the row background color is # cccccc

3. Alternative Round Table Creation

 

 

 

 

 

The source code is as follows:

Source image:
<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> zoom in
<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. dotted border table
5. sharded 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>
Dotted Line 1
<HR size = 1 style = "border: 1px dotted #001403;">
Dotted Line 2
<P size = 1 style = "border: 1px dotted #001403;">

 

 

The source code is as follows:

<Fieldset>
<Legend> item </legend>
Content
</Fieldset>

6. Change the color of cell 1 through a: hover.

 

 

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. The color-changing cell 2 has been made into CSS. Pay attention to the transparent effect.

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>

<TableWidth = "100%">
<Tr>
<TDOnmouseover = "This. classname = 'A'" onmouseout = "This. classname = 'bb '"
Class = "BB"> <center> <B> cnbruce </TD>
</Tr>
</Table>

8. color-changing cell 3, made through the mouse event. A little Microsoft-like

 

 

The source code is as follows:
<Table width = "100%" border = "1" cellpadding = "3" cellspacing = "0"
Bordercolor = "# efefef" bgcolor = "# efefef">
<Tr>
<TD onmouseout = "This. bgcolor = '# efefef'; this. bordercolor =' # efefef '";
Onmouseover = "This. bgcolor = '# cccccc'; this. bordercolor =' #000033 '"> <Div align = "Left">
Blueidea </div> </TD>
</Tr>
<Tr>
<TD
Onmouseout = "this. bgcolor = '# efefef'; this. bordercolor = '# efefef' "; onmouseover =" this. bgcolor = '# cccccc'; this. bordercolor = '#000033' ">
Cnbruce </TD>
</Tr>
</Table>

9. Transparent table

<Table bgcolor = # ececec style = "filter: alpha (opacity = 50)" width = 200 Height = 100 border = 0>
<Tr> <TD> <center> cnbruce </TD> </tr>
</Table>

10. The outer shadow of the table border is displayed.

 

 

The source code is as follows:

<TableAlign = centerWidth = 200Height = 100Bgcolor = # f3f3f3
Style = "filter: progid: DXImageTransform. Microsoft. Shadow
(Color = #333333, direction = 120, strength = 5) ">
<Tr>
<TD> <center> www.cnbruce.com </TD>
</Tr>
</Table>

11. VMLCodeRounded corner table
(1 ).

 

The source code is as follows:

<HTML xmlns: V>
<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>
</Html>

(2 ).

 

 

The source code is as follows:

<HtmlXmlns: V>
<Style>
V \: * {behavior: URL (# default # VML )}
</Style>
<Body>
<V: roundrectStyle = "position: relative; width: 150; Height: 240px">
<V: PathTextpathok = "true"/>
<V: textpathOn = "true"String = "cnbrucecnbrucecnbrucecnbRucecnbruc
EcnbrucecnbrucecnbrucecnBrucecnbrucecnbrucecnbruCecnbrucecnbrucecnbruce"/>
<V: ShadowOn = "T"Type = "single"Color = "# b3b3b3"Offset = "3px, 3px"/>
<V: textboxStyle = "font-size: 10.2pt;"> VML </V: textbox>
</V: roundrect>
</Body>
</Html>

(3 ).

 

 

The source code is as follows:

<HTML xmlns: V>
<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>
</Html>