Aide:Tableau

Une page de Wikiversité, la communauté pédagogique libre.

Les tableaux peuvent être très utiles pour présenter des données. Cette page explique comment créer des tableaux simples dans les leçons de Wikiversité. L'utilisation de tableaux doit être évitée si cela est possible. En effet, l’accessibilité aux pages qui contiennent un tableau est rendue plus difficile à certaines personnes, notamment aux aveugles. Tout au long de cette page d'aide, nous donnerons toujours le codage Wiki et le codage HTML pour chacun des tableaux que nous montrerons.

Ne pas utiliser de balises HTML

Si vous êtes déjà familier des codes HTML permettant de créer des tableaux, vous pouvez insérer le code directement dans l’article que vous êtes en train d'éditer. Cependant, les balises de tableaux sont difficiles à éditer pour quelqu’un qui n’est pas à l’aise avec le langage HTML. Pour cela, des nouvelles balises ont été développées par Magnus Manske. Ces balises remplacent les traditionnelles balises HTML <table>, <tr>, <td>, <th> et <caption>. Il est donc demandé de ne pas utiliser des balises HTML pour créer des tableaux.

Voici deux exemples simples pour avoir un premier contact avec le codage Wiki.

Un tableau à une cellule[modifier | modifier le wikicode]

Le premier exemple montre le tableau le plus minimaliste qui soit, c'est-à-dire celui qui ne contiendrait qu'une seule cellule.

Résultat affiché Codage Wiki Codage HTML
cellule
{| class="wikitable"
|cellule
|}
<table class="wikitable">
  <tr>
    <td>cellule</td>
  </tr>
</table>

Puis deux cellules[modifier | modifier le wikicode]

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 : une ligne par cellule, ou plusieurs cellules sur la même ligne. Nous y reviendrons plus en détail par la suite.

Résultat affiché Codage Wiki Codage HTML
gauche droite
{| class="wikitable"
|gauche
|droite
|}
<table class="wikitable">
  <tr>
    <td>gauche</td>
    <td>droite</td>
  </tr>
</table>
gauche droite
{| class="wikitable"
|gauche || droite
|}
<table class="wikitable">
  <tr>
    <td>gauche</td>
    <td>droite</td>
  </tr>
</table>

La syntaxe Wiki des tableaux (ou comment se passer des balises HTML)[modifier | modifier le wikicode]

Nous verrons ici les différentes balises utiles à la création d’un tableau.

Créer un tableau (HTML:table)[modifier | modifier le wikicode]

Dans le langage HTML, l'élément table est l'élément de base pour la création d’un tableau.Ceci donnerait en HTML, l’encodage suivant :

 <table ''paramètres''>
 </table>

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

 {| ''paramètres''
 |}

On commence toujours un tableau 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 doit bien entendu être remplacé par les paramètres utilisés du tableau comme 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.

Créer une colonne (HTML:td)[modifier | modifier le wikicode]

En HTML, l'élément td représente une cellule dans une ligne du tableau. Ainsi pour un tableau de trois cellules formant trois colonnes, le code en HTML est le suivant :

 <td>cellule1</td><td>cellule2>/td><td>cellule3>/td>

Pour créer des cellules en Wiki, deux syntaxes sont possibles :

 |cellule1
 |cellule2
 |cellule3

Ou une autre syntaxe dont le résultat est totalement identique (si, si!) :

 |cellule1||cellule2||cellule3

Cette deuxième disposition impose qu'entre deux cellules apparaissent deux traits verticaux || car un seul trait sera interpreté différemment par le logiciel.

Comme le tableau lui-même, chaque cellule d’un tableau peut contenir des paramètres propres. Pour cela, le contenu d’une cellule sera précédé des paramètres de la façon suivante :

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

ou encore, suivant l’autre disposition :

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

Ces deux dispositions remplacent le code HTML suivant :

 <td ''paramètres''>cellule1</td><td ''paramètres''>cellule2</td><td ''paramètres''>cellule3</td>

