Syntaxe résumée des tableaux Wiki[modifier le wikicode]

Vous trouverez un résumé de la syntaxe des tableaux Wiki ici.

Création de tableaux Wiki[modifier le wikicode]

Vous trouverez ci-après une description détaillée de la manière de créer un tableau dans la syntaxe Wiki.

Introduction : Deux petits exemples[modifier le wikicode]

Voici deux exemples simples pour avoir un premier contact avec le codage Wiki. Le premier exemple montre le tableau le plus minimaliste qui soit : celui qui ne contient qu'une seule cellule.

Résultat affiché

Codage Wiki

cellule

{| class="wikitable"
|cellule
|}

Ne vous préoccupez pas, pour l'instant, du texte class="wikitable" ; ceci sera expliqué plus loin.

Le deuxième exemple contient deux cellules. Comme vous pouvez le constater, il est possible d'encoder les cellules de deux façons différentes : dans le code Wiki, ou bien les cellules sont placées les unes en dessous des autres, ou bien elles sont placées les unes à côté des autres. Nous y reviendrons plus loin.

Résultat affiché

Codage Wiki

gauche	droite

{| class="wikitable"
|gauche
|droite
|}

gauche	droite

{| class="wikitable"
|gauche || droite
|}

La syntaxe des tableaux[modifier le wikicode]

Voici les différentes balises qui permettent la description d'un tableau.

Tableau[modifier le wikicode]

En Wiki, pour créer un tableau, nous procédons de la façon suivante :

{| paramètres
 |}

Un tableau commence toujours par l'accolade ouvrante { suivie d'un trait vertical |. La fin d'un tableau est également composée de deux caractères. Le premier est le trait vertical | et il est suivi du deuxième caractère qui est l'accolade fermante }.
Le champ paramètres peut être remplacé par différents paramètres utilisés dans les tableaux, tels que la couleur de fond, la taille, s'il faut faire apparaître une bordure, etc. L'utilisation des paramètres n'est pas obligatoire et on peut donc sans problème ne rien placer à cet endroit.

Cellules[modifier le wikicode]

Pour créer des cellules, la syntaxe Wiki est la suivante :

|cellule1
|cellule2
|cellule3

Une autre disposition, totalement équivalente, est la suivante :

|cellule1||cellule2||cellule3

Cette deuxième disposition nécessite que deux cellules soient séparées par deux traits verticaux ||.Un seul trait serait interprété comme un paramètre ; en effet, comme pour le tableau en lui-même, chacune des cellules d'un tableau peut contenir des paramètres. Le contenu d'une cellule peut-être précédé de paramètres de la façon suivante :

|paramètres|cellule1
|paramètres|cellule2
|paramètres|cellule3

ou encore, selon l'autre disposition :

|paramètres|cellule1||paramètres|cellule2||paramètres|cellule3

Ligne[modifier le wikicode]

Lorsque vous souhaitez passer à une nouvelle ligne, il suffit de faire :

|-

et comme le nombre de tirets - n'a pas de limite maximale, on peut très bien utiliser :

|-----------------------------------------------------

Comme pour les autres balises, il est bien sûr possible d'utiliser des paramètres :

|- paramètres

Titres de colonnes[modifier le wikicode]

Là où l'on utilisait un trait vertical pour les cellules, nous utilisons un point d'exclamation ! pour indiquer qu'il s'agit d'un titre de colonne. Au niveau de la présentation, un titre de colonne est écrit en gras.

!titre1
!titre2
!titre3

ou selon l'autre disposition :

!titre1!!titre2!!titre3

entre les paramètres et le contenu de la cellule, en revanche, nous utilisons toujours le trait vertical |

!paramètres|titre1!!paramètres|titre2!!paramètres|titre3

Voyons ce que nous obtenons sur un exemple. Pour que la première ligne soit interprétée comme étant une ligne de titres, écrivons :

Résultat affiché

Codage Wiki

Titre Colonne 1	Titre Colonne 2
cellule1	cellule2

{| class="wikitable"
! Titre Colonne 1 !! Titre Colonne 2
|-
|cellule1
|cellule2
|}

