CSS3 Selectors: Format alternate rows in a table using nth-child

This entry is part 29 of 40 in the series CSS3 Selectors

If you notice the table in this site, the alternate rows in the table have been formatted differently.

We can use tr:nth-child(even) to format the even rows in the table.

HTML Table

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
            tr:nth-child(even) {
                background: lightgray;
<table border='1'>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
        <td>New Order</td>
        <td>Smell Like Teen Spirit</td>
        <td>Rod Stewart</td>
        <td>Out Of Order</td>


Series Navigation<< CSS3 Selectors: nth-child
CSS3 Selectors: nth-last-child >>

Leave a comment

Leave a Reply