Formatage Des Tableaux Simples

Question

Comment appliquer des styles aux tableaux (simples) pour créer des tables 'zébrées', des rangées d'en-têtes automatiques, etc?

Réponse

PmWiki 2.0.beta8 a introduit la possibilité pour l'administrateur du wiki de fournir des styles par défaut pour les lignes et les colonnes des tableaux créées avec les balises de tableaux simples de PmWiki. Les variables {$TableRowAttrFmt et $}TableCellAttrFmt spécifient les attributs à inclure dans les balises HTML de tableaux (<tr>, <td>, et <th>) crées par la fonction de formatage. De plus, les variables {$...Fmt, $}TableRowCount, {$TableRowIndex et $}TableCellCount peuvent être utilisées pour avoir des lignes ou des colonnes spécifiques dans une table.

Le reste de cette page donne des définitions de variables et de classes qui peuvent être utilisées pour créer des tableaux comportant des styles et formats variés. Il suppose une certaine familiarité avec la configuration locale et les feuilles de style CSS.

Nota: Les exemples définis ci-dessous ne s'affichent correctement que sur la page du site original PmWiki.

Exemple 1 - faire ressortir la première rangée d'une table

Il est souvent souhaité avoir un style différent pour la première rangées d'un tableau. La méthode la plus directe (et appropriée au HTML) pour faire ceci est d'utiliser un style CSS pour les balises <th> et ensuite d'utiliser les balises d'entêtes ||! entête || pour les cellules de la première rangée. Par exemple, la specification CSS:

    table.firstrow th { background-color:#ccccff }

fait que toutes les entêtes d'un tableau avec class='firstrow' auront une couleur de fond grise:

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

Cependant, comme certains auteurs ne sont pas forcément familiers ou ne veulent pas utiliser les balises d'entêtes, un administrateur peut choisir de donner à chaque rangée un attribut de classe unique par numéro de rangée:

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

ici, $TableRowCount est un compteur interne qui suit les numéros de rangée de chaque table. Donc, ce paramètre fait que les balises <tr> des rangées successives sont affectées d'un attribut de classe 'row1', 'row2', 'row3', 'row4', etc. Nous pouvons alors utiliser ces attributs de classe pour formater la première rangée du tableau:

    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   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Ou, pour définir un style pour la 1ère, 4ème, et 8ème rangée:

    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   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Exemple 2 - Tableaux 'zébrés'

Quelquefois nous voulons être capable d'afficher des tableaux ou chaque rangée est différente de la précédente. Nous pouvons suivre l'exemple ci-dessus et créer des styles row1, row3, row5, row7, etc., mais ceci sera fastidieux pour des grands tableaux. La valeur maximum de la variable {$TableRowIndex peut être utilisée pour ''indexer'' des séquences répétitives de rangées, comme 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, ... . L'index maximum est défini dans $}TableRowIndexMax, donc

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

nous donne des rangées alternées avec les attributs définis class='ind1' et class='ind2'. Nous pouvons alors définir un style pour les rangées impaires avec '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   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Ou, si nous définissons $TableRowIndexMax=4, et utilisons

    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   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Exemple 3 - Bandes de colonnes

De manière similaire aux rangées, nous pouvons aussi utiliser {$TableCellAttrFmt et $}TableCellCount pour définir des attributs sur les colonnes:

    {$TableCellAttrFmt = '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   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||||

Contrairement aux rangées, il n'y a pas de variables {$TableCellIndex or $}TableCellIndexMax définies (Il n'est pas envisagé des tables avec beaucoup de colonnes).

Exemple 4 - hachurage

Bien sûr, avec des styles CSS évolués nous pouvont créer des effets spéciaux sur les tableaux. Par exemple, voici quelques CSS qui combinent des bandes de tableaux et de lignes:

  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   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||          ||
||  alpha ||  beta ||  gamma ||  delta ||  epsilon ||
||  zeta  ||  eta  ||  theta ||  iota  ||  kappa   ||
||  lambda ||  mu   ||  nu    ||  xi    ||  omikron ||
||  pi    ||  rho  ||  sigma ||  tau   ||  upsilon ||
||  phi   ||  chi  ||  psi   ||  omega ||          ||

Notes, commentaires

Contributeurs

• Pm?, 2004-12-13, texte original

<< | Index compléments? | >>

Traduction de la page Cookbook:FormattingSimpleTables

Page originale sur {*{$FullName}]] - [[$}[Backlinks]->{*{$FullName}?action=search&q=link={*$}FullName}&fmt=title
Dernières modifications:
[[{*{$FullName}]]: {*$}LastModified}