Dear Thorsten Rinne / Development Team
One method to help reading long (table) lists is called "Zebra tables" (used by phpMyFAQ in the administration interface).
However, for really long lists (our case – articles list) there is a variant: "Quagga tables".
Zebra tables have a pattern of alternate lines of dark/light background colors (black/white, “black”/orange in phpMyFAQ).
Quagga tables add an extra shade/color. Example: black/gray/white.
Applying the first pattern with CSS elements and attributes is simple:[1][2]
Code: Select all
tr:nth-of-type(even) {...}
tr:nth-of-type(odd) {...}
Code: Select all
tr:nth-child(2n+0) {...}
tr:nth-child(2n+1) {...}
Code: Select all
.even { background-color:#FFF; }
.odd { background-color:#666; }
This is not the case with Quagga tables.[3]
It may be possible - using a mix of “odd”, “even” and calculations – to achieve the desired layout but
- a) many browsers still don't understand “odd”, “even” and “CSS calculations”, and
- b) using “CSS calculations” slows page presentation.
There is a method to obtain the same result: it make use of JavaScript but it may be ported to other languages (PHP, …)[3]
In this case
- a) a user may block JavaScript for security/privacy reasons, and
- b) constructing the style on the server may interfere with the (desirable) separation of data and presentation (style) instructions.
Some references
[1] It also works with columns and images:
Jennifer Kyrnin. [2012-04-10]. Examples Using nth-of-type() CSS 3 Pseudo-Class. http://webdesign.about.com/od/examples/ ... -placement
[2] [CSS-Tricks]. 2009-09-29. http://css-tricks.com/snippets/php/php- ... g-a-table/
[3] Zebra and Quagga tables example (with JavaScript - link):
Stephen Poley. [2011-08-21]. Web Matters - Zebra tables - doing them right. http://sbpoley.home.xs4all.nl/webmatter ... ables.html
[4] Styling tables - W3C Wiki. 2012-08-11. http://www.w3.org/wiki/Styling_tables#Common_variations
[5] Bert Bos. 2012-10-20. CSS: even and odd rules. http://www.w3.org/Style/Examples/007/evenodd
[6] Tantek Çelik et al. 2011-09-29. Selectors Level 3. http://www.w3.org/TR/css3-selectors/#structural-pseudos
[7] Jennifer Kyrnin. [2012-04-10]. Examples Using nth-of-type() CSS 3 Pseudo-Class. http://webdesign.about.com/od/examples/ ... htm#zebras
Kind regards
2012-11-05
pt20100201