Créer des lignes (HTML:tr)[modifier | modifier le wikicode]

À la place des balises HTML tr qui permettent de passer à une nouvelle ligne dans le tableau, le wiki permet de passer à une nouvelle ligne de façon très simple, il suffit d'écrire :

 |-

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

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

En HTML, il aurait fallu écrire :

 <tr></tr>

Un grand avantage du codage wiki est qu’il se charge entièrement de la fermeture des balises tr ainsi que de leur ouverture si cette ouverture est nécessaire. Par exemple, si on reprend le tout premier tableau que nous avons créé, celui contenant une seule cellule, nous n'utilisons pas |- dans notre encodage et pourtant le code source HTML contient bien une balise tr.

Là encore, comme pour les autres balises, il est bien sûr possible d’utiliser des paramètres :

 |- ''paramètres''

Qui remplace le HTML :

 <tr ''paramètres''></tr>

Créer une cellule de titre (HTML:th)[modifier | modifier le wikicode]

Les balises HTML th ressemblent aux balises td. Leur utilisation est totalement identique, seule la syntaxe change. Cependant il y a une différence notable entre ces deux balises qui intervient au niveau visuel. La balise th est généralement utilisée pour spécifier qu'une cellule représente un titre. Visuellement, cela se voit car le texte de la cellule est en gras.Le code HTML serait:

 <th ''paramètres''>titre1</th><th ''paramètres''>titre2</th><th ''paramètres''>titre3</th>

En wiki, la syntaxe est également différente. Là où on utilisait un trait vertical pour les cellules, nous utiliserons un point d'exclamation !

 !titre1
 !titre2
 !titre3

ou avec l’autre disposition :

 !titre1!!titre2!!titre3

par contre, entre les paramètres et le contenu de la cellule, nous utiliserons toujours le trait vertical |

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

Voyons ce que nous obtenons sur un exemple. Si on souhaite que dans notre tableau, la première ligne soit interpretée comme étant une ligne de titres :

Résultat affiché Codage Wiki Codage HTML
Titre Colonne 1 Titre Colonne 2
cellule1 cellule2
{| class="wikitable"
! Titre Colonne 1 !! Titre Colonne 2
|-
|cellule1
|cellule2
|}
<table class="wikitable">
  <tr>
    <th>Titre Colonne 1</th>
    <th>Titre Colonne 2</th>
  </tr>
  <tr>
    <td>cellule1</td>
    <td>cellule2</td>
  </tr>
</table>

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 !!), le logiciel la considère malgré tout comme telle :

Résultat affiché Codage Wiki Codage HTML
Titre Colonne 1 Colonne 2
{| class="wikitable"
! Titre Colonne 1 || Colonne 2
|}
<table class="wikitable">
  <tr>
    <th>Titre Colonne 1</th>
    <th>Colonne 2</th>
  </tr>
</table>

Pour éviter ce problème, il est mieux de faire passer la deuxième colonne à la ligne comme ceci :

Résultat affiché Codage Wiki Codage HTML
Titre Colonne 1 Colonne 2
{| class="wikitable"
! Titre Colonne 1
| Colonne 2
|}
<table class="wikitable">
  <tr>
    <th>Titre Colonne 1</th>
    <td>Colonne 2</td>
  </tr>
</table>

Ajouter une légende (HTML:caption)[modifier | modifier le wikicode]

L'élément caption permet d'ajouter une légende. C’est un petit texte qui est placé au-dessus du tableau et qui permet de préciser ce qui se trouve dans le tableau. Voici comment introduire une légende en Wiki :

 |+ légende

qui donnerait en HTML

 <caption>légende</caption>

encore une fois, il est possible d’utiliser des paramètres de la façon suivante :

 |+ ''paramètres''|légende

qui donnerait alors

 <caption ''paramètres''>légende</caption>