Dans l'exemple qui suit, bien que la cellule de la seconde colonne ne soit pas balisée comme un titre (nous utilisons les deux traits || au lieu de deux points d'exclamation !!), le logiciel la considère malgré tout comme un titre :

Résultat affiché

Codage Wiki

Titre Colonne 1	Colonne 2

{| class="wikitable"
! Titre Colonne 1 || Colonne 2
|}

Pour éviter ce problème, nous devons faire passer la deuxième colonne à la ligne, comme ceci :

Résultat affiché

Codage Wiki

Titre Colonne 1	Colonne 2

{| class="wikitable"
! Titre Colonne 1
| Colonne 2
|}

Légende[modifier le wikicode]

La légende est un petit texte, placé au-dessus du tableau, qui permet de préciser ce qui se trouve dans le tableau. Voici comment introduire une légende en Wiki :

|+ légende

Il est toujours possible de spécifier des paramètres de la façon suivante :

|+ paramètres|légende

On ne peut spécifier qu'une seule légende par tableau. S'il en est indiqué plusieurs, seule la première sera prise en compte. Voici le résultat que l'on obtient :

Résultat affiché

Codage Wiki

légende
Colonne 1	Colonne 2

{| class="wikitable"
|+ légende
| Colonne 1
| Colonne 2
|}

Exemple récapitulatif[modifier le wikicode]

Après avoir vu les différentes balises décrivant un tableau Wiki, voici un exemple récapitulatif dans lequel figure tout ce que nous venons de voir.

Résultat affiché

Codage Wiki

légende
	Titre 1	Titre 2
Titre ligne	Cellule 1	Cellule 2

{| class="wikitable"
|+ légende
!
! Titre 1 !! Titre 2
|-
! Titre ligne
| Cellule 1
| Cellule 2
|}

Tableaux imbriqués[modifier le wikicode]

Lorsque vous créez un tableau, vous pouvez y imbriquer un autre tableau. Au lieu de placer du texte dans une cellule, il suffit d'y placer un tableau comme le montre l'exemple suivant :

Résultat affiché

Codage Wiki

Gauche

tableau imbriqué	autre cellule

Droite

Cellule 1

Cellule 2

Cellule 3

{| class="wikitable"
| Gauche
|
{| class="wikitable"
|tableau imbriqué
|autre cellule
|}
| Droite
|-
| Cellule 1
| Cellule 2
| Cellule 3
|}

Les paramètres[modifier le wikicode]

Nous avons découvert ci-dessus la syntaxe et les balises permettant de créer des tableaux Wiki. Pour chacune des balises, nous avons précisé que l'on pouvait ajouter des paramètres. Cette section présente ces paramètres. Ceux-ci permettent notamment de spécifier le positionnement du tableau (gauche, milieu, droit), les couleurs à utiliser et bien d'autres choses encore.

Paramètre : class="wikitable"[modifier le wikicode]

Ce paramètre que nous avons déjà utilisé dans les exemples précédents permet d'imposer le style "wikitable" au tableau. Plus élégant qu'un tableau classique, le style "wikitable" définit de nombreux paramètres comme la taille des bordures et les couleurs de fond.

Paramètre : border[modifier le wikicode]

Ce paramètre, utilisé au niveau du tableaux permet de spécifier la taille de la bordure du tableau. (Noter que la classe "wikitable" spécifie la taille de la bordure et que ces deux paramètres ne doivent donc pas être utilisés simultanément.)

Pour créer un tableau sans bordure, indiquer une taille de 0.

border="x"

où x est la taille de la bordure.

Résultat affiché

Codage Wiki

sans bordure 1

sans bordure 2

{| border="0"
|sans bordure 1
|sans bordure 2
|}

bordure normale 1

bordure normale 2

{| border="1"
|bordure normale 1
|bordure normale 2
|}

grosse bordure 1

grosse bordure 2

{| border="10"
|grosse bordure 1
|grosse bordure 2
|}

On peut également choisir le style de la bordure

style="border:Xpx S"

