This page is applicable to older versions of the BrushedTemplate.
Now replaced by TablePlugin

Making tables is not always convenient with the standard Wiki markup based on | and ||. Especially when a table cell contains multiple paragraphs of text, markup, etc. it can be quite cumbersome.

This feature allows you to turn an ordinary Wiki list into a table, by enclosing it with a ... tag. This feature is .css driven. It only requires some lines in your jspwiki.css
--DF, Jun 2004

Usage #

Put a tag around a set of Wiki lists and change it into a table.
Every * list-item becomes a table cell,
Every # list-item becomes a table header-cell.
Each row of the table is separated by a blank line.

 
%%list-table 
# header-cell 1
# header-cell 2
# header-cell 3

* Table-cell 1\\
  Multiple lines can easily fit into a cell.
* Table-cell 2
* Table-cell 3. Editing a lists iso of a table is much easier

* Table-cell 1
* Table-cell 2
* Table-cell 3
%% 

You can see the result here ...

  1. header-cell1
  2. header-cell2
  3. header-cell3
  • Table-cell 1
    Multiple lines can easily fit into a cell.
  • Table-cell 2
  • Table-cell 3. Editing a lists iso of a table is much easier
  • Table-cell 1
  • Table-cell 2
  • Table-cell 3

How does it work #

Add following css lines to the ./templates/<YourWikiTemplate>/jspwiki.css.
The css lines will change the display attribute of the ul, ol and li elements inside the <div class='list-table'> element.

Of course, you can change the actual look and feel of the table according your needs.

/* %%list-table      */
/* # for header rows */
/* # for header rows */
/*                   */
/* * for data rows   */
/* * for data rows   */
/* %%                */
   
.list-table 
   { display:  table; 
   }
.list-table ul,
.list-table ol
   { display:  table-row;
   }
/* hide intermedieate paragraphs which are used to split rows */
.list-table p
   { display:  none; 
   }
.list-table ul li
   { display:     table-cell; 
     vertical-align: top;
     border :     1px solid silver;
     padding:     0.25em 0.5em 0.25em 0.5em;

   }  
.list-table ol li
   { display:     table-cell; 
     vertical-align: top;
     border:      1px solid silver;  
     text-align:  center;
     background:  #cecece;
     font-weight: bold;
     padding:     0.25em 0.5em 0.25em 0.5em;
   }  

Example #

See BrushedTemplate


er, is the list table working here?

--Allan Marcus, 17-Jun-2006

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-7) was last changed on 17-Jun-2006 07:12 by Dirk Frederickx