This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 1 added 86 lines
!!! Zebra Table
%%tabbedSection
%%tab-Introduction
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:
%%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
/%
/%
%%tab-Usage
! Usage
Basic syntax:
{{{
%%zebra-table ... %%
%%zebra-<colorOdd> ... %%
%%zebra-<colorOdd>-<colorEven> ... %%
}}}
You can specify the odd and/or even colors using
[html hex color|http://html-color-codes.com/] 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
/%
}}}
/%
%%tab-Examples
!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}}
%%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 %%(background:#ffe0e0;) ''#ffe0e0'' %% : {{%~%zebra-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 %%(background:#ffe0e0;) odd%% and %%(background:#ffff80;) even%% rows colored {{%~%zebra-ffe0e0-ffff80}}
%%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
/%
/%
/%!! More Information
There might be more information for this subject on one of the following:
[{ReferringPagesPlugin before='*' after='\n' }]
----
* [Category.Documentation]
* [Category.Style]