View Attach Info

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

Add new attachment

In order to upload a new attachment to this page, please use the following box to find the file, then click on “Upload”.
« This page (revision-5) was last changed on 07-Oct-2007 11:09 by DirkFrederickx [RSS]