où X est la taille de la bordure (en pixel), et S son style (dotted, dashed, double...)

Résultat affiché

Codage Wiki

exemple : dotted

{|style="border:2px dotted;"
|exemple : dotted
|}

exemple : dashed

{|style="border:2px dashed;"
|exemple : dashed
|}

exemple : double

{|style="border:5px double;"
|exemple : double
|}

Paramètres : rowspan et colspan[modifier le wikicode]

Ces deux paramètres permettent de fusionner des cellules. Ils s'utilisent de la façon suivante :

colspan="x"
rowspan="x"

où x représente le nombre de cellule fusionnées. Voyons cela sur un exemple dans lequel on va fusionner deux colonnes :

Résultat affiché

Codage Wiki

Simple	Fusionnée
cellule1	cellule2	cellule3

{| class="wikitable"
| Simple
| colspan="2" | Fusionnée
|-
| cellule 1
| cellule 2
| cellule 3
|}

Et voyons maintenant comment fusionner des lignes :

Résultat affiché

Codage Wiki

Première	Deuxième
Gauche 1	Droite
Gauche 2
Gauche 3

{| class="wikitable"
| Première
| Deuxième
|-
| Gauche 1
| rowspan="3" | Droite
|-
| Gauche 2
|-
| Gauche 3
|}

On voit donc avec cet exemple que l'on peut aisément fusionner des cellules que ce soit au niveau des colonnes ou au niveau des lignes. Le nombre de cellules fusionnées n'est pas limité. Et enfin, il est tout à fait possible de mélanger ces deux paramètres.

Paramètres : align et valign[modifier le wikicode]

Jusqu'à présent, tous les tableaux étaient positionnés à gauche et le contenu des cellules était également positionné à gauche. Nous allons maintenant voir comment positionner le tableau et le contenu des cellules. Un tableau ne peut être aligné que selon l'axe horizontal, c'est-à-dire à gauche, à droite ou au milieu. En revanche, le contenu d'une cellule peut aussi être positionné en haut, en bas ou au milieu de la cellule.

Pour l'alignement horizontal, il faut utiliser le paramètre align et que pour l'alignement vertical, il faut utiliser valign :

align="left"
align="center"
align="right"

valign="top"
valign="center"
valign="bottom"

Voici un exemple de positionnement d'un tableau :

Résultat affiché

Codage Wiki

à gauche

{| align="left" class="wikitable"
|à gauche
|}

au centre

{| align="center" class="wikitable"
|au centre
|}

à droite

{| align="right" class="wikitable"
|à droite
|}

Il est également possible de positionner horizontalement le texte d'une cellule. On montre dans l'exemple suivant les trois positions gauche, milieu, droite.

Résultat affiché

Codage Wiki

Positionnement
g
c
d

{| class="wikitable"
| Positionnement
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}

Il est également possible de positionner verticalement le contenu de chaque cellule. Dans l'exemple qui suit, nous avons créé une cellule (celle de gauche) avec une taille de 150 pixels pour que l'on puisse bien voir comment se positionne le texte des autres cellules.

Résultat affiché

Codage Wiki

Position	haut	milieu	bas

{| class="wikitable"
| height="150" | Position
| valign="top" | haut
| valign="center" | milieu
| valign="bottom" | bas
|}

Paramètres : cellspacing et cellpadding[modifier le wikicode]

Il est possible de changer l'espacement entre les cellules grâce au paramètre cellspacing. Et il est possible de spécifier l'espacement entre le bord d'une cellule et son contenu grâce au paramètre cellpadding. Leur utilisation est la suivante :

cellspacing="x"

cellpadding="x"

Commençons par un exemple avec le paramètre cellspacing :

Résultat affiché

Codage Wiki

cellule 1	cellule 2
cellule 3	cellule 4

