Skip to content
Related Articles

Related Articles

How to set alternate table row color using CSS?

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jul, 2021

The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child. 
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: It sets the color to alternate even rows in a table.  

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: 

Example 2: It sets the color to alternate odd rows in a table. 

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:  

Supported Browser:

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.5
  • Opera 9.6
  • Safari 3.2
     

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!