You can easy Alternate Table Row Color by CSS with property nth-child(odd) and nth-child(even)

Here the code:

<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project                                              -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       --> 
<head>

<style type="text/css">
/* Table Setup */
#tablesample {width:100%;}
#tablesample tr:nth-child(odd)
{
background:#D4F5DE;
}
#tablesample tr:nth-child(even)
{
background:#D2D2F4;
}
</style>

 
</head>
  
<body>
<table id="tablesample">
  <tr>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>  
    <td>Content</td>
    <td>Content</td>
  </tr>
    <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <th>Footer</th>
    <th>Footer</th>
    <th>Footer</th>
    <th>Footer</th>
  </tr>
</table>

</body>
  
</html>

Here the result:

Header Header Header Header
Content Content Content Content
Content Content Content Content
Content Content Content Content
Content Content Content Content
Content Content Content Content
Content Content Content Content
Content Content Content Content
Footer Footer Footer Footer

Distanziatore bianco

My official WebSite >