How TO - Zebra Striped Table

❮ Previous Next ❯

Learn how to create a zebra striped table with CSS.

Zebra Striping a Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

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

Example

tr:nth-child(even) {
  background-color: #f2f2f2;
}
Try it Yourself »

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.


❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.