<HTML>
<Head>
<Title> A classic and practical table effect </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Style type = "text/CSS">
* {Font-family: tahoma, Arial, Helvetica, sans-serif, "";}
Table {
Width: 100%;
Margin: 0px auto;
Font: Georgia 11px;
Font-size: 12px;
Color: #333333;
Text-align: center;
Border-collapse: collapse;/* code of the fine-line table */
}
Table TD {
Border: 1px solid #999;/* line color of the line table in the thin line */
Height: 22px;
}
Caption {text-align: center; font-size: 12px; font-weight: bold; margin: 0 auto ;}
Tr. T1 TD {background-color: # FFF ;}
Tr. T2 TD {background-color: # Eee ;}
Tr. T3 TD {background-color: # CCC ;}
Th, tfoot tr TD {font-weight: bold; text-align: center; Background: # c5c5c5 ;}
Th {Line-Height: 30px; Height: 30px ;}
Tfoot tr TD {Background: # FFF; line-Height: 26px; Height: 26px ;}
Thead {border: 1px solid #999 ;}
Thead tr TD {text-align: center ;}
# Page {text-align: center; float: Right ;}
# Page A, # page A: visited {width: 60px; Height: 22px; line-Height: 22px; Border: 1px black solid; display: block; float: Left; margin: 0 3px; Background: # c9c9c9;
Text-Decoration: none ;}
# Page A: hover {Background: # c1c1c1; text-Decoration: none ;}
. Grayr {padding: 2px; font-size: 11px; Background: # FFF; float: Right ;}
. Grayr A {padding: 2px 5px; margin: 2px; color: #000; text-Decoration: none; Border: 1px # c0c0c0 solid ;}
. Grayr A: hover {color: #000; Border: 1px orange solid ;}
. Grayr A: active {color: #000; Background: #99 FFFF}
. Grayr span. Current {padding: 2px 5px; font-weight: bold; margin: 2px; color: #303030; Background: # FFF; Border: 1px orange solid ;}
. Grayr span. Disabled {padding: 2px 5px; margin: 2px; color: #797979; Background: # c1c1c1; Border: 1px # c1c1c1 solid ;}
</Style>
<SCRIPT type = "text/JavaScript">
<! --
Function selectall ()
{
If (this. Checked = true ){
Checkall ('test ');
}
Else {
Clearall ('test ');
}
}
Function checkall (name)
{
VaR El = Document. getelementsbytagname ('input ');
VaR Len = El. length;
For (VAR I = 0; I <Len; I ++)
{
If (El [I]. type = "checkbox") & (El [I]. Name = Name ))
{
El [I]. Checked = true;
}
}
}
Function clearall (name)
{
VaR El = Document. getelementsbytagname ('input ');
VaR Len = El. length;
For (VAR I = 0; I <Len; I ++)
{
If (El [I]. type = "checkbox") & (El [I]. Name = Name ))
{
El [I]. Checked = false;
}
}
}
-->
</SCRIPT>
</Head>
<Body>
<Table>
<Caption>
<Table>
<Tr> <TD> 1212 </TD> </tr>
</Table>
</Caption>
<Thead>
<Tr>
<TH>
<Input onclick = "If (this. checked = true) {checkall ('test');} else {clearall ('test ');} "type =" checkbox "value =" "name =" test "Title =" select all/cancel "/>
</Th>
<TH> nickname </Th>
<TH> gender </Th>
<TH> age </Th>
<TH> nationality </Th>
<TH> phone number </Th>
<TH> email </Th>
<TH> QQ </Th>
<TH> Home page </Th>
</Tr>
</Thead>
<Tbody id = "tab">
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
<Tr>
<TD>
<Input type = "checkbox" value = "A" name = "test"/>
</TD>
<TD> free template Network </TD>
<TD> male </TD>
<TD> 25 </TD>
<TD> Fujian </TD>
<TD> 12345678910 </TD>
<TD> 215288671@qq.com </TD>
<TD> 215288671 </TD>
<TD> http://www.865171.cn </TD>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<TD>
<Input onclick = "If (this. checked = true) {checkall ('test');} else {clearall ('test ');} "type =" checkbox "value =" "name =" test "Title =" select all/cancel "/>
</TD>
<TD colspan = "8">
<Div class = "grayr"> <SPAN class = "disabled"> </span> <SPAN class = "current"> 1 </span> <a href = "#? Page = 2 "> 2 </a> <a href = "#? Page = 3 "> 3 </a> <a href = "#? Page = 4 "> 4 </a> <a href = "#? Page = 5 "> 5 </a> <a href = "#? Page = 6 "> 6 </a> <a href = "#? Page = 7 "> 7 </a>... <a href = "#? Page = 199 "> 199 </a> <
Href = "#? Page = 200 "> 200 </a> <a href = "#? Page = 2 "> </a> </div>
</TD>
</Tr>
</Tfoot>
</Table>
<A href = "http://www.865171.cn"> free template.net </a>
<SCRIPT type = "text/JavaScript">
<! --
VaR PTR = Document. getelementbyid ("tab"). getelementsbytagname ("TR ");
Function $ (){
For (I = 1; I <PTR. Length + 1; I ++ ){
PTR [I-1]. style. backgroundcolor = (I % 2> 0 )? "# Fff": "# Eee ";
}
}
Window. onload =$;
For (VAR I = 0; I <PTR. length; I ++ ){
PTR [I]. onmouseover = function (){
This. tmpclass = This. classname;
This. style. backgroundcolor = "# CCC ";
};
PTR [I]. onmouseout = function (){
For (I = 1; I <PTR. Length + 1; I ++ ){
PTR [I-1]. style. backgroundcolor = (I % 2> 0 )? "# Eee": "# fff ";
}
}
}
// -->
</SCRIPT>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