On ne peut placer qu'une seule légende par tableau, s'il en existe plusieurs, seule la première sera prise en compte. Voici le résultat que l’on obtient :

Résultat affiché Codage Wiki Codage HTML
légende
Colonne 1 Colonne 2
{| class="wikitable"
|+ légende
| Colonne 1
| Colonne 2
|}
<table class="wikitable">
  <caption>légende</caption>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
  </tr>
</table>

Synthèse[modifier | modifier le wikicode]

Maintenant que nous avons vu les différentes balises qui sont supportées par le codage Wiki, nous allons vous montrer un exemple récapitulatif dans lequel tout ce que nous venons de voir apparaîtra.

Résultat affiché Codage Wiki Codage HTML
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
|}
<table class="wikitable">
  <caption>légende</caption>
  <tr>
    <th></th>
    <th>Titre 1</th>
    <th>Titre 2</th>
  </tr>
  <tr>
    <th>Titre ligne</th>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

Les tableaux imbriqués[modifier | modifier le wikicode]

Lorsque vous créez un tableau, il est possible d'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 Codage HTML
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
|}
<table class="wikitable">
  <tr>
    <td>Gauche</td>
    <td>
      <table class="wikitable">
        <tr>
          <td>tableau imbriqué</td>
          <td>autre cellule</td>
        </tr>
      </table>
    </td>
    <td>Droite</td>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>

Les paramètres[modifier | modifier le wikicode]

Jusqu'à présent, nous avons vu la syntaxe pour créer des tableaux. Pour chacune des balises, nous avons précisé que l’on pouvait lui ajouter des paramètres. Ces différents paramètres sont étudiés dans cette section. Ils permettent par exemple de spécifier le positionnement du tableau (gauche, milieu, droit), les couleurs à utiliser et bien d’autres choses encore.

Le style de base : class="wikitable"[modifier | modifier le wikicode]

Ce paramètre que nous avons déjà utilisé dans les exemples précédents permet d'appliquer le style "wikitable" au tableau. Plus élégant qu'un tableau classique, il impose par défaut certains paramètres (comme la taille de la bordure) et définit des couleurs.

Configurer la bordure : border[modifier | modifier le wikicode]

Ce paramètre qui peut être utilisé dans les tableaux permet de spécifier la taille de la bordure du tableau. La classe « wikitable » impose sa taille de bordure et ces deux tags ne devraient donc pas être utilisés en même temps.

Nous pouvons décider de ne pas placer de bordure en mettant une taille de 0.

 border="x"

où x est donc la taille de la bordure.

Résultat affiché Codage Wiki Codage HTML
sans bordure 1 sans bordure 2
{| border="0"
|sans bordure 1
|sans bordure 2
|}
<table border="0">
  <tr>
    <td>sans bordure 1</td>
    <td>sans bordure 2</td>
  </tr>
</table>
bordure normale 1 bordure normale 2
{| border="1"
|bordure normale 1
|bordure normale 2
|}
<table border="1">
  <tr>
    <td>bordure normale 1</td>
    <td>bordure normale 2</td>
  </tr>
</table>
grosse bordure 1 grosse bordure 2
{| border="10"
|grosse bordure 1
|grosse bordure 2
|}
<table border="10">
  <tr>
    <td>grosse bordure 1</td>
    <td>grosse bordure 2</td>
  </tr>
</table>

On peut également définir le style de la bordure :

 style="border:Xpx Y"

X est la taille de la bordure (en pixel), et Y son style (dotted, dashed, double…)

Résultat affiché Codage Wiki Codage HTML
exemple : dotted
{|style="border:2px dotted;"
|exemple : dotted
|}
<table style="border:2px dotted;">
  <tr>
    <td>exemple : dotted</td>
  </tr>
</table>
exemple : dashed
{|style="border:2px dashed;"
|exemple : dashed
|}
<table style="border:2px dashed;">
  <tr>
    <td>exemple : dashed</td>
  </tr>
