Creating Striped Tables

To create a striped "zebra" effect on an HTML table, use the CSS :nth-child pseudo-class to apply a different background color to alternating rows.

When you have a table with many rows, it can be difficult for the user's eye to track across a single line without getting lost. Striping the table (giving every other row a slightly darker background color) is a standard design pattern that solves this problem elegantly.

Using the :nth-child Selector

In the past, developers had to manually add a "stripe" class to every alternating row in their HTML. Fortunately, CSS provides the :nth-child() pseudo-class, which can automatically select alternate elements.

To stripe a table, we target the tr (Table Row) elements. We usually want to apply this only to the body of the table, not the header, so it's a good idea to ensure your rows are wrapped in a tbody tag.

Full Working Example

The following example demonstrates a fully styled table featuring alternating row colors. Try hovering over the rows to see how a hover effect can complement the zebra striping: