Download this free utility below.
Zip File size: 1 Kb
Alternating Table Row Colors is available in Zip folder download link below. Read and apply the following Instructions, you'll have it up and running in no time.
Alternating HTML table row colors using javascript 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. This is especially helpful if you're a web design webmaster.
Table Row Colors screenshot
You'll be inserting script into your page head, body tag, and body to get this going in 3 easy steps. The table colors are easily customizable by changing the values in the javascript. Let's get started...
1. Start by inserting a bit of javascript within the HEAD section of your page
(included in the ZIP file download, below):
<head>
<script>
function setcolor() {
var tbl = document.getElementById("rowcolors");
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>
</head>
2. Next, we add this Onload script to the BODY tag:
<body onload="setcolor();">
3. Lastly, set up your HTML table within the BODY:
<body>
<table cellpadding="8" cellspacing="2" id="rowcolors">
<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>
</body>
IMPORTANT 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. In the examples above, I've used the ID as 'rowcolors'.
Open your page with a browser and test the script. You can change the colors (in the javascript, step 1 above) to match your website.
The same result of alternating HTML table row colors can be rendered using CSS. See our Alternating HTML Table Row Colors using CSS page.
Preview Alternating Table Row Colors Zip file
the download link will be at top right of Preview