Alternating Table Row Color HTML

Alternating table row colors is a  approach that increases the readability in a Table. With the help of CSS we can get this done easily by using the ":nth-child() pseudo-class" with the keywords "even or odd". 

This approach is often called the  "zebra striping" effect.

/* Styles the odd rows (1, 3, 5, etc.) */
tr:nth-child(odd) {
 background-color: #f2f2f2; /* Light gray background for odd rows */
}
/* Styles the even rows (2, 4, 6, etc.) */
tr:nth-child(even) {
 background-color: #ffffff; /* White background for even rows */
}

A sample output and code:

<table>
    <tr>
      <td>1</td>        <td>One</td>       <td>0</td>
    </tr>
    <tr>
      <td>2</td>       <td>Two</td>       <td>10</td>
    </tr>
    <tr>
      <td>3</td>       <td>Three</td>       <td>11</td>
    </tr>
    <tr>
      <td>4</td>       <td>Four</td>       <td>100</td>
    </tr>
</table>