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.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • 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 */
    }

  • AGE

    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

  • zerqain

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

    dating from MARCH 05, 2004.

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

  • Bhanu Shankar

    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.

  • Bhanu Shankar

    Got the solution for this after doing some RnD…

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

    Hope this should do.

  • 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.

    • suhel

      Dont click on this fuckers link. malware

  • ramesh

    it was useful to me.

  • Mahi

    td.alt {
    background: #f7f7f7;
    }

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

  • Trixie-woo

    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.

  • Nice tutorial, was really helpful. Thanks

  • How to add image background in the table. Please guide me.

  • Nice post. Thank you

  • John Meise

    I’m very very new to CSS (used to do HTML years ago though…forgot everything 😐 ) but I’ve been going over tutorials from Total Training for Dreamweaver and I stopped to look up what ‘.alt’ meant exactly. In the lesson I’m on, they are doing the exact same thing, except that specified the for the entire row instead of doing it once for each td. If you’re just wanting to alternate row colors, I don’t see why you couldn’t just use but I honestly don’t know what I’m talking about, just an observation 😐

    • No, you are correct. I wrote this a very long time ago. There are better ways to do this now such as psuedo elements like :odd