Alternating row colors

    

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Alternating row colors</title>
  <style rel="stylesheet" type="text/css">
th {
  font-weight: bold;
  text-align: left;
  background-color: #fff336;
}

td {
  padding: 3px;
}

.odd {
  background-color: #efefef;
}

.even {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>Alternating Row Colors</h2>
<table>
  <tr>
    <th>Item</th>
    <th>Description</th>
    <th>Cost</th>
    <th>Subtotal</th>
  </tr>
  <tr class="even">
    <td>I</td>
    <td>B</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr class="odd">
    <td>B</td>
    <td>B</td>
    <td>.2</td>
    <td>1</td>
  </tr>
  <tr class="even">
    <td>E</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
  </tr>
  <tr class="odd">
    <td>P</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="even">
    <td>V</td>
    <td>5</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr class="odd">
    <td>B</td>
    <td>L</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="even">
    <td>E</td>
    <td>1</td>
    <td>0</td>
    <td>2</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 Background
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

Alternating row colors : tr « Tags « HTML / CSS

Related examples in the same category