• View
• Edit
• History
• Attach
• Print
• Backlinks

FormattingTables

(redirected from Cookbook.FormattingSimpleTables)

The information presented on this page will work with Tables, AdvancedTableDirectives and SimplifiedAdvancedTableDirectives. For Table Directives you must put class information on each table/cell/cellnr/tableend individually.

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:

|| class=firstrow border=1 cellspacing=0 width=50%
||! alpha ||! beta ||! gamma ||! delta ||! epsilon ||
||  zeta  ||! eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

However, since some authors may be unfamiliar or unwilling to use the table heading markup, an administrator might choose to give each row a unique class attribute by row number:

    $TableRowAttrFmt = "class='row\$TableRowCount'";

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:

    table.firstrow tr.row1 { background-color:#ccccff; }

|| class=firstrow border=1 cellspacing=0 width=50%
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Or, to style the 1st, 4th, and 8th rows:

    table.multirow tr.row1 { background-color:#ccccff; }
    table.multirow tr.row4 { background-color:#ffcccc; }
    table.multirow tr.row8 { background-color:#ccffcc; }

|| class=multirow border=1 cellspacing=0 width=50%
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

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

    $TableRowIndexMax = 2;
    $TableRowAttrFmt = "class='ind\$TableRowIndex'";

gives us alternating rows with class='ind1' and class='ind2' attributes set. We can then style just the odd rows with 'ind1':

    table.zebra tr.ind1 { background-color:#ddddff; }

|| class=zebra border=1 cellspacing=0 width=50%
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Or, if we set $TableRowIndexMax=4, and use

    table.zebra4 tr.ind1 { background-color:#ddddff; }
    table.zebra4 tr.ind2 { background-color:#ffffdd; }
    table.zebra4 tr.ind3 { background-color:#ddffdd; }
    table.zebra4 tr.ind4 { background-color:#ffdddd; }

|| class=zebra4 border=1 cellspacing=0 width=50%
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Example 3 - Column stripes

Similar to rows, we can also use $TableCellAttrFmt and $TableCellCount to set attributes on individual cell columns:

    $TableCellAttrFmt = "class='col\$TableCellCount'";

    table.column td.col1 { background-color:#ddddff; }
    table.column td.col3 { background-color:#ddddff; }
    table.column td.col5 { background-color:#ddddff; }

|| class=column border=1 cellspacing=0 width=50%
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Unlike rows, there aren't $TableCellIndex or $TableCellIndexMax variables defined (we don't expect tables to have a lot of columns).

Example 4 - hatching

Of course, with some advanced CSS one can create a variety of special table effects. For example, here's some CSS that combines row and column stripes:

  table.hatch td.col2 { background-color:#ffffcc; }
  table.hatch td.col4 { background-color:#ffffcc; }
  table.hatch tr.ind2 { background-color:#ddddff; }
  table.hatch tr.ind4 { background-color:#ddddff; }
  table.hatch tr.ind2 td.col2 { background-color:#ccffcc; }
  table.hatch tr.ind2 td.col4 { background-color:#ccffcc; }
  table.hatch tr.ind4 td.col2 { background-color:#ccffcc; }
  table.hatch tr.ind4 td.col4 { background-color:#ccffcc; }

|| class=hatch border=1 cellspacing=0 width=50%
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||          ||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lamda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||          ||

Notes

Contributors

• Pm, 2004-12-13, original text

Comments

See discussion at FormattingTables-Talk