02.25.2008

Alternating Table Row Color With CSS Classes

This is a continuation of our XHTML/CSS table tutorials. In this tutorial we will be using the same table as before, but I will show how to have the rows alternate in color. To achieve this we will be using CSS classes.

We are going to start with the table from the “Styling Tables with CSS Tutorials”.
Alternating Table Row Color With CSS Classes

Here is the full source code for that table.

<html>
<head>
<title>Styling Tables with CSS</title>
<style type="text/css">
<!--
table{
    border-spacing: 0px;
    border-collapse: collapse;
    width: 250px;
}
th {
    text-align: center;
    font-weight: bold;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: #4a70aa;
    color: #FFFFFF;
}
td {
    text-align: center;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: #e3f0f7;
}
-->
</style>
</head>
<table>
  <tr>
  <th>First Name</th>
  <th>Last name</th>
  <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Ward</td>
    <td>21</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>Maguire</td>
    <td>21</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>Lee</td>
    <td>61</td>
  </tr>
  <tr>
    <td>Walter</td>
    <td>Reed</td>
    <td>1</td>
  </tr>
</table>
</html>

First we have to define which rows will be oddly color. To do this we will use a class that I will name “alt” (you can call it whatever you want). Since we defined the style for each cell in the original tutorial, we will have to define every other group of cells as our “alt” class.

<tr>
  <th>First Name</th>
  <th>Last name</th>
  <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Ward</td>
    <td>21</td>
  </tr>
  <tr>
    <td class="alt">Mike</td>
    <td class="alt">Maguire</td>
    <td class="alt">21</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>Lee</td>
    <td>61</td>
  </tr>
  <tr>
    <td class="alt">Walter</td>
    <td class="alt">Reed</td>
    <td class="alt">1</td>
  </tr>

Now that we have set the class for our alternate cells we will have to add the CSS. In CSS you define a class using OBJECT.CLASS naming convention. So we will ad td.alt to our CSS.

<style type="text/css">
<!--
table{
    border-spacing: 0px;
    border-collapse: collapse;
    width: 250px;
}
th {
    text-align: center;
    font-weight: bold;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: #4a70aa;
    color: #FFFFFF;
}
td {
    text-align: center;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: #e3f0f7;
}
td {
}
-->
</style>

The only thing we are trying to change on the alternate cells I the background color. The alt class will inherit the style from the TD unless we tell it otherwise. What that means is all we have to do is set background color for td.alt and the rest will already match the other cells. I will give the alt cells a light grey color.

<style type="text/css">
<!--
table{
    border-spacing: 0px;
    border-collapse: collapse;
    width: 250px;
}
th {
    text-align: center;
    font-weight: bold;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: #4a70aa;
    color: #FFFFFF;
}
td {
    text-align: center;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: #e3f0f7;
}
td {
    background: #f7f7f7;
}
-->
</style>

When you are done save the file as .htm and open it in your browser. Your table should look like this.
Alternating Table Row Color With CSS Classes

That is how you can alternate the style of rows in a table. Now if you were automatically generating this table, using PHP for example, you could have PHP set the class for you. I may do a tutorial on that in the future. I plan on showing you how to do some pretty awesome tables in the next tutorial using “Table Cloth”. Stay tuned.

Other Related Tutorials

Comments

  1. Edward Poore on June 22, 2008 at 10:57 am

    Surely it’s more efficient to define the alt class on the tr element and then use a cascading selector to style the td and th elements?

    …
    …

    …
    …

    and then in the CSS file have something like:

    tr td {
    /* styling for normal rows */
    }
    tr.alt td {
    /* styling for alternate row */
    }

    [Reply]

  2. AGE on October 13, 2008 at 10:54 pm

    Hi all,
    I am new to web building. I stumbled this formatted schrolling table for viewing list of books. I need the list to be alternating colors. If possible, I would like a mouse over click on a single list item. Below is the current code. Any help will be much appreciated.

    Thanks, AGE

    [CODE]

    the first list item
    the second list item
    the third list item
    the first list item
    the second list item
    the third list item
    the first list item
    the second list item
    the third list item
    the first list item
    the second list item
    the third list item

    [Reply]

  3. zerqain on February 13, 2009 at 6:34 pm

    Another approach can be found in here;
    http://www.alistapart.com/articles/zebratables

    dating from MARCH 05, 2004.

    [Reply]

  4. tiffany on August 29, 2009 at 11:41 am

    yeah, the code is very cool. i think it will be helpful for me

    [Reply]

  5. Bhanu Shankar on October 22, 2009 at 6:58 am

    I am using a class name for the whole table like below
    table.Scheduler {…..}

    in this case how do I have alternative row colors?
    “tr.alt” takes up the style for all the tables used in the page.

    [Reply]

  6. Bhanu Shankar on October 22, 2009 at 7:09 am

    Got the solution for this after doing some RnD…

    table.Scheduler tr.alt td{
    background: #eeeeee;
    }

    Hope this should do.

    [Reply]

  7. Zloi on March 3, 2010 at 6:46 am

    I fond interesting solution for Rows background, the rows highlighting on mouse over, without JS.
    http://www.sopov.com/joomla-wordpress-tips-and-tricks/70-how-highlight-table-row-background.html
    Works in all browsers.

    [Reply]

    suhel Reply:
    May 22nd, 2010 at 11:11 am

    Dont click on this fuckers link. malware

    [Reply]

  8. ramesh on March 8, 2010 at 2:52 pm

    it was useful to me.

    [Reply]

  9. Mahi on June 25, 2010 at 5:11 am

    td.alt {
    background: #f7f7f7;
    }

    this was required in the css. i hope you forgot to mention that..

    [Reply]

  10. Trixie-woo on September 9, 2010 at 5:27 am

    What if the table code is auto-generated elsewhere, and you only have access to the css? This example is putting to much form into where the content should be.

    [Reply]