Voir la source de Aide:Guide d'utilisation des tableaux

[[Catégorie:Aide|Guide d'utilisation des tableaux]]

Les tableaux peuvent être très utiles pour la représentation de certaines données sur Wikipédia. Si vous êtes déjà familier des codes HTML (Hypertext markup language) permettant de créer des tableaux, vous insérez simplement le code directement dans l'article que vous êtes en train d'éditer. Les balises de tableaux sont parfois difficiles à éditer surtout pour quelqu'un n'étant pas à l'aise avec la codification HTML. Il y a certains cas où les tableaux ne sont pas indiqués et un balisage simplifié sera alors préférable. Cette page explique comment créer des tableaux dans les articles de Wikipédia et indique lorsqu'ils sont opportuns.

'''Veuillez noter que l'usage du code HTML n'est plus indispensable. La page [[Aide:Syntaxe wikipédia/tableaux|Guide wikicode des tableaux]] détaille comment utiliser le wikicode pour créer des tableaux.'''

== Exemple de tableau ==

=== Code Wikipédia ===

<blockquote style="background: white; border: thin solid black; padding: 1em;">
<pre><nowiki>{| border="1" cellpadding="2" |
|+ Table de multiplication
|-
|×||1||2||3
|-
|1||1||2||3
|-
|2||2||4||6
|-
|3||3||6||9
|-
|4||4||8||12
|-
|5||5||10||15
|}</nowiki></pre>
</blockquote>

=== Résultat affiché par votre navigateur ===

<blockquote style="background: white; border: thin solid black; padding: 1em;">
{| border="1" cellpadding="2" |
|+ Table de multiplication
|-
|×||1||2||3
|-
|1||1||2||3
|-
|2||2||4||6
|-
|3||3||6||9
|-
|4||4||8||12
|-
|5||5||10||15
|}
</blockquote>

Points importants à noter dans cet exemple :

* Le tableau entier débute avec la balise <code>&lt;table ...&gt;</code> et finit avec la balise indispensable <code>&lt;/table&gt;</code>
* La '''légende''' ''(caption)'' est un moyen succinct de décrire votre tableau et se trouvera à l'intérieur de la balise <code>caption</code> juste après la balise de départ <code>&lt;table&gt;</code>
* '''Table rows''' sont les groupes de cellules horizontales du tableau. Ils débutent par la balise <code>&lt;tr&gt;</code> et finissent par la balise facultative <code>&lt;/tr&gt;</code>
* '''Table headings''' sont les cellules de têtières qui seront affichée en caractère gras. Elles débutent par la balise <code>&lt;th&gt;</code> et finissent par la balise facultative <code>&lt;/th&gt;</code>
* Les cellules '''Table data''' constituent le reste du tableau. Elles débutent avec la balise <code>&lt;td&gt;</code> et finissent par la balise facultative <code>&lt;/td&gt;</code>
 
Les balises <code>td</code> et <code>th</code> sont aussi appelés « cellules » un peu comme les cellules de feuilles de calcul. Chaque ligne doivent avoir le même nombre de cellules que les autres lignes de façon à ce que le nombre de colonnes reste constant (bien qu'il soit possible de fusionner des cellules, ce qui ne sera pas décrit ici). Si une cellule est vide, utilisez l'espace insécable « <code>&amp;nbsp;</code> » comme donnée, sinon certains navigateurs n'afficheront pas le tableau correctement.

Si votre tableau ne paraît pas correct, assurez-vous que toutes les balises HTML sont correctement imbriquées. Vous pourrez trouver plus confortable d'omettre les balises de fermeture facultatives puisqu'elles ne sont pas strictement exigées dans les spécifications HTML. Le meilleur moyen de détecter les erreurs d'un tableau est de soumettre l'article au [http://validator.w3.org/ service de validation W3C]. Copiez simplement l'URL de votre article et inscrivez-le dans la boîte d'adresse du validateur. Ce service est particulièrement bien indiqué pour des tableaux très grands et complexes qui autrement seraient difficiles à vérifier visuellement.

L'exemple ci-dessus sans les balises fermantes optionnelles ressemblera à cela :
<blockquote style="background: white; border: thin solid black; padding: 1em;">
<pre><nowiki><table border="1" cellpadding="2">
<caption>Multiplication table</caption>
<tr><th>&amp;times;<th>1<th>2<th>3
<tr><th>1<td>1<td>2<td>3
<tr><th>2<td>2<td>4<td>6
<tr><th>3<td>3<td>6<td>9
<tr><th>4<td>4<td>8<td>12
<tr><th>5<td>5<td>10<td>15
</table></nowiki></pre>
</blockquote>
Outre le fait que le code est plus court, cela permet de maintenir plus facilement la page et réduit les risques d'erreurs.

Si vous êtes déjà bien familiarisé avec les tableaux HTML, vous noterez que les balises <code>thead</code>, <code>tbody</code>, <code>tfoot</code> et <code>colgroup</code> ne sont actuellement pas supportées dans Wikipédia.

== Un autre exemple ==

Voici un exemple plus élaboré, permettant de voir d'autres options disponibles pour la création de tableaux. Vous pouvez jouer avec ces paramètres dans votre propre tableau afin de voir leurs effets. Toutes ces techniques ne sont pas forcément appropriées à tous les cas, simplement parceque vous pouvez ajouter des fonds colorés, par exemple, ce qui n'est pas toujours judicieux. Essayez de garder une codification de vos tableaux relativement simple &mdash; gardez à l'esprit que d'autres Wikipédiens seront appelés à éditer l'article ! Cet exemple vous donnera un aperçu de ce qu'il est possible de faire.

=== Code Wikipédia ===

<blockquote style="background: white; border: thin solid black; padding: 1em;">
<pre><nowiki>
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''Un exemple de tableau'''
|-
! style="background: #efefef;" | Première têtière
! colspan="2" style="background: #ffdead;" | Deuxième têtière
<!--
! style="background: #aaa;" | Troisième têtière -->
|-
| coin supérieur gauche
| &nbsp;
| rowspan="2" style="border-bottom: 3px solid grey;" valign="top" |
côté droit
|-
| style="border-bottom: 3px solid grey;" | coin inférieur gauche
| style="border-bottom: 3px solid grey;" | milieu inférieur
|-
| colspan="3" align="center" |
{| border="0"
|+''Un tableau dans un tableau''
|-
| align="center" width="150px" | [[Image:wiki.png]]
| align="center" width="150px" | [[Image:Wiki_ja.png]]
|-
| align="center" colspan="2" style="border-top: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red; border-left: 1px solid red;" | Deux logos Wikipédia
|}
|}
</nowiki></pre>
</blockquote>

=== Résultat affiché par votre navigateur ===

<blockquote style="background: white; border: thin solid black; padding: 1em;">
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''Un exemple de tableau'''
|-
! style="background: #efefef;" | Première têtière
! colspan="2" style="background: #ffdead;" | Deuxième têtière
<!--
! style="background: #aaa;" | Troisième têtière -->
|-
| coin supérieur gauche
| &nbsp;
| rowspan="2" style="border-bottom: 3px solid grey;" valign="top" |
côté droit
|-
| style="border-bottom: 3px solid grey;" | coin inférieur gauche
| style="border-bottom: 3px solid grey;" | milieu inférieur
|-
| colspan="3" align="center" |
{| border="0"
|+''Un tableau dans un tableau''
|-
| align="center" width="150px" | [[Image:wiki.png]]
| align="center" width="150px" | [[Image:Wiki_ja.png]]
|-
| align="center" colspan="2" style="border-top: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red; border-left: 1px solid red;" | Deux logos Wikipédia
|}
|}
</blockquote>

== Encore un autre exemple ==

Voici un exemple écrit dans le nouveau wikicode, qui est bien plus simple que le traditionnel HTML. Le source sera cependant légèrement plus long (de 10 à 20 %) que la version HTML.

=== Code Wikipédia ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki><table border="1" cellpadding="2">
<caption>Table de multiplication</caption>

{| border="1" cellpadding="2"
!Nom :
!Effet :
!Jeu disponible sur
|-
|Pokeball
|Pokeball normal
|toute version
|-
|Great Ball
|Mieux qu'un Pokeball
|toute version
|-
|Ultra Ball
|Mieux qu'un Great Ball
|toute version
|-
|Master Ball
|Attrape tout Pokémon à coup sûr
|toute version
|-
|}
</table></nowiki></pre>
</blockquote>

=== Résultat affiché par votre navigateur ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1" cellpadding="2"
!Nom :
!Effet :
!Jeux disponibles sur
|-
|Pokeball
|Pokeball normal
|toute version
|-
|Great Ball
|Mieux qu'un Pokeball
|toute version
|-
|Ultra Ball
|Mieux qu'un Great Ball
|toute version
|-
|Master Ball
|Attrape tout Pokémon à coup sûr.
|toute version
|-
|}
</blockquote>

==Une exemple de proposition de la [[Wikipédia:Projet, Charte graphique/tableau2|Charte graphique]]==

=== Code Wikipédia ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki><table border="1" cellpadding="2">
<caption>Table de multiplication</caption>
{| border="0" align="center" style="border: 1px solid #999; background-color:#FFFFFF"
|-align="center" bgcolor="#CCCCCC"
!Nom :
!Effet :
!Jeux disponibles sur
|-
|Pokeball
|Pokeball normal
|toute version
|-bgcolor="#EFEFEF"
|Great Ball
|Mieux qu'un Pokeball
|toute version
|-
|Ultra Ball
|Mieux qu'un Great Ball
|toute version
|-bgcolor="#EFEFEF"
|Master Ball
|Attrape tout Pokémon à coup sûr.
|toute version
|}
</table></nowiki></pre>
</blockquote>

=== Résultat affiché par votre navigateur ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="0" align="center" style="border: 1px solid #999; background-color:#FFFFFF"
|-align="center" bgcolor="#CCCCCC"
!Nom :
!Effet :
!Jeux disponibles sur
|-
|Pokeball
|Pokeball normal
|toute version
|-bgcolor="#EFEFEF"
|Great Ball
|Mieux qu'un Pokeball
|toute version
|-
|Ultra Ball
|Mieux qu'un Great Ball
|toute version
|-bgcolor="#EFEFEF"
|Master Ball
|Attrape tout Pokémon à coup sûr.
|toute version
|}
</blockquote>
== 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. 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.

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 et les tableaux ne sont pas vraiment faits pour cela.

==Quand les tableaux sont-ils inappropriés ?==

===Liste très longues ou listes très courtes===

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 Wikipédia. Les listes longues seront difficiles à maintenir si elles se retrouvent à l'intérieur de taleaux et les listes courtes sont réellement trop simples pour nécessiter un formatage en tableau. Voici quelques exemples de données à ne pas mettre en tableaux.

==== Liste en tableau (à ne pas faire) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1" |
|-
|1980||Vague de pluie
|-
|1988||Nom d'un chat !
|-
|1994||La vie, la pomme
|-
|1994||Le ciel est vert
|}
</blockquote>

