Question

How can I apply styles to tables to create things such as zebra tables, automatic heading rows, etc?

Answer

PmWiki 2.0.beta8 introduces support for wiki administrators to provide default stylings for the rows and columns of tables created using PmWiki's tables markup. The variables $TableRowAttrFmt and $TableCellAttrFmt specify the attributes to be included in the HTML table tags (<tr>, <td>, and <th>) created by the table formatting routine. Furthermore, the $...Fmt variables $TableRowCount, $TableRowIndex, and $TableCellCount can be used to apply styles to specific rows and columns within a table.

The rest of this page gives variable and class settings that can be used to create tables in a variety of styles and formats. It assumes a basic familiarity with local customizations and CSS style sheets.

Example 1 - highlight first row of a table

Often we may want the first row of a table to be styled differently from the remaining items in the table. The most straightforward (and HTML appropriate) mechanism to do this is to use CSS to style the <th> tags and then use table heading markup ||! heading || for the cells in the first row. For example, the CSS specification

table.firstrow th { background-color:#eeff00; }

causes all table headings in a table with class='firstrow' to be given a gray background color:

Here, $TableRowCount is an internal counter that keeps track of the number of rows in each table. Thus, this setting causes each successive <tr> tag in a table to be given class attributes of 'row1', 'row2', 'row3', 'row4', etc. We can then use these class attributes to style only the first row of the table:

Example 2 - Zebra tables

Sometimes we want to be able to display tables where every other row has a different style; these are commonly called "zebra" tables. We could follow the example above and style row1, row3, row5, row7, etc., but this would get tedious for large tables. The variable $TableRowIndex max can be used to index repeating sequences of rows, as in 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, ... . The maximum index is controlled by $TableRowIndexMax, thus