<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> two-color table CSS instance </title>
<Style type = "text/CSS">
# Datagrid1 tr {
Background-color: expression (
This. sectionrowindex = 0? "# Ffcccc ":
(
(This. sectionrowindex % 2 = 0 )? "# Fff0f0": "# f0f0ff"
)
);
Color: expression (this. sectionrowindex = 0? "# Ffffff ":"");
Font-weight: expression (this. sectionrowindex = 0? "Bold ":"");
Tableselect: expression (
This. sectionrowindex = 0? "":
(
Onmouseover = function ()
{
This. style. backgroundcolor =
(
This. style. backgroundcolor! = "#69 cdff "? "#69 cdff ":
(
This. sectionrowindex = 0? "# Ffcccc ":
(
This. sectionrowindex % 2 = 0? "# Fff0f0": "# f0f0ff"
)
)
)
},
Onmouseout = function ()
{
This. style. backgroundcolor =
(
This. style. backgroundcolor! = "#69 cdff "? "#69 cdff ":
(
This. sectionrowindex = 0? "# Ffcccc ":
(
This. sectionrowindex % 2 = 0? "# Fff0f0": "# f0f0ff"
)
)
)
}
)
)
}
# Datagrid1 TD {
Background-color: expression (
This. cellindex = 0?
(
This. parentelement. sectionrowindex = 0? "# Ffcccc": "# dddddddd"
)
: NULL
)
}
. Findareatable1 {
Font-size: 12px;
Color: #333333;
Text-Decoration: none;
Width: 400px;
Cursor: hand;
Background-color: # ffffff;
Vertical-align: middle;
Text-align: center;
}
</Style>
</Head>
<Body>
<Table cellspacing = "1" class = "findareatable1" id = "datagrid1">
<Tr>
<TD> first row and first column </TD>
<TD> first line </TD>
<TD> first line </TD>
<TD> first line </TD>
<TD> first line </TD>
<TD> first line </TD>
</Tr>
<Tr>
<TD> first column of Row 1 </TD>
<TD> Row 1 </TD>
<TD> Row 1 </TD>
<TD> Row 1 </TD>
<TD> Row 1 </TD>
<TD> Row 1 </TD>
</Tr>
<Tr>
<TD> Row 2 first column </TD>
<TD> Row 2 </TD>
<TD> Row 2 </TD>
<TD> Row 2 </TD>
<TD> Row 2 </TD>
<TD> Row 2 </TD>
</Tr>
<Tr>
<TD> three first columns in the row </TD>
<TD> Row 3 </TD>
<TD> Row 3 </TD>
<TD> Row 3 </TD>
<TD> Row 3 </TD>
<TD> Row 3 </TD>
</Tr>
<Tr>
<TD> four first columns in the row </TD>
<TD> row 4 </TD>
<TD> row 4 </TD>
<TD> row 4 </TD>
<TD> row 4 </TD>
<TD> row 4 </TD>
</Tr>
<Tr>
<TD> the first five columns in the row </TD>
<TD> Row 5 </TD>
<TD> Row 5 </TD>
<TD> Row 5 </TD>
<TD> Row 5 </TD>
<TD> Row 5 </TD>
</Tr>
</Table>
</Body>
</Html>
In addition, I have seen several other simple methods before, and I will try to find them later.
