Striped Background Tables

To display striped background tables using CSS, use nth-child() CSS selector for table rows, and set background-color for even or odd rows. We may also set a color for even rows, and another color for odd rows.

The following is the CSS to set border-collapse value.

The syntax to set background-color for even numbered rows.

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

The syntax to set background-color for odd numbered rows.

tr:nth-child(odd) {
  background-color: #eee;
}

The syntax to set different background-color for even and odd numbered rows.

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

Examples

ADVERTISEMENT

1. Background Color for Even Numbered Table Rows

In the following example, we take a table with two columns, and four rows; and apply background color to even numbered rows in the table.

index.html

2. Background Color for Odd Numbered Table Rows

In the following example, we take a table with two columns, and four rows; and apply background color to odd numbered rows in the table.

index.html

3. Different Background Color for Odd and Even Numbered Table Rows

In the following example, we take a table with two columns, and four rows; apply a background color to odd numbered rows, and a different color to even numbered rows, in the table.

index.html

Conclusion

In this CSS Tutorial, we learned how to set background color for even and/or odd numbered rows in the table, and display a striped table, with examples.