• Vue
• Éditer
• Historique
• Imprimer
• Référencé par

Tableaux

Auteurs (basique)

PmWiki a deux types de tableaux. Les balises décrites dans cette page créent vite et facilement des tableaux simples, avec de nombreuses petites cellules. La page Tableaux évolués aide pour des tableaux plus grands avec plus de contrôle sur chaque cellule. Pour plus de possibilités concernant la mise en forme de tableaux simples, consultez Cookbook:Rowspan in simple tables et Cookbook:Formatting tables.

Les bases

Les tableaux simples sont créés à l'aide de doubles barres verticales ||. Les lignes commençant par ce marqueur définissent des lignes de tableau ou une ligne de mise en forme. Au sein des lignes du tableau, la double barre verticale sert à délimiter les cellules. Dans les exemples ci-dessous, une bordure a été ajoutée à titre d'illustration (par défaut, il n'y a pas de bordure).

La première ligne du balisage (les doubles barres initiales "||") est obligatoire. Après ces doubles barres, il est possible d'ajouter des commandes de mise en forme facultatives pour le tableau, telles que la bordure ou la largeur.

|| border=1
|| cellule1 || cellule2 || cellule3 ||
|| cellule1 || cellule2 || cellule3 ||

On peut créer des cellules d'en-tête en plaçant un ! comme premier caractère de la cellule. Notez qu'il s'agit d'en-têtes de tableau et non de titres ; la syntaxe ne s'étend donc pas à !!, !!!, etc.

|| border=1
||! cellule 1 ||! cellule 2 ||! cellule 3 ||
|| cellule 1  ||  cellule 2 ||  cellule 3 ||

Un tableau peut comporter un titre, indiqué par ||!titre!||. Ce titre doit impérativement précéder les autres lignes du tableau.

|| border=1
||! Un tableau spécial !||
||! cellule 1 ||! cellule 2 ||! cellule 3 ||
|| cellule 1  ||  cellule 2 ||  cellule 3 ||

Mise en forme du contenu des cellules

Le contenu des cellules peut être aligné à gauche, centré ou aligné à droite.

• Pour aligner le contenu à gauche, placez-le juste après le délimiteur de début ||.
• Pour centrer le contenu, ajoutez une espace avant et après celui-ci.
• Pour aligner le contenu à droite, placez une espace avant celui-ci et laissez-le juste avant le délimiteur de fin ||.

|| border=1 width=100%
||!cellule 1      ||! cellule 2  ||!       cellule 3||
||aligné à gauche || centré || aligné à droite||

|| border=1 width=100%
||!cellule par défaut||!cellule à gauche ||
||alignement par défaut||aligné à gauche ||

Notez que les cellules d'en-tête et les cellules de données ont des alignements par défaut différents.

Pour qu'une cellule s'étende sur plusieurs colonnes, faites-la suivre de cellules vides :

|| border=1 width=100%
|| |||| colonne de droite ||
|| || deux colonnes de droite ||||
|| || colonne du milieu || ||
|| colonne de gauche || ||||
|| deux colonnes de gauche |||| ||
|| ligne entière ||||||
|| colonne de gauche || colonne du milieu || colonne de droite ||

Pour qu'une cellule s'étende sur plusieurs lignes, ajoutez ++ après le texte de la cellule (deux signes "plus" ou plus permettent à la cellule de s'étendre sur autant de lignes) :

|| border=1
||S'étend sur 3 lignes+++ ||Cellule normale ||
||Cellule 2e colonne ||
||Cellule 2e colonne ||
||Du texte      || S'étend sur 2 lignes ++ ||
||Première colonne   ||

Si le texte d'une cellule doit se terminer par deux signes "plus" ou plus, insérez le caractère d'espace vide [==] après ceux-ci.

Pour rendre l'extension sur plusieurs lignes plus visible lors de l'édition, vous pouvez insérer une cellule ne contenant que des caractères accent circonflexe "^" ; elle sera ignorée :

|| border=1
||Fusion sur 3 lignes+++ ||Cellule normale    ||
||^^^^^^^^^^^^^^^||Cellule 2e colonne ||
||^^^^^^^^^^^^^^^||Cellule 2e colonne ||
||Du texte       || Fusion sur 2 lignes++  ||
||Première colonne ||^^^^^^^^^^^^^^^^||

Attributs de tableau

Toute ligne commençant par || mais ne comportant pas de balise de fermeture || définit les "attributs de tableau" pour les tableaux qui suivent. Ces attributs permettent de contrôler la taille et la position du tableau, les bordures, la couleur d'arrière-plan et l'espacement entre les cellules. (En fait, il s'agit simplement d'attributs HTML standard insérés dans la balise <table>.)

Utilisez l'attribut width= pour définir la largeur d'un tableau, en indiquant soit un pourcentage, soit une taille absolue, soit *.

Voir aussi $SimpleTableDefaultClassName.

|| border=1 width=100% 
|| cellule 1 || cellule 2 || cellule 3 ||
|| c1 || cellulecellulecellulecellule2 || cellule 3 ||

L'attribut border= définit l'épaisseur des bordures du tableau.

|| border=10 width=70%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

|| border=0 width=70%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

Utilisez align=center, align=left et align=right pour aligner un tableau au centre, à gauche ou à droite. Notez que align=left et align=right créent un tableau flottant, de sorte que le texte s'écoule autour du tableau.

|| border=1 align=center width=50%
||!cell 1      ||! cell 2  ||!       cell 3||
||aligné à gauche || centré || aligné à droite||
Remarquez que le texte ne s'écoule pas autour d'un tableau utilisant « align=center ».

|| border=1 align=left width=50%
||!cell 1      ||! cell 2  ||!       cell 3||
||aligné à gauche || centré || aligné à droite||
Remarquez que le texte s'écoule à droite d'un tableau utilisant « align=left ».

|| border=1 align=right width=50%
||!cell 1      ||! cell 2  ||!       cell 3||
||aligné à gauche || centré || aligné à droite||
Remarquez que le texte s'écoule à gauche d'un tableau utilisant « align=right ».

Remarque : pour aligner un tableau à gauche (sans utiliser la propriété "float:left"), il faut recourir au CSS, comme ceci :

L'attribut bgcolor= définit la couleur d'arrière-plan d'un tableau. Actuellement, il n'est pas possible de spécifier la couleur de lignes ou de cellules individuelles dans ce type de tableau (voir toutefois Cookbook:FormattingTables).

|| border=1 align=center bgcolor=yellow width=70%
||!cell 1    ||! cell 2 ||!     cell 3||
||left-align || center  || right-align||

Tableaux triables

Pour permettre aux lecteurs de réorganiser un tableau, attribuez-lui la classe "sortable". Cette fonctionnalité ne fonctionne que pour les tableaux dont le corps ne contient pas de cellules s'étendant sur plusieurs lignes. Les lignes triables peuvent utiliser l'attribut "colspan" mais pas "rowspan". Les en-têtes et pieds de tableau peuvent toutefois inclure les deux types.

|| class="sortable simpletable" data-sortcols='n,a,a,a'
||!   m||!Zone géographique     ||!Point culminant     ||!Pays  ||
|| 3700||Arctique               ||Gunnbjørn Fjeld    ||Groenland ||
|| 8848||Zone tempérée nord     ||Mont Everest      ||Népal     ||
|| 5790||Zone tropicale nord    ||Cayambe            ||Équateur   ||
|| 6768||Zone tropicale sud     ||Huáscarán          ||Pérou      ||
|| 6960||Zone tempérée sud      ||Aconcagua          ||Argentine ||
|| 4892||Antarctique            ||Mont Vinson       ||(aucun)    ||

Notes :

• Cette fonctionnalité doit être activée dans la configuration locale ; voir $EnableSortable. Elle fonctionnera alors pour les tableaux simples (comme ci-dessus), pour les directives de tableau? dotées de l'attribut class="sortable", ainsi que pour les tableaux générés par des extensions.
• La classe optionnelle "simpletable" est disponible dans les habillages (skins) fournis par défaut et éventuellement dans d'autres ; elle définit des styles de tableau simple d'aspect soigné.
• La première ligne du tableau doit contenir uniquement des cellules d'en-tête utilisant les séparateurs ||! ; un clic sur ces cellules permet de trier les lignes selon la colonne correspondante.
• Si la dernière ligne de votre tableau doit servir de pied de tableau (footer) non soumis au tri, utilisez les séparateurs ||! ; ceux-ci permettront toutefois de trier les lignes, tout comme les cellules d'en-tête.
• Si vous utilisez l'attribut rowspan dans l'en-tête ou le pied de tableau, toutes les cellules s'étendant sur plusieurs lignes doivent être des cellules d'en-tête, commençant par ||!.
• Pour empêcher une cellule d'en-tête ou de pied de tableau de déclencher le tri, ajoutez le style wiki "nosort" : ||!%nosort%Non triable%%, ou utilisez l'attribut data-sortcols=x (voir ci-dessous).

Types de données : Par défaut, les lignes sont triées numériquement (si les cellules contiennent des valeurs numériques non formatées) ou alphabétiquement. Vous pouvez définir les types de données de tri via un attribut de tableau tel que data-sortcols="a,a,d,t,x,n", où chaque lettre identifie le type de données de la colonne correspondante :

• n (nombres) - les cellules de la colonne contiennent des nombres au format américain, comme 1,234.56 (avec un point décimal).
• N (nombres) - les cellules de la colonne contiennent des nombres au format SI (Système international), comme 1 234,56 (avec une virgule décimale).
  • dans les deux cas numériques, tous les caractères autres que le signe moins, les chiffres et le séparateur décimal sont ignorés ; vous pouvez donc inclure des abréviations ou des symboles monétaires.
• d (dates) - les cellules de la colonne contiennent des dates ou des dates-heures qui seront interprétées par le navigateur. Les dates au format « 2023-11-19 » ou « 2023-11-19 14:09:11 » devraient être correctement interprétées, tandis que d'autres dates en anglais pourraient ou non être détectées correctement.
• t (heures) - la cellule contient un élément HTML <time datetime="..."></time>, et sa valeur « datetime » doit être utilisée pour le tri. Un balisage tel que @2022-01-08T10:07:08Z ou {(ftime "%L" "{*$LastModifiedTime}")} générerait un élément <time> dans le fuseau horaire du visiteur, avec une précision variable selon la configuration de $EnableLocalTimes, mais les attributs "datetime" devraient permettre un tri précis.
• x (exclusion) - cette colonne ne sera pas triable.
• a (auto) - tri automatique/par défaut (numérique ou alphabétique). * En l'absence d'attribut data-sortcols, ou si le nombre de lettres spécifiées dans l'attribut dépasse le nombre de colonnes du tableau, la valeur "auto" est supposée pour les colonnes non définies.

FAQ

|| border=1 rules=rows frame=hsides
|| cellule 1 || cellule 2 || cellule 3 ||
|| cellule 1 || cellule 2 || cellule 3 ||

|| border=1 rules=cols frame=vsides
||! cellule 1 ||! cellule 2 ||! cellule 3 ||
|| cellule 1  ||  cellule 2 ||  cellule 3 ||

||border="1" style="border-collapse:collapse" cellpadding="5" width=66%
||!Header ||! Header || '''Header'''||
||cells || with || padding||
|| || || ||

table.column td.col1 { width: 120px; }
table.column td.col3 { width: 40px; }

Traduction de PmWiki.Tables Page originale sur PmWikiFr.Tables - Référencé par
Dernières modifications:
PmWikiFr.Tables: 26 septembre 2026 à 15h03
PmWiki.Tables: 22 février 2026 à 19h49