How to Create Zebra Striped Tables With CSS

Using :nth-of-type(n) with tables

To make tables easier to read, it is often helpful to style rows with alternating background colors. One of the most common ways to style tables is to set the background color of every other row. This is often referred to as "zebra stripes."

You can accomplish this by setting every other row with a CSS class and then defining the style for that class. This works but is not the best or most efficient way to go about it. When using this method, every time you need to edit that table you may have to edit every single row in the table to ensure each row is consistent with the changes. For example, if you insert a new row to your table, every other row below it needs to have the class changed.

CSS makes it easy to style tables with zebra stripes. You don't need to add any extra HTML attributes or CSS classes, you just use the: nth-of-type(n) CSS selector

The: nth-of-type(n) selector is a structural pseudo-class in CSS that allows you to style elements based on their relationships to parent and sibling elements. You can use it to select one or more elements based on their source order. In other words, it can match every element that is the nth child of a particular type of its parent.

The letter n can be a keyword (such as odd or even), a number, or a formula.

For example, to style every other paragraph tag with a yellow background color, your CSS document would include:

undefined

p:nth-of-type(odd) {
background: yellow;
}

Start With Your HTML Table

First, create your table as you would normally write it in HTML. Don't add any special classes to the rows or columns.

In your stylesheet, add the following CSS:

tr:nth-of-type(odd) {
background-color:#ccc;
}

This will style every other row with a gray background color starting with the first row.

Style Alternating Columns in the Same Way

You can do the same kind of styling to columns in your tables. To do so, simply change the tr in your CSS class to td. For example:

td:nth-of-type(odd) {
background-color:#ccc;
}

Using Formulas in an nth-of-type(n) Selector

The syntax for a formula used in the selector is an+b.

  • a is a number that represents the cycle or index size.
  • n is actually the letter "n" and represents a counter, which stars at 0.
  • + is an operator, which may also be "-"
  • b is an integer and represents the offset value — for example, how many rows down should the selector begin applying the background color. This is required if an operator is included in the formula.

For example, if you want to set a background color for every 3rd row, your formula would be 3n+0. Your CSS might look like this:​

tr:nth-of-type(3n+0) {
background: slategray;
}

Helpful Tools for Using nth-of-type Selector

If you're feeling a little daunted by the formula aspect of using the pseudo-class nth-of-type selector, try the: nth Tester site as a useful tool that can help you define the syntax to achieve the look you want. Use the dropdown menu to select nth-of-type (you can also experiment with other pseudo-classes here, too, such as nth-child).

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Create Zebra Striped Tables With CSS." ThoughtCo, Dec. 2, 2021, thoughtco.com/zebra-striped-table-in-css3-3466982. Kyrnin, Jennifer. (2021, December 2). How to Create Zebra Striped Tables With CSS. Retrieved from https://www.thoughtco.com/zebra-striped-table-in-css3-3466982 Kyrnin, Jennifer. "How to Create Zebra Striped Tables With CSS." ThoughtCo. https://www.thoughtco.com/zebra-striped-table-in-css3-3466982 (accessed March 19, 2024).