Alternating HTML Table Row Colors

Download this free utility below.

Alternating Table Row Colors is available in ZIP and may be downloaded free. Enjoy!

Table Row Colors screenshot
sample table

Alternating table row color HTML script is easy to implement and saves a ton of work. Rather than labeling every other TD row, simply setup the script and let it do the work for you.

You'll be inserting script into your page head, body tag, and body to get this going.

The table colors are easily customizable by changing the values in the javascript.

Instructions

1. Start by inserting a bit of javascript within the HEAD section of your page
(included in ZIP download, below):

<script type="text/javascript">
function setcolor() {
var tbl = document.getElementById("server");
tbl.style.color = "white";
tbl.rows[0].style.backgroundColor = "green";
for (var i = 1; i < tbl.rows.length; i++) {
if (i % 2 == 0)
tbl.rows[i].style.backgroundColor = "gray";
else
tbl.rows[i].style.backgroundColor = "brown";
}
}
</script>


2. Next, add an Onload script to the body tag:

<body onload="setcolor();">


3. Lastly, set up your table. Here's a sample:

<table cellpadding="8" cellspacing="2" id="server">
<tr>
<th>TH Name 1 </th>
<th>TH Name 2 </th>
</tr>
<tr>
<td> TD Table Data 1 </td>
<td> TD Table Data 2 </td>
</tr>
<tr>
<td> TD Table Data 3 </td>
<td> TD Table Data 4 </td>
</tr>
<tr>
<td> TD Table Data 5 </td>
<td> Table Data 6 </td>
</tr>
<tr>
<td> TD Table Data 7 </td>
<td> TD bla bla bla 8 </td>
</tr>
</table>

NOTE: the ID of your table MUST match the ID in the javascript code located in the head section. Change it to whatever you wish, but they must match.

Open your page with a browser and test the script, and change the colors to match your website.


Download Alternating Table Row Colors