Aide:Tableaux
Cet article traite de la syntaxe des tableaux en langage Wiki, lesquels sont utiles pour la représentation de certaines données sur Wikipédia. L'utilisation de tableaux doit être évitée. En effet, l'accessibilité aux pages qui contiennent un tableau est rendue plus difficile à certaines personnes, notamment aux aveugles.
Pour remplacer la syntaxe des tableaux en HTML, Magnus Manske a créé des balises en langage Wiki. Elles remplacent les balises HTML <table>, <tr>, <td>, <th> et <caption>.
Si vous êtes familier avec le codage HTML qui permet de créer des tableaux, vous pouvez directement insérer le code. Cependant, les balises de tableaux sont parfois difficiles à éditer, surtout pour quelqu'un n'étant pas à l'aise avec la codage HTML. Pour cette raison, il est conseillé de lui préférer la syntaxe Wiki.
Dans cette page d'aide, vous trouverz le codage Wiki et le codage HTML pour chacun des tableaux montré.
Sommaire |
Exemples
Voici deux exemples simples de codage Wiki. Le premier montre le tableau minimal, c'est-à-dire celui qui ne contient qu'une cellule.
| Résultat affiché | Codage Wiki | Codage HTML | |
|---|---|---|---|
|
{| class="wikitable"
|cellule
|}
|
<table class="wikitable"> <tr><td>cellule </table> |
Le deuxième exemple contient deux cellules. Il est possible de coder les cellules de deux façons différentes. Soit les cellules sont placées les unes en dessous des autres (au niveau du codage wiki), soit elles sont placées les unes à côté des autres. Nous y reviendrons plus en détail par la suite.
| Résultat affiché | Codage Wiki | Codage HTML | ||
|---|---|---|---|---|
|
{| class="wikitable"
|gauche
|droite
|}
|
<table class="wikitable"> <tr> <td>gauche <td>droite </table> | ||
|
{| class="wikitable"
|gauche || droite
|}
|
<table class="wikitable"> <tr> <td> gauche <td> droite </table> |
La syntaxe des tableaux
Nous verrons ici les différentes balises qui peuvent apparaître dans la création d'un tableau.
- Note
- la barre verticale « | » (ou tube) étant utilisée dans la syntaxe des tableaux, si l'on désire en mettre une dans le tableau, il faut utiliser
<nowiki>|</nowiki>.
tableau
Dans le langage HTML, l'élément table est l'élément de base pour la création d'un tableau. En langage Wiki, nous procédons de la façon suivante :
{| attributs
|}
ce qui donne en HTML le codage suivant :
<table attributs> </table>
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 |, suivi de l'accolade fermante }.
Le champ attributs contient les différents attributs utilisés dans les tableaux, tels la couleur de fond, la taille, s'il faut faire apparaître une bordure, etc. L'utilisation des attributs n'est pas obligatoire.
cellule
En HTML, l'élément td représente une cellule dans une ligne du tableau. Pour créer des cellules en langage Wiki, la syntaxe est la suivante :
|cellule1 |cellule2 |cellule3
Une autre disposition acceptable :
|cellule1||cellule2||cellule3
Elle impose qu'entre deux cellules apparaissent deux traits verticaux ||, car un seul trait sera interpreté différemment par le logiciel. Mais ces deux dispositions donnent le même code en HTML :
<td>cellule1</td><td>cellule2</td><td>cellule3</td>
Chacune des cellules d'un tableau peut contenir des attributs. Le contenu d'une cellule est précédé des attributs :
|attributs|cellule1 |attributs|cellule2 |attributs|cellule3
ou encore, suivant l'autre disposition :
|attributs|cellule1||attributs|cellule2||attributs|cellule3
Ce qui donne toujours le code HTML suivant :
<td attributs>cellule1</td><td attributs>cellule2</td><td attributs>cellule3</td>
ligne
La balise HTML tr permet de passer à une nouvelle ligne dans le tableau. En langage Wiki, il suffit d'insérer :
|-
Le nombre de tirets n'ayant pas de limite maximale, on peut utiliser :
|-----------------------------------------------------
et obtenir en HTML :
<tr> ... </tr>
La balise a des attributs :
|- attributs
ce qui donne en HTML :
<tr attributs> ... </tr>
cellule titre
La balise HTML th est semblable à td et sert à spécifier spécifier un titre. Elle peut être utilisée partout où la cellule représente un titre. Le texte de la cellule est en gras. Sémantiquement, cela permet de savoir qu'il s'agit d'un titre (par exemple, pour les lecteurs vocaux des internautes malvoyants).
En syntaxe Wiki, utiliser le point d'exclamation :
!titre1 !titre2 !titre3
ou suivant l'autre disposition :
!titre1!!titre2!!titre3
Entre les attributs et le contenu de la cellule, utiliser le trait vertical :
!attributs|titre1!!attributs|titre2!!attributs|titre3
ce qui donne en HTML :
<th attributs>titre1</th><th attributs>titre2</th><th attributs>titre3</th>
Si la première ligne doit interpretée comme une ligne de titres :
| Résultat affiché | Codage Wiki | Codage HTML | ||||
|---|---|---|---|---|---|---|
|
{| 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, la cellule de la seconde colonne n'est pas balisée comme un titre (nous utilisons les deux traits || au lieu de !!), mais le logiciel la considère malgré tout comme tel :
| Résultat affiché | Codage Wiki | Codage HTML | ||
|---|---|---|---|---|
|
{| 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, faire passer la deuxième colonne à la ligne comme ceci :
| Résultat affiché | Codage Wiki | Codage HTML | ||
|---|---|---|---|---|
|
{| class="wikitable"
! Titre Colonne 1
| Colonne 2
|}
|
<table class="wikitable">
<tr>
<th>Titre Colonne 1</th>
<td>Colonne 2</td>
</tr>
</table>
|
caption
La balise HTML caption représente une légende, un petit texte placé au-dessus du tableau qui permet de préciser ce qui se trouve dans le tableau. En langage Wiki, elle est ainsi introduite :
|+ légende
qui donne en HTML
<caption>légende</caption>
Il est possible d'utiliser des attributs de la façon suivante :
|+ attributs|légende
ce qui donne
<caption attributs>légende</caption>
S'il existe plusieurs légendes, seule la première est prise en compte :
| Résultat affiché | Codage Wiki | Codage HTML | ||
|---|---|---|---|---|
|
{| 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>
|
Exemple récapitulatif
| Résultat affiché | Codage Wiki | Codage HTML | ||||||
|---|---|---|---|---|---|---|---|---|
|
{| 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>
|
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 | Codage HTML | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
{| 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>
|
Comme le code wiki empêche l'indentation, il devient particulièrement illisible avec les tableaux imbriqués.
Les attributs
Pour chacune des balises de tableau, nous avons précisé que l'on pouvait ajouter des attributs. Ils permettent notamment de spécifier le positionnement du tableau (gauche, milieu, droit) et les couleurs, entre autres.
wikitable
class="wikitable" : permet d'adapter le style "wikitable" au tableau. Plus élégant qu'un tableau classique, il impose certains attributs (comme la taille de la bordure) et définit des couleurs par défaut.
border
border permet de spécifier la taille de la bordure du tableau. La classe "wikitable" impose sa taille de bordure et ces deux balises ne devraient pas être utilisés en même temps.
border="x"
où x est donc la taille de la bordure (la taille 0 signifie « pas de bordure »).
| Résultat affiché | Codage Wiki | Codage HTML | ||
|---|---|---|---|---|
|
{| border="0"
|sans bordure 1
|sans bordure 2
|}
|
<table border="0">
<tr>
<td>sans bordure 1</td>
<td>sans bordure 2</td>
</tr>
</table>
| ||
|
{| border="1"
|bordure normale 1
|bordure normale 2
|}
|
<table border="1">
<tr>
<td>bordure normale 1</td>
<td>bordure normale 2</td>
</tr>
</table>
| ||
|
{| 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 choisir le style de la bordure
style="border:Xpx Y"
X est la taille de la bordure (en pixels), et Y son style (dotted, dashed, double,...)
| Résultat affiché | Codage Wiki | Codage HTML | |
|---|---|---|---|
|
{|style="border:2px solid black;"
|exemple : solid
|}
|
<table style="border:2px solid black;">
<tr>
<td>exemple : solid</td>
</tr>
</table>
| |
|
{|style="border:2px dotted black;"
|exemple : dotted
|}
|
<table style="border:2px dotted black;">
<tr>
<td>exemple : dotted</td>
</tr>
</table>
| |
|
{|style="border:2px dashed black;"
|exemple : dashed
|}
|
<table style="border:2px dashed black;">
<tr>
<td>exemple : dashed</td>
</tr>
</table>
| |
|
{|style="border:5px double black;"
|exemple : double
|}
|
<table style="border:5px double black;">
<tr>
<td>exemple : double</td>
</tr>
</table>
|
rowspan et colspan
rowspan et colspan : 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. Voici un exemple dans lequel deux colonnes sont fusionnées :
| Résultat affiché | Codage Wiki | Codage HTML | ||||||
|---|---|---|---|---|---|---|---|---|
|
{| 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>
| ||||||
Pour fusionner des lignes :
| Résultat affiché | Codage Wiki | Codage HTML | ||||||
|---|---|---|---|---|---|---|---|---|
|
{| 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>
|
Le nombre de cellules fusionnées n'est pas limité. On peut mélanger ces deux attributs.
align et valign
align et valign positionnent le tableau et le contenu des cellules. Un tableau est aligné selon l'axe horizontal : à gauche, à droite ou au milieu. Pour le contenu d'une cellule, on peut le positionner en haut, en bas ou au milieu de la cellule.
Pour l'alignement horizontal, c'est align, alors que pour l'alignement vertical, c'est valign :
align="left" align="center" align="right"
valign="top" valign="middle" valign="bottom"
Un exemple de positionnement d'un tableau :
| Résultat affiché | Codage Wiki | Codage HTML | |
|---|---|---|---|
|
{| align="left" class="wikitable"
|à gauche
|}
|
<table align="left" class="wikitable">
<tr>
<td>à gauche</td>
</tr>
</table>
| |
|
{| align="center" class="wikitable"
|au centre
|}
|
<table align="center" class="wikitable">
<tr>
<td>au centre</td>
</tr>
</table>
| |
|
{| align="right" class="wikitable"
|à droite
|}
|
<table align="right" class="wikitable">
<tr>
<td>à droite</td>
</tr>
</table>
|
Les trois positions sont à gauche, au milieu et à droite :
| Résultat affiché | Codage Wiki | Codage HTML | ||||
|---|---|---|---|---|---|---|
|
{| 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, il y a une cellule (celle de gauche) avec une taille de 150 pixels.
| Résultat affiché | Codage Wiki | Codage HTML | ||||
|---|---|---|---|---|---|---|
|
{| class="wikitable"
| height="150" | Position
| valign="top" | haut
| valign="middle" | milieu
| valign="bottom" | bas
|}
|
<table class="wikitable">
<tr>
<td height="150">Position</td>
<td valign="top">haut</td>
<td valign="middle">milieu</td>
<td valign="bottom">bas</td>
</tr>
</table>
|
cellspacing, cellpadding et margin
cellspacing et cellpadding modifient l'espacement entre les cellules (cellspacing) et l'espacement entre le bord d'une cellule et son contenu (cellpadding). Il existe également margin (style="margin:") qui modifie l'espacement entre le bord d'une cellule et le contenu extérieur:
cellspacing="x"
cellpadding="x"
style="margin:x px;"
|
Margin
|
Avec l'attribut cellspacing :
| Résultat affiché | Codage Wiki | Codage HTML | ||||
|---|---|---|---|---|---|---|
|
{| 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>
| ||||
|
{| 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>
|
Avec l'attribut cellpadding :
| Résultat affiché | Codage Wiki | Codage HTML | ||||
|---|---|---|---|---|---|---|
|
{| 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>
| ||||
|
{| 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>
|
Avec l'attribut margin (seulement utilisable avec style=, voir quelques sections plus bas) :
| Résultat affiché | Codage Wiki | Codage HTML | ||||
|---|---|---|---|---|---|---|
Texte texte texte |
{| border="1" align="left" style="margin:0px;"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
|
<table border="1" align="left" style="margin:0px;">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
| ||||
Texte texte texte |
{| border="1" align="left" style="margin-right:20px;"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
|
<table border="1" align="left" style="margin-right:20px;">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
width et height
width et height spécifient la largeur et la hauteur, aussi bien du tableau que des cellules. La taille peut se préciser préciser en pixels ou en pourcentage. Dans les deux cas, cela représente une taille minimale.
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 ; 100 pixels est grand que la largeur occupée par le contenu du tableau, celui-ci a donc bien une largeur de 100 pixels. Le troisième exemple utilise une largeur de 200 pixels.
| Résultat affiché | Codage Wiki | Codage HTML | |
|---|---|---|---|
|
{| class="wikitable" width="10"
|cellule
|}
|
<table border="1" width="10">
<tr>
<td>cellule</td>
</tr>
</table>
| |
|
{| class="wikitable" width="100"
|cellule
|}
|
<table class="wikitable" width="100">
<tr>
<td>cellule</td>
</tr>
</table>
| |
|
{| class="wikitable" width="200"
|cellule
|}
|
<table class="wikitable" width="200">
<tr>
<td>cellule</td>
</tr>
</table>
|
Voyons ce qu'il en est de l'utilisation d'une taille proportionnelle. Dans le premier cas, le tableau doit occuper un maximum de 33% de la largeur disponible. Dans le deuxième et le troisième cas, le tableau doit respectivement occuper un maximum de 50% et de 100%, de l'espace disponible.
| Résultat affiché | Codage Wiki | Codage HTML | |
|---|---|---|---|
|
{| class="wikitable" width="33%"
|cellule
|}
|
<table class="wikitable" width="33%">
<tr>
<td>cellule</td>
</tr>
</table>
| |
|
{| class="wikitable" width="50%"
|cellule
|}
|
<table class="wikitable" width="50%">
<tr>
<td>cellule</td>
</tr>
</table>
| |
|
{| class="wikitable" width="100%"
|cellule
|}
|
<table class="wikitable" width="100%">
<tr>
<td>cellule</td>
</tr>
</table>
|
Pour l'attribut height, l'utilisation est la même que pour width, mais cette fois-ci la hauteur du tableau change. Ces deux attributs peuvent également être utilisés pour chacune des cellules :
| Résultat affiché | Codage Wiki | Codage HTML | ||||||
|---|---|---|---|---|---|---|---|---|
|
{| 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>
| ||||||
|
{| 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>
| ||||||
bgcolor
bgcolor permet de changer la couleur de fond d'une cellule :
bgcolor="#hex"
Pour spécifier une couleur, insérer le caractère # suivi du code couleur en hexadécimal.
| Résultat affiché | Codage Wiki | Codage HTML | |||
|---|---|---|---|---|---|
|
{| 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>
|
style
Le style permet de changer tout l'aspect graphique, tant dans le tableau que pour une cellule. Changeons la couleur de fond du tableau :
| Résultat affiché | Codage Wiki | Codage HTML | |||
|---|---|---|---|---|---|
|
{| 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>
|
L'attribut 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. Reportez-vous à un tutorial sur le CSS.
Remarques
Quand les tableaux sont-ils appropriés ?
Les tableaux sont parfaits pour organiser toute information qui sera plus clairement présentée dans un format lignes/colonnes :
- 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
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 d'imaginer l'aspect sous forme de tableau afin d'être sûr de son utilité.
Quand les tableaux sont-ils inappropriés ?
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 wikipédiens.
Liste très longues ou listes très courtes
Si une liste est très longue ou au contraire très simple, préférez les listes standards de Wikipédia. Les listes longues seront difficiles à maintenir si elles se retrouvent à l'intérieur de tableaux et les listes courtes sont souvent 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 :
- 1980 : Vague de pluie
- 1988 : Nom d'un chat !
- 1994 : La vie, la pomme
- 1994 : Le ciel est vert
Légende d'illustration
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. En 2007, la plupart des navigateurs fonctionnent très bien avec les feuilles de style. Aussi, la façon recommandée d'afficher les images est d'utiliser les balises nommées div.
Voici un exemple à ne pas faire :
{| align="right" border="0" cellpadding="0" | [[Image:Myrtille-small.jpg|photo de myrtille]] |}
Procédez de la façon suivante :
[[Image:Serpent.gif|right|Serpent se mordant la queue]]
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 à 2500 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
Les tableaux peuvent provoquer des difficultés, surtout lorsqu'ils ne sont pas correctement utilisés. Voici quelques cas que vous pourriez rencontrer lors de l'usage de tableaux dans vos articles :
- Les tableaux peuvent être une difficulté pour certains éditeurs, spécialement pour les nouveaux wikipédiens. 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 code 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 à 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 est très grand). Si vous devez, pour votre article, créer un tableau vraiment très grand, considérez alors 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,preoutt, 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. De manière générale, tant que faire se peut, tentez de limiter la quantité de texte à l'intérieur d'un tableau.
