Zebra striping

Last updated
Zebra striping used in Nautilus. Zebra-striping.png
Zebra striping used in Nautilus.

Zebra striping is the coloring of every other row of a table to improve readability. [1] Although zebra striping has been used for a long time to improve readability, there is relatively little data on how much it helps. [2] [3]

Contents

Implementation

In HTML documents, zebra striping can be implemented using the Cascading Style Sheets :nth-child(even) pseudo-selector. [4] [5]

The Bootstrap CSS framework features zebra striping through the .table-striped class. [6]

See also

References

  1. Lee, Michael; Kent, Travis; Carswell, C. Melody; Seidelman, Will; Sublette, Michelle (2014-10-17). "Zebra-Striping: Visual Flow in Grid-based Graphic Design". Proceedings of the Human Factors and Ergonomics Society Annual Meeting . doi:10.1177/1541931214581275.
  2. Enders, Jessica (2008-05-06). "Zebra Striping: Does it Really Help?". A List Apart .
  3. Enders, Jessica (2008-09-10). "Zebra Striping: More Data for the Case". A List Apart .
  4. "How to create a zebra stripped table with CSS ?". GeeksforGeeks. 2022-02-04. Retrieved 2024-04-11.
  5. "How TO - Zebra Striped Table". W3Schools . Retrieved 2024-04-10.
  6. "Tables". getbootstrap.com. Retrieved 24 August 2024.