<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 双色表格CSS实例 </ 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 != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
} ,
onmouseout = function()
{
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
}
)
)
}
#DataGrid1 td {
background-color : expression(
this.cellIndex == 0 ?
(
this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
)
: 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 > 首行首列 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
</ tr >
< tr >
< td > 行1首列 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
</ tr >
< tr >
< td > 行2首列 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
</ tr >
< tr >
< td > 行3首列 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
</ tr >
< tr >
< td > 行4首列 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
</ tr >
< tr >
< td > 行5首列 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
</ tr >
</ table >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 双色表格CSS实例 </ 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 != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
} ,
onmouseout = function()
{
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
}
)
)
}
#DataGrid1 td {
background-color : expression(
this.cellIndex == 0 ?
(
this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
)
: 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 > 首行首列 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
</ tr >
< tr >
< td > 行1首列 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
</ tr >
< tr >
< td > 行2首列 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
</ tr >
< tr >
< td > 行3首列 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
</ tr >
< tr >
< td > 行4首列 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
</ tr >
< tr >
< td > 行5首列 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
</ tr >
</ table >
</ body >
</ html >