{| border="1" cellspacing="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}

cellule 1	cellule 2
cellule 3	cellule 4

{| border="1" cellspacing="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}

et pour le paramètre cellpadding :

Résultat affiché

Codage Wiki

cellule 1	cellule 2
cellule 3	cellule 4

{| border="1" cellpadding="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}

cellule 1	cellule 2
cellule 3	cellule 4

{| border="1" cellpadding="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}

Paramètres : width et height[modifier le wikicode]

Utiliser les paramètres width et height pour spécifier la largeur et la hauteur du tableau et de chacune des cellules. La taille peut être spécifiée en pixels ou en pourcentage de l'affichage. Dans les chaque cas, il s'agit d'une taille minimale : si le contenu du tableau est trop gros, la taille sera adaptée au contenu.

L'exemple ci-dessous présente l'utilisation de la taille fixe. Le premier premier tableau est paramétré avec une largeur de 10 pixels ; toutefois, la largeur du contenu du tableau étant supérieure, la taille du tableau s'adapte au contenu. Le second cas utilise une taille de 100 pixels ; ici il n'y a pas de problème car la taille de100 pixels est bien supérieure à la largeur du contenu ; la largeur du tableau est donc bien de 100 pixels. Et enfin le troisième exemple utilise une largeur de 200 pixels.

Résultat affiché

Codage Wiki

cellule

{| class="wikitable" width="10"
|cellule
|}

cellule

{| class="wikitable" width="100"
|cellule
|}

cellule

{| class="wikitable" width="200"
|cellule
|}

Voyons maintenant l'utilisation d'une taille proportionnelle. Dans le premier cas, on impose au tableau d'occuper un maximum de 33% de la largeur disponible. Dans le deuxième, puis le troisième cas, le tableau doit respectivement occuper un maximum de 50%, puis de 100%, de l'espace disponible.

Résultat affiché

Codage Wiki

cellule

{| class="wikitable" width="33%"
|cellule
|}

cellule

{| class="wikitable" width="50%"
|cellule
|}

cellule

{| class="wikitable" width="100%"
|cellule
|}

Pour la hauteur du tableau et des cellules, le paramètre height s'utilise de la même manière que width. Voici un exemple du paramètre height appliqué aux cellules :

Résultat affiché

Codage Wiki

Tableau 1
1/3 cellule 1	1/3 cellule 2	1/3 cellule 3

{| class="wikitable" width="100%"
| colspan="3" height="100"| Tableau 1
|- 
| width="33%" height="100"| 1/3 cellule 1
| width="33%" | 1/3 cellule 2
| width="33%" | 1/3 cellule 3
|}

Tableau 2
1/2 cellule 1	1/4 cellule 2	1/4 cellule 3

{| class="wikitable" width="100%"
| colspan="3" | Tableau 2
|- 
| width="50%" height="100"| 1/2 cellule 1
| width="25%" | 1/4 cellule 2
| width="25%" | 1/4 cellule 3
|}

Paramètre : bgcolor[modifier le wikicode]

Il est possible de changer la couleur de fond d'une cellule. Pour cela, il faut utiliser le paramètre bgcolor de la façon suivante :

bgcolor="#rrvvbb"

Pour spécifier une couleur, il faut donc utiliser le caractère # suivi du code couleur RVB en hexadécimal. Examinez l'exemple suivant :

Résultat affiché

Codage Wiki

rouge	vert	bleu

{| class="wikitable"
| bgcolor="#FF0000" | rouge
| bgcolor="#00FF00" | vert
| bgcolor="#0000FF" | bleu
|}

Paramètre : style[modifier le wikicode]

C'est le paramètre le plus complet et le plus complexe que l'on puisse utiliser dans des tableaux : style. Ce paramètre permet de changer tout l'aspect graphique. Il peut être utilisé aussi bien au niveau du tableau qu'à celui de chaque cellule. Voici un exemple d'utilisation du paramètre style. Nous allons changer la couleur de fond du tableau et choisir la couleur verte :

Résultat affiché

Codage Wiki

cellule 1
cellule 2
cellule 3

{| class="wikitable" style="background-color:#CCFFCC"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}

Le paramètre style permet de spécifier la mise en forme comme la couleur, la police de caractère, la couleur de fond pour une cellule, etc. Pour savoir ce que vous pouvez y spécifier et comment l'utiliser, reportez-vous à une aide sur les feuilles de style CSS.