Aide:Les tableaux pour les nuls
Un article de Wikipédia, l'encyclopédie libre.
Vous avez de Cette page explique les bases de réalisation des tableaux sur Wikipédia, à l'aide de codes spécifiques, interprétés par le logiciel MédiaWiki 1.4 et transformés en langage HTML pour l'affichage avec votre navigateur préféré.
Voici deux tableaux très simples :
{| {| align="center" style="background-color:#c0e8f0"
|cellule |cellule
|} |}
| cellule |
| cellule |
Leurs codes tiennent sur 3 lignes (attention : les codes du deuxième tableau sont bien disposés en début de ligne !) :
- la première ligne commence par l'accolade ouvrante {, suivie d'un trait vertical | ; ces 2 caractères peuvent être suivis d'un ou plusieurs paramètres affectant l'ensemble du tableau ;
- la ligne suivante commence par le trait vertical |, suivi du texte de la seule et unique cellule du tableau : cellule ;
- la dernière ligne contient le trait vertical |, suivi de l'accolade fermante }.
Le fond gris est obtenu par l'ajout du paramètre style= avec l'attribut "background-color:#c0e8f0" ; le fond d'un tableau est blanc par défaut. L'alignement centré du tableau à fond gris est obtenu par l'ajout du paramètre align= avec l'attribut "center" ; un tableau est aligné à gauche par défaut.
Passons maintenant aux tableaux à 2 cellules :
{| {| align="right" style="background-color:#c0e8f0"
|cellule1 |cellule1
|cellule2 |-
|} |cellule2
|}
| cellule1 | cellule2 |
| cellule1 |
| cellule2 |
Nous remarquons d'abord que nous avons changé l'alignement du tableau à fond gris, ce qui a permis de le placer directement à droite du texte (un tableau aligné à gauche ou centré ne s'entoure pas de texte).
Pour le tableau à fond blanc, nous avons juste ajouté une nouvelle ligne de codes commençant par un trait vertical | ; cette nouvelle ligne de codes ajoute une cellule au tableau sur la ligne en cours. Pour le tableau à fond gris, nous avons inséré une ligne comportant les codes |- juste avant la ligne définissant la deuxième cellule ; ces codes initient une nouvelle ligne de cellules du tableau.
Nous pouvons continuer de la même manière avec une troisième cellule :
{|
|cellule1
|<font color=#ff8040>cellule2</font>
|-
|cellule3
|}
| cellule1 | cellule2 |
| cellule3 |
Pour ce tableau (fond blanc), les codes de la nouvelle cellule ont été ajoutés après une ligne |-, et la troisième cellule initie ainsi une nouvelle ligne du tableau. Notons le changement de couleur du texte de la cellule 2, obtenue par du code HTML.
{| align="right" style="background-color:#c0e8f0"
|cellule1
|-
|bgcolor=#f0a0a0|<font color=#f0a0a0>rien</font>
|-
|cellule2
|}
| cellule1 |
| rien |
| cellule2 |
Pour le tableau à fond gris, nous avons également ajouté une troisième cellule sur une nouvelle ligne, mais par un artifice (couleur du texte identique à la couleur du fond), la deuxième cellule se présente comme une cellule vide, et la troisième cellule contient le texte cellule2.
Le changement de couleur du fond d'une unique cellule est obtenu par le paramètre bgcolor= avec l'attribut #ff8040 ; cet attribut est une valeur numérique, qui ne nécessite pas l'emploi de guillements ; le séparateur | et le texte de la cellule suit obligatoirement ce ou ces paramètre(s) sur la même ligne : sinon, ceux-ci seraient interprétés comme du texte ordinaire.
Nous remarquons que la cellule rouge est bordée de deux lignes verticales grises ; en effet, les cellules sont légèrement espacées par défaut, et la cellule rouge ne recouvre donc pas complètement la couleur de fond du tableau sur sa propre ligne.
L'espacement des cellules d'un tableau peut être modifié au moyen du paramètre cellspacing= suivi de la valeur de l'espacement.
{| align="right" cellspacing=0 style="background-color:#c0e8f0"
|bgcolor=#f0a0a0|cellule1
|bgcolor=#f0a0a0|cellule2
|-
|bgcolor=#f0a0a0|cellule3
|}
| cellule1 | cellule2 |
| cellule3 |
Ainsi, si nous ajoutons ce paramètre avec une valeur de 0, nous supprimons tout espacement entre les cellules ; ceci est parfaitement visible avec ce tableau à 3 cellules à fond rouge, qui laisse une zone dépourvue de cellules dont la couleur est la couleur de fond définie pour ce tableau.
L'espacement peut être également augmenté à volonté.
{| align="right" cellspacing=5 style="background-color:#c0e8f0"
|bgcolor=#f0a0a0|cellule1
|bgcolor=#f0a0a0|cellule2
|-
|bgcolor=#a0ffa0 colspan=2||<center>cellule3</center>
|}
| cellule1 | cellule2 |
|
|
|
Voici une nouvelle version de ce tableau à fond gris ; le fond n'est plus visible qu'entre les cellules (espacement de 5), car nous avons élargi la troisième cellule de sorte qu'elle occupe à présent la largeur de 2 colonnes normales.
Ceci s'obtient avec le paramètre colspan=, suivi du nombre de colonnes que doit occuper la cellule concernée ; ici 2. La couleur de fond de la cellule 3 a été modifiée, et son texte centré (code HTML), afin de mieux visualiser le résultat.
Mais une cellule peut également s'étendre verticalement. Ceci s'obtient au moyen du paramètre rowspan=, suivi du nombre de lignes que doit occuper la cellule concernée.
{| align="right" cellpadding=6
!bgcolor=#f0a0a0|cellule1
|bgcolor=#60a0ff rowspan=3|cellule2
|-
|bgcolor=#a0ffa0 colspan=2|<center>cellule3</center>
|-
|cellule4
|}
| cellule1 | cellule2 |
|---|---|
|
|
|
| cellule4 | |
Pour rendre les codes qui nous intéressent plus lisibles, nous revenons au fond de tableau par défaut (blanc), ainsi qu'à l'espacement de cellules par défaut (1). Ce tableau présente les particularités suivantes :
- les marges entre les 4 bords de chaque cellule et son texte sont augmentées au moyen du paramètre cellpadding=, suivi de la valeur de la marge en pixels, ici 6 ;
- le texte de la cellule 1 est en gras ; ceci s'obtient en remplaçant le caractère | de début de ligne par le caractère ! ; ainsi, cette cellule est considérée comme un en-tête, avec un texte automatiquement centré et mis en caractères gras ;
- la cellule 2, à présent de couleur bleue, s'étend sur 3 lignes ; son texte cellule 2 est centré verticalement, et apparaîtrait sur la deuxième ligne du tableau si la zone concernée n'était pas recouverte par la cellule 3.
La position verticale du texte dans la cellule peut cependant être modifié au moyen du paramètre valign=, dont les attibuts possibles sont : "top", "center" et "bottom".
{| align="right" border=1
!bgcolor=#f0a0a0|cellule1
|bgcolor=#60a0ff rowspan=3 valign="top"|cellule2
|-
|bgcolor=#a0ffa0 colspan=2|cellule3
|-
|cel------lule4
|}
| cellule1 | cellule2 |
|---|---|
| cellule3 | |
| cel------lule4 | |
Ce tableau illustre cette possibilité, ainsi que l'ajustement automatique de la largeur d'une colonne à la plus grande longueur de texte des cellules qui la composent.
Notons que les cellules ont retrouvé leurs marges par défaut, et que le tableau et toutes ses cellules ont à présent une bordure. Ceci est réalisé au moyen du paramètre border=, suivi de l'épaisseur des bordures pour l'ensemble du tableau.
Ces bordures génèrent un effet "3D", avec des bords gauches et supérieurs d'une couleur différente des bords droits et inférieurs :
- foncé/clair pour l'entourage des cellules ;
- clair/foncé pour l'entourage du tableau.
{| align="right" border=8
!bgcolor=#f0a0a0|cellule1
|bgcolor=#60a0ff rowspan=3 style="border:4px solid #fe0" valign="bottom"|cellule2
|-
|bgcolor=#a0ffa0|cellule3
|-
|cellule4
|}
| cellule1 | cellule2 |
|---|---|
| cellule3 | |
| cellule4 |
L'épaisseur des bordures de l'entourage du tableau peut être modifié en modifiant la valeur de l'attribut du paramètre border=. Pour abandonner l'effet 3D, le paramètre style= peut être utilisé, aussi bien pour l'entourage du tableau que pour celui des cellules, avec l'attribut ="border: 4px solid #fe0" ; 4px est la largeur de la bordure en pixels, solid est le type de trait, #fe0 est sa couleur, codée par la juxtaposition de 3 nombres hexadécimaux correspondant respectivement aux intensités des composantes rouge, verte et bleue de la couleur, sur une échelle de 16 valeurs (4096 couleurs possibles).
{| align="right" border=8 hight=160 width=160
!bgcolor=#f0a0a0|cellule1
!bgcolor=#60a0ff rowspan=3 valign="bottom"|cellule2
|-
|bgcolor=#a0ffa0|cellule3
|-
|cellule4
|}
| cellule1 | cellule2 |
|---|---|
| cellule3 | |
| cellule4 |
Il est encore possible de définir la dimension d'un tableau en pixels à l'aide des paramètres height= et width=, suivi de la dimension en pixels.
{| align="right" border=8 width=160
!bgcolor=#f0a0a0 width=55|cellule1
!bgcolor=#60a0ff rowspan=3 valign="bottom"|cellule2
|- height=100
|bgcolor=#a0ffa0|cellule3
|-
|cellule4
|}
| cellule1 | cellule2 |
|---|---|
| cellule3 | |
| cellule4 |
Les mêmes paramètres peuvent être appliqués aux lignes et aux cellules, sachant qu'une même dimension ajustée à l'aide de 2 paramètres se calera sur la plus grande valeur des attributs de ces paramètres.
[modifier] Voir aussi
- Projet:Charte graphique, le projet qui concerne la Wikipédia francophone et en particulier Projet:Charte graphique/Apparence des tableaux pour une forme normalisée de l'apparence des tableaux.
