Wiktionnaire:Syntaxe du Wiktionnaire/Tableaux

Bonjour, vous êtes venu ici pour chercher la signification du mot Wiktionnaire:Syntaxe du Wiktionnaire/Tableaux. Dans DICTIOUS, vous trouverez non seulement toutes les significations du dictionnaire pour le mot Wiktionnaire:Syntaxe du Wiktionnaire/Tableaux, mais vous apprendrez également son étymologie, ses caractéristiques et comment dire Wiktionnaire:Syntaxe du Wiktionnaire/Tableaux au singulier et au pluriel. Tout ce que vous devez savoir sur le mot Wiktionnaire:Syntaxe du Wiktionnaire/Tableaux est ici. La définition du mot Wiktionnaire:Syntaxe du Wiktionnaire/Tableaux vous aidera à être plus précis et correct lorsque vous parlerez ou écrirez vos textes. Connaître la définition deWiktionnaire:Syntaxe du Wiktionnaire/Tableaux, ainsi que celles d'autres mots, enrichit votre vocabulaire et vous fournit des ressources linguistiques plus nombreuses et de meilleure qualité.

Syntaxe résumée des tableaux Wiki

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

Création de tableaux Wiki

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

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

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

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.

Cellules

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

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

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

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

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

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

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"

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

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"

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

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

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

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

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

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

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.