Vous trouverez un résumé de la syntaxe des tableaux Wiki ici.
Vous trouverez ci-après une description détaillée de la manière de créer un tableau dans la syntaxe Wiki.
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
|
|
|
{| 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
|
|
|
{| class="wikitable"
|gauche
|droite
|}
|
|
|
{| class="wikitable"
|gauche || droite
|}
|
Voici les différentes balises qui permettent la description d'un tableau.
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.
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
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
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
|}
|
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
|}
|
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
|}
|
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
|}
|
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.
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.
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
|
|
|
{|style="border:2px dotted;"
|exemple : dotted
|}
|
|
|
{|style="border:2px dashed;"
|exemple : dashed
|}
|
|
|
{|style="border:5px double;"
|exemple : double
|}
|
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.
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
|
|
|
{| align="left" class="wikitable"
|à gauche
|}
|
|
|
{| align="center" class="wikitable"
|au centre
|}
|
|
|
{| 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
|
|
|
{| 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
|
|
|
{| class="wikitable"
| height="150" | Position
| valign="top" | haut
| valign="center" | milieu
| valign="bottom" | bas
|}
|
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
|}
|
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
|
|
|
{| class="wikitable" width="10"
|cellule
|}
|
|
|
{| class="wikitable" width="100"
|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
|
|
|
{| class="wikitable" width="33%"
|cellule
|}
|
|
|
{| class="wikitable" width="50%"
|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
|}
|
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
|
|
|
{| class="wikitable"
| bgcolor="#FF0000" | rouge
| bgcolor="#00FF00" | vert
| bgcolor="#0000FF" | bleu
|}
|
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.
