Are zebra stripes on tables more effective than good spacing and visual contrast?

In old forms or webpages I often see a lot of zebra striping used on the tables because the way the table was designed it was difficult to see the rows and columns easily when you want to locate information.

One thing I have noticed with these types of tables is that the spacing and alignment are usually rather awkward, and therefore zebra stripes seem to be the easiest design solution to get around the problem.

However, I want to know if you would only use zebra stripes if you want to keep the table small and compact but still easy to scan visually, or if with proper spacing and alignment it is easier to read without the zebra stripes (which actually then becomes a visual distraction).

Is this a case of different design strategies based on different requirements, or is one solution actually more effective than the other, and if so which is more suitable for website / webpage design?


Zebra stripes do tend to be quite disturbing in small tables, making them difficult for visual scanning. If you must (and absolutely must) use zebra stripes in a compact table, I would recommend that you keep the stroke low, lower than 2 px definitely. The most preferred solution would be to use any other color for the table background (like blue or green, for example) with white striped lines instead (still using a low stroke, since it is a compact table).

A non-compact table of either zebra stripes or other colors looks great. In this case, for zebra stripes, a thicker stroke would be fine. For colored backgrounds in a non-compact table, I would say “focus on table contents is inversely proportional to the stroke of the table lines”. Use thinner lines to avoid distraction, but if you want it to look better, thicker lines look fine.

Cheers 😉

Source : Link , Question Author : Michael Lai , Answer Author : Shreyash Chaudhari

Leave a Comment