Alternating Row Background : tr « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. tr

Alternating Row Background

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
#ts td {
  background: white;
}  
#t1 * .odd td {
  background: palegreen;
}  
</style>
</head>
<body>
<table id="t1"> 
    <tr class="r1 odd"> <td class="c1">r1 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r3 odd"> <td class="c1">r3 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r4"> <td class="c1">r4 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r5 odd"> <td class="c1">r5 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
</table> 

</body>
</html>








Related examples in the same category

1.'tr' Example
2.table row with class
3.Table style for even rows
4.Set different colors for even and odd table row
5.table row background
6.table row hover
7.stripe table with Javascript
8.Coloring Rows in a Table
9.Selecting cells in row
10.Alternating row colors
11.Table with subtotoal row
12.Hiding row
13.tr height: 30px;
14.tr background: #EFEFEF;
15.tr background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
16.tr color: #505050;
17.tr padding: 7px;
18.tr text-align: left;
19.Highlighting rows with mouse move