[Suggestion] Using Zebra/Quagga tables in administration...

You have a suggestion for a future version of phpMyFAQ? Then post it here!

Moderator: Thorsten

Post Reply
pt20100201
Posts: 134
Joined: Mon Feb 01, 2010 2:11 pm
Location: Porto . Portugal
Contact:

[Suggestion] Using Zebra/Quagga tables in administration...

Post by pt20100201 » Mon Nov 05, 2012 6:17 am

[Suggestion] Using Zebra/Quagga tables in administration interface

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) {...} 
or

Code: Select all

tr:nth-child(2n+0) {...}
tr:nth-child(2n+1) {...}
or

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

Thorsten
Posts: 15041
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: [Suggestion] Using Zebra/Quagga tables in administration

Post by Thorsten » Mon Nov 05, 2012 7:41 am

Hi,

phpMyFAQ 2.8 uses "zebra" styled tables with Bootstrap: http://twitter.github.com/bootstrap/bas ... tml#tables

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

pt20100201
Posts: 134
Joined: Mon Feb 01, 2010 2:11 pm
Location: Porto . Portugal
Contact:

Re: [Suggestion] Using Zebra/Quagga tables in administration

Post by pt20100201 » Wed Nov 07, 2012 7:25 pm

Re: [Suggestion] Using Zebra/Quagga tables in administration

Dear Thorsten Rinne

First, the author of the original post apologies for not searching/reading enough the phpMyFAQ posts – being in holidays isn't an excuse.

So, other recently posted text may suffer from the same problem - I made a copy&paste of already existing (almost draft) text.
Thorsten wrote: ...
phpMyFAQ 2.8 uses "zebra" styled tables with Bootstrap: http://twitter.github.com/bootstrap/bas ... tml#tables
...

As far as I understands, phpMyFAQ is adopting Bootstrap as it's major base framework. Thus, I think that this post may be of interest.

Regarding Zebra and Quagga tables:
As referred in the original text, the phpMyFAQ administration interface already use Zebra tables.

I found no references to Quagga tables in Bootstrap's site.
I believe that this table style is useful, perhaps a suggestion to Bootstrap authors by a respected developer may be useful
(if he/she found this implementation relevant).
..
Kind regards
2012-11-07
pt20100201
..

Thorsten
Posts: 15041
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: [Suggestion] Using Zebra/Quagga tables in administration

Post by Thorsten » Wed Nov 07, 2012 7:32 pm

Hi,

no problem! :-)

Bootstrap has indeed no support for "quagga" tables, I need to say that I never saw "quagga" tables in any web application although they look nice. I think about where to use it and where it would fit better than the "zebra" ones.

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

Post Reply