====Liste classique (correct) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
*1980 : Vague de pluie
*1988 : Nom d'un chat !
*1994 : La vie, la pomme
*1994 : Le ciel est vert
</blockquote>

=== 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 supportaient 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 <code>div</code>.

Pour plus d'information, reportez-vous aux pages [[Wikipédia:Règles d'utilisation des images]], [[Wikipédia:Description d'une image]], [[Wikipédia:Cartes et images]] et [[Wikipédia:Ressources libres de droit]]. Voici un petit aperçu :

==== Illustration en tableau (à ne pas faire) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<code><nowiki><table align="right" border="0" cellpadding="0"><tr><td>[[Image:wiki.png]]</td></tr></table></nowiki></code>
</blockquote>

==== Illustration sans tableau (correct) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<code><nowiki>[[Image:wiki.png|right|]]
</nowiki></code>
</blockquote>

==== A quoi ça ressemble ? ====

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é) :

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<div style="float:right; margin: 0 0 1em 1em;">[[Image:Covalent.png]]</div>
Covalent bonding most frequently occurs between atoms with similar electronegativities, where neither atom can provide sufficient energy to completely remove an electron from the other atom. Covalent bonds are more common between non-metals, whereas ionic bonding is more common between two metal atoms or a metal and a non-metal atom.
<br />&nbsp;<br />Covalent bonding tends to be stronger than other types of bonding, such as ionic bonding. In addition unlike ionic bonding, where ions are held together by a non-directional coulombic attraction, covalent bonds are highly directional. As a result, covalently bonded molecules tend to form in a relatively small number of characteristic shapes, exhibiting specific bonding angles.<br />
<br />
Covalent bonding most frequently occurs between atoms with similar electronegativities, where neither atom can provide sufficient energy to completely remove an electron from the other atom. Covalent bonds are more common between non-metals, whereas ionic bonding is more common between two metal atoms or a metal and a non-metal atom.
<br />&nbsp;<br />Covalent bonding tends to be stronger than other types of bonding, such as ionic bonding. In addition unlike ionic bonding, where ions are held together by a non-directional coulombic attraction, covalent bonds are highly directional. As a result, covalently bonded molecules tend to form in a relatively small number of characteristic shapes, exhibiting specific bonding angles.
</blockquote>

== Problèmes éventuels ==

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 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 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 « &lt;!-- Pour éditer le texte de cet article, dépassez le tableau. --&gt; » 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 le [[tableau périodique des éléments]] ou surtout 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>code</code>, <code>pre</code> ou <code>tt</code>, 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.

== Lien externe==
* [http://wp.netscape.com/assist/net_sites/table_sample.html The Table Sampler] - Plusieurs exemples utiles de tableaux
* [[:en:Infobox]] proposition de codes couleur sur en: (en anglais)

{{Contribuer}}