Zebra Table#

This JSPWikiStyle allows you to add alternate row coloring to your (large) tables. You can do this by simply enclosing the table inside %%zebra-table ... %% tags.

Example:

column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

Usage #

Basic syntax: 

%%zebra-table ... %%
%%zebra-<colorOdd> ... %%
%%zebra-<colorOdd>-<colorEven> ... %%

You can specify the odd and/or even colors using html hex color values or HTMLColorNames like aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow and transparent. When nothing specified, the odd rows get the css class '.odd'. (see your jspwiki.css to the actual formatting of this class)

Here is an example of a table with zebra style: 

%%zebra-table 
|| column-head1 || column-head2 
| cell-data | cell data 
| cell-data | cell data 
| cell-data | cell data 
/%

Examples#

You can see the result here
  • normal table
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data

  • zebra table with odd rows styled according to jspwiki.css : %%zebra-table
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

  • zebra table with odd rows colored #ffe0e0 : %%zebra-ffe0e0
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

  • zebra table with odd and even rows colored %%zebra-ffe0e0-ffff80
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

This page (revision-4) was last changed on 29-Apr-2016 21:05 by Dirk Frederickx  Top