</table>
exemple : double
{|style="border:5px double;"
|exemple : double
|}
<table style="border:5px double;">
  <tr>
    <td>exemple : double</td>
  </tr>
</table>

La fusion : rowspan et colspan[modifier | modifier le wikicode]

Ces deux paramètres permettent de fusionner des cellules : rowspan fusionne les lignes, colspan fusionne les colonnes. 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 Codage HTML
Simple Fusionnée
cellule1 cellule2 cellule3
{| class="wikitable"
| Simple
| colspan="2" | Fusionnée
|-
| cellule 1
| cellule 2
| cellule 3
|}
<table class="wikitable">
  <tr>
    <td>Simple</td>
    <td colspan="2">Fusionnée</td>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>

Et voyons maintenant comment fusionner des lignes :

Résultat affiché Codage Wiki Codage HTML
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
|}
<table class="wikitable">
  <tr>
    <td>Première</td>
    <td>Deuxième</td>
  </tr>
  <tr>
    <td>Gauche 1</td>
    <td rowspan="3">Droite</td>
  </tr>
  <tr>
    <td>Gauche 2</td>
  </tr>
  <tr>
    <td>Gauche 3</td>
  </tr>
</table>

On voit 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é. Il est tout à fait possible de mélanger ces deux paramètres.

L’alignement du tableau : align et valign[modifier | modifier le wikicode]

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

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

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

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

Voyons maintenant un exemple de positionnement d’un tableau :

Résultat affiché Codage Wiki Codage HTML
à gauche
{| align="left" class="wikitable"
|à gauche
|}
<table align="left" class="wikitable">
  <tr>
    <td>à gauche</td>
  </tr>
</table>
au centre
{| align="center" class="wikitable"
|au centre
|}
<table align="center" class="wikitable">
  <tr>
    <td>au centre</td>
  </tr>
</table>
à droite
{| align="right" class="wikitable"
|à droite
|}
<table align="right" class="wikitable">
  <tr>
    <td>à droite</td>
  </tr>
</table>

Passons au positionnement horizontal du texte dans une cellule. Les trois positions que nous montrons dans l’exemple qui suit sont donc gauche, milieu, droite.

Résultat affiché Codage Wiki Codage HTML
Positionnement
g
c
d
{| class="wikitable"
| Positionnement
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}
<table class="wikitable">
  <tr>
    <td>Positionnement</td>
  </tr>
  <tr>
    <td align="left">g</td>
  </tr>
  <tr>
    <td align="center">c</td>
  </tr>
  <tr>
    <td align="right">r</td>
  </tr>
</table>

Pour chacune des cellules, il est également possible de positionner le contenu verticalement. 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 Codage HTML
Position haut milieu bas
{| class="wikitable"
| height="150" | Position
| valign="top" | haut
| valign="center" | milieu
| valign="bottom" | bas
|}
<table class="wikitable">
  <tr>
    <td height="150">Position</td>
    <td valign="top">haut</td>
    <td valign="center">milieu</td>
    <td valign="bottom">bas</td>
  </tr>
</table>

L’espacement entre et dans les cellules : cellspacing et cellpadding[modifier | modifier le wikicode]

