How TO - Zebra Striped Table

Learn how to create a zebra striped table with CSS.

Zebra Striping a Table

To create a zebra-striped table, use the nth-child() selector and add a background-color to all even (or odd) table rows:

tr:nth-child(even) {
background-color: #f2f2f2;
}

Go to our CSS Tables Tutorial to learn more about how to style tables.

Go to our CSS Selector Reference to learn more about the nth-child() selector.