This tutorial teaches you to easily apply Zebra styling to your static/dynamic tables. The method of styling alternate rows with different colors is also known as Zebra styling. We normally achieve this by defining two sets of styles for odd and even rows of a table and manually adding these class names in to the table rows. When the data table is generated dynamically we use programming techniques to apply styles to alternate rows.

Here is a simple method using Prototype. This way, all you need to do is to define a class name for your table and prototype will automatically apply the odd table style to alternate rows of the table.

Let’s look at our table structure.

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="ListTable">
  <tr>
    <th>ID</th>
    <th>TITLE</th>
    <th>DATE</th>
    <th>STATUS</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Microsoft Launches first Android application</td>
    <td>Mar 05, 2010</td>
    <td>New</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Another title</td>
    <td>Mar 05, 2010</td>
    <td>New</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Google's new innovation</td>
    <td>Mar 05, 2010</td>
    <td>New</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Microsoft Launches first Android application</td>
    <td>Mar 05, 2010</td>
    <td>New</td>
  </tr>
</table>

Note that I have defined “ListTable” as the class name for the table and nothing else.

Now in the head section of the html, include prototype Javascript Library.

<script type=”text/javascript” src=”prototype.js”></script>

You can download Prototype Library from here: http://www.prototypejs.org/download

This is the basic styles we will define for the table with a class “ListTable“:

<style>
.ListTable {
	border-left:1px solid #202020;
	border-right:1px solid #202020;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:left;
	background-color:#1e1e1e;
}
.ListTable th, table.ListTable th {
	background-color:#161614;
	height:26px;
	vertical-align:middle;
	padding-left:10px;
	text-align:left;
	font-weight:normal;
	text-transform:uppercase;
	color:#b7b7b7;
}
.oddRow, tr.oddRow {
	background-color:#494949;
}
</style>

Now, add the below piece of Javascript in your html. This script will be called when the DOM is ready (similar to Window.onLoad).

<script>
document.observe('dom:loaded', function(){
	$$('table.ListTable tr:nth-child(odd)').invoke("addClassName", "oddRow");
});
</script>

Notice that we are applying a class named “oddRow” to alternate table rows in the table which has a class applied “ListTable“.

Here is a screen shot of the table generated using the above method.

Enjoy!

ASK a Question!