Alternating Table Row Colors Using Javascript

Download this free PDF document from the link below.

screenshot of table row colors
sample table

Alternating Table Row Colors is available in ZIP and may be downloaded free. You have permission to redistribute it, share it with friends, and copy it to your cloud backup drive. Open the PDF and print. Enjoy!

download ZIP file below

Alternating table row color script is easy to implement and saves a ton of work. Rather than labelling 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.


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"); = "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";
tbl.rows[i].style.backgroundColor = "brown";

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">
<th>TH Name 1 </th>
<th>TH Name 2 </th>
<td> TD Table Data 1 </td>
<td> TD Table Data 2 </td>
<td> TD Table Data 3 </td>
<td> TD Table Data 4 </td>
<td> TD Table Data 5 </td>
<td> Table Data 6 </td>
<td> TD Table Data 7 </td>
<td> TD bla bla bla 8 </td>

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 ZIP file Alternating Table Row Colors