How To Set Alternate Table Row Color Using CSS?

Last Updated : 21 Oct, 2024

To set alternate table row colors, we can use the :nth-child() pseudo-class in CSS. This technique helps improve the readability of a table by making it easier to differentiate between rows. In this article, we’ll cover how to set alternate row colors using the :nth-child() pseudo-class and provide step-by-step instructions to implement it in your HTML and CSS code.

Using the :nth-child() pseudo-class

The :nth-child() selector targets elements based on their position in a group of sibling elements, which in this case refers to table rows (<tr>). You can specify whether you want to style even or odd rows using this pseudo-class.

Syntax:

:nth-child(number) {     // CSS Property }

Where number is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notation.

odd: It represents the elements whose position is odd in a series: 1, 3, 5, etc

Syntax:

element:nth-child(even)

even: It represents the elements whose position is even in a series: 2, 4, 6, etc.

Syntax:

element:nth-child(odd)

Example 1: In this example, we use the :nth-child(even) selector to apply a light green background to even-numbered rows, enhancing readability.

html

<!DOCTYPE html> <html>  <head>      <!-- CSS style to set alternate table              row using color -->     <style>         table {             border-collapse: collapse;             width: 100%;         }          th,         td {             text-align: left;             padding: 8px;         }          tr:nth-child(even) {             background-color: Lightgreen;         }     </style> </head>  <body>     <table>         <tr>             <th>Name</th>             <th>Designation</th>             <th>Salary</th>         </tr>          <tr>             <td>Steve</td>             <td>Manager</td>             <td>1,00,000</td>         </tr>          <tr>             <td>SURAJ</td>             <td>Assistant Manager</td>             <td>50,000</td>         </tr>          <tr>             <td>Khushboo</td>             <td>Analysist</td>             <td>65,000</td>         </tr>          <tr>             <td>Kartik</td>             <td>Worker</td>             <td>20,000</td>         </tr>          <tr>             <td>Saksham</td>             <td>Worker</td>             <td>20,000</td>         </tr>     </table> </body>  </html>

Output:

Using the :nth-child() pseudo-class

Example 2: In this example, we use the :nth-child(odd) selector to apply a light green background to odd-numbered rows, providing a visual distinction between the rows.

html

<!DOCTYPE html> <html>  <head>     <title>         Set alternate row in table     </title>      <style>         table {             border-collapse: collapse;             width: 100%;         }          th,         td {             text-align: left;             padding: 8px;         }          tr:nth-child(odd) {             background-color: Lightgreen;         }     </style> </head>  <body>     <table>         <tr>             <th>Name</th>             <th>Designation</th>             <th>Salary</th>         </tr>          <tr>             <td>Steve</td>             <td>Manager</td>             <td>1, 00, 000</td>         </tr>          <tr>             <td>SURAJ</td>             <td>Assistant Manager</td>             <td>50, 000</td>         </tr>          <tr>             <td>Khushboo</td>             <td>Analysist</td>             <td>65, 000</td>         </tr>          <tr>             <td>Kartik</td>             <td>Worker</td>             <td>20, 000</td>         </tr>          <tr>             <td>Saksham</td>             <td>Worker</td>             <td>20, 000</td>         </tr>     </table> </body>  <html>

Output:

Set Alternate Table Row Color Using CSS

Supported Browser:

How to set the table layout algorithm using CSS ?

AkshayGulati

Improve

Article Tags :

How To Set Alternate Table Row Color Using CSS?

Using the :nth-child() pseudo-class

Similar Reads