TablesLesson 157Free preview

Zebra Striped Table

This lesson is part of How To · All levels

Summary

This lesson discusses zebra stripping, which is the alternating of different background colors on the table rows. This pattern improves the readability of long tables by helping the eye track the line. CSS provides a nth-child selector so that colors can be applied without adding a class to each row.

Key points

Use the nth-child(even) or nth-child(odd) selector on the tbody row
Limit the selector to tbody so the header line doesn't go colored.
Add a hover effect to help the user mark the line being read
Make sure the contrast of colors is sufficient and don't rely on colors alone to convey information

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.