5

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?

  • 2
    While useful at times (in particular, when needing to group rows) they are more often than not a crutch and are being used in lieu of good spacing and alignment. – DA01 Oct 12 '14 at 1:26
  • 2
    Agree with @DumbNic. Atm, I'm confused whether zebra striping is meant as lines between the rows, or alternately-coloured rows. – Vincent Jan 24 '15 at 12:05
  • @Vincent as far as I know, zebra striping is only used to refer to the practice of alternating between dark and light coloured rows in a table rather than lines between table rows. – Michael Lai Mar 22 '15 at 21:50
1

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 ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.