Ce wiki est un espace de travail et d'organisation, les informations qu'il contient peuvent être fausses ou erronnées et ne constitue pas une communication officielle d'Actux.

Question

Comment appliquer des styles aux tableaux (simples) pour crer des tables 'zbres', des ranges d'en-ttes automatiques, etc?

Rponse

PmWiki 2.0.beta8 a introduit la possibilit pour l'administrateur du wiki de fournir des styles par dfaut pour les lignes et les colonnes des tableaux cres avec les balises de tableaux simples de PmWiki. Les variables $TableRowAttrFmt et $TableCellAttrFmt spcifient les attributs inclure dans les balises HTML de tableaux (<tr>, <td>, et <th>) cres par la fonction de formatage. De plus, les variables $...Fmt, $TableRowCount, $TableRowIndex et $TableCellCount peuvent tre utilises pour avoir des lignes ou des colonnes spcifiques dans une table.

Le reste de cette page donne des dfinitions de variables et de classes qui peuvent tre utilises pour crer des tableaux comportant des styles et formats varis. Il suppose une certaine familiarit avec la configuration locale et les feuilles de style CSS.

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

Exemple 1 - faire ressortir la premire range d'une table

Il est souvent souhait avoir un style diffrent pour la premire ranges d'un tableau. La mthode la plus directe (et approprie au HTML) pour faire ceci est d'utiliser un style CSS pour les balises <th> et ensuite d'utiliser les balises d'enttes ||! entte || pour les cellules de la premire range. Par exemple, la specification CSS:

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

fait que toutes les enttes 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 ||||
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega

Cependant, comme certains auteurs ne sont pas forcment familiers ou ne veulent pas utiliser les balises d'enttes, un administrateur peut choisir de donner chaque range un attribut de classe unique par numro de range:

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

ici, $TableRowCount est un compteur interne qui suit les numros de range de chaque table. Donc, ce paramtre fait que les balises <tr> des ranges successives sont affectes d'un attribut de classe 'row1', 'row2', 'row3', 'row4', etc. Nous pouvons alors utiliser ces attributs de classe pour formater la premire range 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 ||||
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega

Ou, pour dfinir un style pour la 1re, 4me, et 8me range:

    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 ||||
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega

Exemple 2 - Tableaux 'zbrs'

Quelquefois nous voulons tre capable d'afficher des tableaux ou chaque range est diffrente de la prcdente. Nous pouvons suivre l'exemple ci-dessus et crer des styles row1, row3, row5, row7, etc., mais ceci sera fastidieux pour des grands tableaux. La valeur maximum de la variable $TableRowIndex peut tre utilise pour indexer des squences rptitives de ranges, comme 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, ... . L'index maximum est dfini dans $TableRowIndexMax, donc

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

nous donne des ranges alternes avec les attributs dfinis class='ind1' et class='ind2'. Nous pouvons alors dfinir un style pour les ranges 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 ||||
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega

Ou, si nous dfinissons $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 ||||
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega

Exemple 3 - Bandes de colonnes

De manire similaire aux ranges, nous pouvons aussi utiliser $TableCellAttrFmt et $TableCellCount pour dfinir 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 ||||
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega

Contrairement aux ranges, il n'y a pas de variables $TableCellIndex or $TableCellIndexMax dfinies (Il n'est pas envisag des tables avec beaucoup de colonnes).

Exemple 4 - hachurage

Bien sr, avec des styles CSS volus nous pouvont crer des effets spciaux 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 ||          ||
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega 
alphabetagammadeltaepsilon
zetaetathetaiotakappa
lambdamunuxiomikron
pirhosigmatauupsilon
phichipsiomega 

Notes, commentaires

Contributeurs

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

<< | Index complments? | >>


Traduction de la page Cookbook:FormattingSimpleTables


Page originale sur PmWikiFr.FormatageDesTableauxSimples - Référencé par
Dernières modifications:
PmWikiFr.FormatageDesTableauxSimples: 02/10/2006 15:28