Code snippet below.
Read and apply the following Instructions, you'll have it up and running in no time.
Alternating HTML table row colors using CSS is easy to implement and saves a ton of work. Rather than labeling every other TD row, simply setup the CSS and let it do the work for you.
You'll be inserting CSS into your page head, and HTML within the body to get this going in 2 easy steps.
The table colors are easily customizable by changing the values in the CSS. Let's get started...
Table Row Colors screenshot
1. Start by inserting 2 lines of CSS within the HEAD section of your page:
<head>
<style>
tr:nth-child(even) {background-color:#242424;}
tr:nth-child(odd) {background-color:#000000;}
</style>
</head>
2. 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>
And that's it! Easy huh?
Open your page with a browser and test the table. You can change the colors (in the CSS, step 1 above) to match your website colors.
The same result of alternating HTML table row colors can be rendered using Javascript. See our Alternating HTML Table Row Colors using Javascript page.