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 Change the Background Color of Table using CSS?

AkshayGulati

Improve

Article Tags :

How To Set Alternate Table Row Color Using CSS?

Using the :nth-child() pseudo-class

Similar Reads

Thank You!

What kind of Experience do you want to share?