Il est possible de changer l’espacement entre les cellules du tableau 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 Codage HTML
cellule 1 cellule 2
cellule 3 cellule 4
{| border="1" cellspacing="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" cellspacing="5">
  <tr>
    <td>cellule 1</td>
    <td>cellule 2</td>
  </tr>
  <tr>
    <td>cellule 3</td>
    <td>cellule 4</td>
  </tr>
</table>
cellule 1 cellule 2
cellule 3 cellule 4
{| border="1" cellspacing="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" cellspacing="20">
  <tr>
    <td>cellule 1</td>
    <td>cellule 2</td>
  </tr>
  <tr>
    <td>cellule 3</td>
    <td>cellule 4</td>
  </tr>
</table>

et alors le paramètre cellpadding :

Résultat affiché Codage Wiki Codage HTML
cellule 1 cellule 2
cellule 3 cellule 4
{| border="1" cellpadding="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" cellpadding="5">
  <tr>
    <td>cellule 1</td>
    <td>cellule 2</td>
  </tr>
  <tr>
    <td>cellule 3</td>
    <td>cellule 4</td>
  </tr>
</table>
cellule 1 cellule 2
cellule 3 cellule 4
{| border="1" cellpadding="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" cellpadding="20">
  <tr>
    <td>cellule 1</td>
    <td>cellule 2</td>
  </tr>
  <tr>
    <td>cellule 3</td>
    <td>cellule 4</td>
  </tr>
</table>

Taille des cellules : width et height[modifier | modifier le wikicode]

Grâce aux paramètres width et height, on peut spécifier la largeur et la hauteur aussi bien du tableau en lui-même que pour chacune des cellules du tableau. Lorsque l’on précise la taille, on peut préciser une valeur absolue en pixels ou bien ou peut également préciser une taille en pourcentage. Dans les deux cas, cela représente une taille minimale, cependant si le contenu du tableau est trop gros, ce tableau adaptera sa taille au contenu.

Le premier exemple montre l’utilisation d’une taille fixe. Le premier cas utilise une largeur de 10 pixels, cependant la largeur du contenu du tableau étant plus grande, il s'adapte donc à cette taille. Le second cas utilise une taille de 100 pixels ; ici nous n'avons pas de problème car 100 pixels est bien plus grand que la largeur occupée par le contenu du tableau, celui-ci a donc bien une largeur de 100 pixels. Et enfin le troisième exemple utilise une largeur de 200 pixels.

Résultat affiché Codage Wiki Codage HTML
cellule
{| class="wikitable" width="10"
|cellule
|}
<table border="1" width="10">
  <tr>
    <td>cellule</td>
  </tr>
</table>
cellule
{| class="wikitable" width="100"
|cellule
|}
<table class="wikitable" width="100">
  <tr>
    <td>cellule</td>
  </tr>
</table>
cellule
{| class="wikitable" width="200"
|cellule
|}
<table class="wikitable" width="200">
  <tr>
    <td>cellule</td>
  </tr>
</table>


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 Codage HTML
cellule
{| class="wikitable" width="33%"
|cellule
|}
<table class="wikitable" width="33%">
  <tr>
    <td>cellule</td>
  </tr>
</table>
cellule
{| class="wikitable" width="50%"
|cellule
|}
<table class="wikitable" width="50%">
  <tr>
    <td>cellule</td>
  </tr>
</table>
cellule
{| class="wikitable" width="100%"
|cellule
|}
<table class="wikitable" width="100%">
  <tr>
    <td>cellule</td>
  </tr>
</table>

Pour le paramètre height, l’utilisation est la même que pour width mais cette fois-ci on changera alors la hauteur du tableau. Ces deux paramètres peuvent également être utilisés pour chacune des cellules. Voyons un exemple avec les cellules :


Résultat affiché Codage Wiki Codage HTML
Tableau 1
1/3 cellule 1 1/3 cellule 2 1/3 cellule 3
{| class="wikitable" width="100%"
| colspan="3" | Tableau 1
|-
| width="33%" | 1/3 cellule 1
| width="33%" | 1/3 cellule 2
| width="33%" | 1/3 cellule 3
|}
<table class="wikitable" width="100%">
  <tr>
    <td colspan="3">Tableau 1</td>
  </tr>
  <tr>
    <td width="33%">1/3 cellule 1</td>
    <td width="33%">1/3 cellule 2</td>
    <td width="33%">1/3 cellule 3</td>
  </tr>
</table>
Tableau 2
1/2 cellule 1 1/4 cellule 2 1/4 cellule 3
{| class="wikitable" width="100%"
| colspan="3" | Tableau 2
|-
| width="50%" | 1/2 cellule 1
| width="25%" | 1/4 cellule 2
| width="25%" | 1/4 cellule 3
|}
<table class="wikitable" width="100%">
  <tr>
    <td colspan="3">Tableau 2</td>
  </tr>
  <tr>
    <td width="50%">1/2 cellule 1</td>
    <td width="25%">1/4 cellule 2</td>
    <td width="25%">1/4 cellule 3</td>
  </tr>
</table>

Couleur de fond : bgcolor[modifier | 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="#hex"

Pour spécifier une couleur, il faut donc utiliser le caractère # suivi du code couleur en hexadécimal. Reportez-vous à la page d'aide sur les couleurs pour avoir une liste de couleurs avec leur valeur hexadécimale. Pour bien illustrer cela, regardons l’exemple qui suit :

Résultat affiché Codage Wiki Codage HTML
rouge vert bleu
{| class="wikitable"
| bgcolor="#FF0000" | rouge
| bgcolor="#00FF00" | vert
| bgcolor="#0000FF" | bleu
|}
<table class="wikitable">
  <tr>
    <td bgcolor="#FF0000">rouge</td>
    <td bgcolor="#00FF00">vert</td>
    <td bgcolor="#0000FF">bleu</td>
  </tr>
</table>

Paraméter un style en CSS :style[modifier | modifier le wikicode]

Nous arrivons au dernier des paramètres que l’on peut utiliser dans des tableaux : style. Ce paramètre permet de changer tout l’aspect graphique. Il peut aussi bien être utilisé pour le tableau que pour une cellule unique. Le paramètre style est un paramètre qui 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 placer et comment l’utiliser, reportez-vous vers un tutorial sur le CSS. 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 Codage HTML
cellule 1
cellule 2
cellule 3
{| class="wikitable" style="background-color:#CCFFCC"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
<table class="wikitable" style="background-color:#CCFFCC">
  <tr>
    <td>cellule 1</td>
  </tr>
  <tr>
    <td>cellule 2</td>
  </tr>
  <tr>
    <td>cellule 3</td>
  </tr>
</table>

Quand les tableaux sont-ils appropriés ?[modifier | modifier le wikicode]

Les tableaux sont parfaits pour organiser toute information qui sera plus clairement présentée dans un format lignes/colonnes. Ce qui inclut :

  • Tableaux mathématiques
    • Tables de multiplication
    • Tables de division
    • Tableaux de recherche
  • Listes d'informations
    • Mots équivalents dans deux ou plusieurs langues
    • Personnalités, date de naissance, fonction
    • Artiste, disque, année et maison d'édition

Très souvent, une liste est plus lisible laissée en tant que liste. Certains articles comportent des listes excessivement longues très difficiles à éditer si elles se retrouvent sous forme de tableaux. Avant de transformer une liste en tableau, essayez de vous figurer l’aspect sous forme de tableau (lignes et colonnes) afin d’être sûr de son utilité. Si c’est le cas, alors l’option du tableau est certainement le meilleur choix.

Quand les tableaux sont-ils inappropriés ?[modifier | modifier le wikicode]

Les tableaux ne doivent pas être utilisés uniquement pour la présentation. Si l’information que vous éditez n’est pas de nature tabulaire, elle ne devra alors pas être mise en tableau. Évitez d’utiliser les tableaux pour mettre une légende sous une illustration, ordonner un groupe de liens ou autres cas strictement visuels. Cela rend l’article trop difficile à éditer pour d’autres wikiversitaires et les tableaux ne sont pas vraiment faits pour cela.

Liste très longues ou listes très courtes[modifier | modifier le wikicode]

Si une liste est vraiment très longue ou au contraire très simple, préférez l’usage des formats de listes standards de Wikiversité. Les listes longues seront difficiles à maintenir si elles se retrouvent à l’intérieur de tableaux et les listes courtes sont réellement trop simples pour nécessiter un formatage en tableau. Voici un petit exemple à ne pas suivre :

1980 Vague de pluie
1988 Nom d’un chat !
1994 La vie, la pomme
1994 Le ciel est vert

choisissez plutôt une liste classique :

  • 1980 : Vague de pluie
  • 1988 : Nom d’un chat !
  • 1994 : La vie, la pomme
  • 1994 : Le ciel est vert

Légende d'illustration[modifier | modifier le wikicode]

Souvent, les illustrations d’un article sont placées dans un semblant de tableau. Du fait que le tableau peut être flottant et placé à gauche ou à droite de l'écran, il paraît facile et pratique d’utiliser un tableau unicellulaire pour placer l’image à un endroit précis de l'écran. Cette solution était nécessaire pour les anciens navigateurs, particulièrement ceux qui ne reconnaissaient pas les feuilles de style en cascade pour l’affichage de telles images. Aujourd'hui, la plupart des navigateurs fonctionnent parfaitement avec ces feuilles de style. Aussi, la façon recommandée d'afficher les images est d’utiliser les balises nommées div.

Voici un petit aperçu à ne pas faire :

{| align="right" border="0" cellpadding="0" | [[Image:Blueberries.jpg]] |}

mais procédez de la façon suivante qui est tout à fait correcte :

[[Image:Blueberries.jpg|right]]

Dans ces deux cas, le résultat sera le même. L’illustration sera flottante à droite de l'écran et de texte environnant habillera l’illustration. Voici ce que cela donne dans votre navigateur (avec du texte ajouté) :

La myrtille (du latin myrtus, du grec murtos : myrte, symbole de l’amour ou de la gloire) est l’espèce Vaccinium myrtillus, airelle également connue sous les dénominations de airelle myrtille, arbrêtier, gueule noire, mauret, brimbelle ou raisin des bois. Au Canada, on l’appelle bleuet et sa culture est très importante, notamment celle des fruits sauvages. Le nom myrtille désigne aussi bien le végétal que son fruit, mais le terme de myrtillier est cependant usité.

La myrtille est un vigoureux sous-arbrisseau vivace et rampant, de 20 à 60 cm, que l’on trouve en Eurasie et en Amérique du Nord et qui forme des fourrés nains en dressant des rameaux serrés aux tiges vertes à section triangulaire. En France, elle est commune en montagne, surtout dans la moitié Nord de la France. Elle croît entre 400 à 2 500 m d'altitude dans les forêts de conifères, les bois clairs, les landes et les tourbières, associée aux plantes acidophiles.

Dans le langage des fleurs, la myrtille signifie que l’on recherche la solitude.

Problèmes éventuels[modifier | modifier le wikicode]

Les tableaux peuvent provoquer d’autres difficultés, surtout lorsqu’ils ne sont pas correctement utilisés. Voici quelques cas que vous pourrez rencontrer lors de l’usage de tableaux dans vos articles :

  • Les tableaux peuvent être une difficulté pour certains éditeurs, spécialement pour les nouveaux wikiversitaires. Les nouveaux éditeurs peuvent être effrayés lorsqu’ils cliquent sur « Modifier cette page » et qu’ils découvrent un gros pavé inintelligible (pour eux) de codes HTML. Essayez de conserver des tableaux simples et respectant la codification. Vous pouvez également ajouter des commentaires (qui n'apparaîtront pas dans la page normale) du genre « <!-- Pour éditer le texte de cet article, dépassez le tableau. --> » afin de rassurer les éditeurs.
  • Il est souvent difficile, même pour des auteurs expérimentés en HTML, d’être sûr de l’aspect qu'aura le tableau dans tous (ou beaucoup) de navigateurs. Même la plus petite erreur typographique peut avoir des conséquences catastrophiques sur l’affichage du tableau. Même si vous êtes confiant dans votre aptitude à éviter ce genre de problème, il se peut que ce ne soit pas le cas de futurs éditeurs. Encore une fois, essayez d'élaborer des tableaux simples et bien écrit afin de minimiser les risques.
  • Les gros tableaux contenant beaucoup d'informations peuvent dépasser le bord droit de l'écran sur de basses résolutions d'affichage. Cela peut parfois être acceptable, spécialement si le lecteur y a été préparé (notamment lorsque l’on sait par avance qu'un tableau comme la Table des isotopes (complète) qui est volontairement très grande). Si vous devez, pour votre article, créer un tableau vraiment très grand, vous devrez alors considérer qu’il y aura lieu d’en créer un autre plus simple, plus petit, pour les utilisateurs qui ne pourront pas visualiser la version longue.
  • Si vous insérez du texte à chasse fixe dans un tableau (en utilisant les balises HTML code, pre ou tt, par exemple), cela forcera la page à être plus large que nécessaire. Tant que cela est possible, évitez l’utilisation de tels textes dans vos tableaux, ainsi le texte sera adapté naturellement. Un problème identique survient lors de l’insertion d'images dans un tableau (car les images sont généralement contraintes à une taille fixe).
  • Des cellules contenant une grosse quantité d'informations peuvent causer des problèmes d'affichage dans certains navigateurs. En particulier, des cellules contenant un grand paragraphe risquent de brouiller l’affichage de navigateurs en mode console comme Lynx ou Links. De manière générale, tant que faire se peut, tentez de limiter la quantité de texte à l’intérieur d’un tableau.


synthèse / aide-mémoire[modifier | modifier le wikicode]

fonction code note
s t r u c t u r e
délimitation du tableau {|
tableau
|}
tableau paramétré {| params
tableau
|}
légende (caption) |+ légende
légende paramétrée |+ params | légende à placer en début de ligne
balise de nouvelle ligne |- à placer en début de ligne ; sans cellule
nouvelle ligne paramétrée |- params
cellule titre !titre style gras & centré par défaut
cellule titre paramétrée !params|titre
ligne titres (en-tête) !titre1!!titre2!!titre3
cellule |cell
cellule paramétrée |params|cell
ligne |cell1||cell2||cell3
f o r m a t
largeur globale width="n%" fonction de la fenêtre du navigateur
cadre & grille border="n" épaisseur seulement pour cadre
cadre seulement style="border:n solid couleur" couleur hexa (cf + bas second tableau)
écart entre cellules cellspacing="n" cadre de cellule si n>0 (cf ci-dessous)
cadre seulement (alternative) border="n" cellspacing="0" demande écart nul entre cellules
tampon intérieur cellule cellpadding="n" entre cadre & texte
étendue de cellule H ou V colspan="n" rowspan="n" lire : cellule couvre n colonnes ou n lignes !!!
flottement & positionnement gauche/droite du tableau align="côté" le texte extérieur au tableau passe sur le côté
centrage du tableau style="margin: 1em auto 1em auto" c une astuce --- le texte extérieur passe pas sur les côtés
titre du tableau (légende en haut) |+titre titre collé-centré-gras
en-têtes !en-tête pour col & ligne
alignement vertical ligne ou cellule valign="top" pas pour tableau entier (?)
s t y l e
format global params de style style = "param:val; param:val; ...;" pour tableau, ligne, cellule
attention : points-virgules collés !!!
hauteur & largeur cellules style="height:100px; width:100px;" on peut aussi mesurer en %age
alignement du texte style="text-align:center"
code couleur #rrvvbb
ou
#rvb
6 ou 3 chiffres en codage Hexadécimanl. ex : #789abc
voir codes couleur (sur méta)
couleur de fond style="background:couleur"
couleur de texte style="color:couleur"
style texte style="font-style:italic; font-size:150%;"
alignement texte (alternative) align="left"
couleur de fond (alternative) bgcolor="couleur"
couleur de texte (alternative) <span style="color:couleur">texte</span> codage (x)html