How To Make Table Rows Color Alternet Using Css

Alternating table row colors

Alternating the color of the table makes it very easy to read. When we print a long report, and its color is the same, it is very difficult to read, if the color of each row is different then it becomes very easy to read.

In This Article we will learn about this.

First Of All Open Your HTML Editor Tool And make Table

<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td height="32" align="center"><strong>Name</strong></td>
    <td align="center"><strong>Class</strong></td>
    <td align="center"><strong>Section </strong></td>
    <td align="center"><strong>Father Name</strong></td>
    <td align="center"><strong>Mob-No</strong></td>
  </tr>
  <tr>
    <td height="32" align="center">Sonu Singh </td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Chandan Singh </td>
    <td align="center">9999999999</td>
  </tr>
  <tr>
    <td height="32" align="center">Satya Rai</td>
    <td align="center">5 </td>
    <td align="center">A</td>
    <td align="center">Sunny Rai </td>
    <td align="center">9999999999</td>
  </tr>
  <tr>
    <td height="32" align="center">Rohan Chauhan</td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Ramjatan Chauhan</td>
    <td align="center">9999999999</td>
  </tr>
  <tr>
    <td height="32" align="center">Vivan </td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Sandeep Chauhan</td>
    <td align="center">999999999</td>
  </tr>
  <tr>
    <td height="32" align="center">Rohan Chauhan</td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Ramjatan Chauhan</td>
    <td align="center">9999999999</td>
  </tr>
  <tr>
    <td height="32" align="center">Satya Rai</td>
    <td align="center">5 </td>
    <td align="center">A</td>
    <td align="center">Sunny Rai </td>
    <td align="center">9999999999</td>
  </tr>
</table>

Now In your Head Section Add Css

<style>
body
{
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
}

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
</style>

Leave a Reply

Your email address will not be published. Required fields are marked *