Voir la source de Test-tableaux

{| class="wikitable centre"
! Important 
|-
|| {{Aide:tableau/m}}
Cette page a été archivée suite à une discussion du 1/04/2008 sur le [[Projet:Aide]]. La page ne doit '''pas''' être supprimée, cf sa première PaS, mentionnant que cette page est déjà une page de référence pour des wiki extérieurs. <br />Les nouvelles pages d'aide à la création de tableau sont ci-à droite, et ne sont plus à jour. Merci d'actualiser vos favoris et liens.
|}

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]] permettant de créer des tableaux, vous pouvez continuer à insérer le code directement dans l'article que vous êtes en train d'éditer. Cependant, les balises de tableaux sont parfois difficiles à éditer surtout pour quelqu'un n'étant pas à l'aise avec le code HTML. Pour cela, {{en}} [[:en:User:Magnus Manske|Magnus Manske]] a développé de nouvelles balises : le [[Wikitexte]].

Pour l'utilisation de ce langage, se référer à [[Projet:Charte graphique/Apparence des tableaux]]. La correspondance se trouve sur [[Aide:Tableau]].

==Premiers exemples==

Nous montrons quelques exemples simples pour avoir un premier contact avec le codage Wiki. 

* Voici le tableau le plus simple qui soit, c'est-à-dire celui qui ne contient qu'une seule cellule.


{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
|cellule unique
|}
|
<pre>
{| class="wikitable"
|cellule unique
|}
</pre>
|}


*Le deuxième exemple contient deux cellules : une cellule gauche et une cellule droite.
 

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
|gauche
|droite
|}
|
<pre>
{| class="wikitable"
|gauche
|droite
|}
</pre>
|}


*Le troisième exemple contient six cellules : 

**une cellule '''haut gauche''', une cellule '''haut centre''' et une cellule '''haut droite'''
**une cellule '''bas gauche''', une cellule '''bas centre''' et une cellule '''bas droite'''.
 

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
|haut gauche
|haut centre
|haut droite
|-
|bas gauche
|bas centre
|bas droite
|}
|
<pre>
{| class="wikitable"
|haut gauche
|haut centre
|haut droite
|-
|bas gauche
|bas centre
|bas droite
|}
</pre>
|}

==Syntaxe générale==

'''''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 <code>&lt;nowiki&gt;|&lt;/nowiki&gt;.</code>''

=== Tableau ===

En wiki, pour créer un tableau, nous procédons de la façon suivante :
 <nowiki>{| </nowiki>''paramètres''<nowiki>
 |}</nowiki>

Le début d'un tableau est signalé par deux caractères:
* l'accolade ouvrante '''{'''
* le trait vertical | 

La fin d'un tableau est également composée de deux caractères. 
* le trait vertical | 
* l'accolade fermante '''}'''


{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
|}
|
<pre>
{| class="wikitable"
|}
</pre>
|}

On pourra constater que le tableau ainsi créé est vide.

Le champ « paramètres » est ici ignoré et peut être remplacé par différents paramètres utilisés dans les tableaux tel 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. Les paramètres sont étudiés plus loin.

=== Cellule ===
Pour créer des cellules, la syntaxe est la suivante :

 | cellule1
 | cellule2
 | cellule3

Une autre disposition des cellules totalement équivalente est la suivante :

 | 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 pour le tableau en lui-même, chacune des cellules d'un tableau peut contenir des paramètres. 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


{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
|gauche
|centre
|droite
|}
|
<pre>
{| class="wikitable"
| gauche
| centre
| droite
|}
</pre>
|}

=== Ligne ===

Ce sont les codes qui permettent de passer à une nouvelle ligne dans le tableau. Leur utilisation est très simple, lorsque vous souhaitez passer à une nouvelle ligne, il suffit de faire :

 |-


{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{|class="wikitable"
| haut gauche
| haut centre
| haut droite
|-
| bas gauche
| bas centre
| bas droite
|}
|
<pre>
{| class="wikitable"
| haut gauche
| haut centre
| haut droite
|-
| bas gauche
| bas centre
| bas droite
|}
</pre>
|}

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

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

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
| haut gauche
| haut centre
| haut droite
|--------
| bas gauche
| bas centre
| bas droite
|}
|
<pre>
{| class="wikitable"
| haut gauche
| haut centre
| haut droite
|--------
| bas gauche
| bas centre
| bas droite
|}
</pre>
|}


Comme pour les autres codes, il est bien sûr possible d'utiliser des paramètres.

=== Cellule titre ===
Le code titre  est très semblable au code colonne dans le sens où son utilisation est totalement identique, seul le symbole change. Cependant il y a bien une différence notable entre ces deux codes qui intervient au niveau visuel. Le code titre est généralement utilisé pour spécifier qu'une cellule représente un titre. Et il peut, à cet effet, être utilisé partout où vous estimez que la cellule représente un titre. Le texte de la cellule est plus visible car il est en caractères gras.

La syntaxe est différente et là où on utilisait un trait vertical pour les cellules, on le remplace par un point d'exclamation !

 ! titre1
 ! titre2
 ! titre3

ou suivant l'autre disposition :

 ! titre1 !! titre2 !! titre3

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

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



{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
! titre gauche
! titre centre
! titre droite
|-
| haut gauche
| haut centre
| haut droite
|-
| bas gauche
| bas centre
| bas droite
|}
|
<pre>
{| class="wikitable"
! titre gauche
! titre centre
! titre droite
|-
| haut gauche
| haut centre
| haut droite
|-
| bas gauche
| bas centre
| bas droite
|}
</pre>
|}


{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
!
! titre gauche
! titre droite
|-
! titre haut
| haut gauche
| haut droite
|-
! titre bas
| bas gauche
| bas droite
|}
|
<pre>
{| class="wikitable"
!
! titre gauche
! titre droite
|-
! titre haut
| haut gauche
| haut droite
|-
! titre bas
| bas gauche
| bas droite
|}
</pre>
|}

=== Légende ===
Une légende est un petit texte qui est 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

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

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

Il n'est autorisé de placer qu'une seule légende par tableau. Cependant s'il en existe plusieurs, seule la première sera prise en compte.


{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
|+ '''exemple avec légende'''
! titre gauche
! titre centre
! titre droite
|-
| haut gauche
| haut centre
| haut droite
|-
| bas gauche
| bas centre
| bas droite
|}
|
<pre>
{| class="wikitable"
|+ '''exemple avec légende'''
! titre gauche
! titre centre
! titre droite
|-
| haut gauche
| haut centre
| haut droite
|-
| bas gauche
| bas centre
| bas droite
|}
</pre>
|}

=== Exemple récapitulatif ===

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

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
|+ '''exemple récapitulatif'''
!
! titre gauche
! titre centre
! titre droite
|-
! titre haut
| haut gauche
| haut centre
| haut droite
|-
! titre milieu
| milieu gauche
| milieu centre
| milieu droite
|-
! titre bas
| bas gauche
| bas centre
| bas droite
|}
|
<pre>
{| class="wikitable"
|+ '''exemple récapitulatif'''
!
! titre gauche
! titre centre
! titre droite
|-
! titre haut
| haut gauche
| haut centre
| haut droite
|-
! titre milieu
| milieu gauche
| milieu centre
| milieu droite
|-
! titre bas
| bas gauche
| bas centre
| bas droite
|}
</pre>
|}

==Paramètres==

===Taille des tableaux ou des cellules===

====Largeur : ''code'' width====

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 150 pixels.

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="33%" | Résultat affiché !! style="background:#00CCFF" width="33%" | Codage Wiki|-
|-
|
{| class="wikitable" width="10"
|cellule 1
|cellule 2
|}
|
<pre>
{| class="wikitable" width="10"
|cellule 1
|cellule 2
|}
</pre>
|-
|
{| class="wikitable" width="100"
|cellule 1
|cellule 2
|}
|
<pre>
{| class="wikitable" width="100"
|cellule 1
|cellule 2
|}
</pre>
|-
|
{| class="wikitable" width="150"
|cellule 1
|cellule 2
|}
|
<pre>
{| class="wikitable" width="150"
|cellule 1
|cellule 2
|}
</pre>
|}


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.

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable" width="33%"
|cellule 1
|cellule 2
|}
|
<pre>
{| class="wikitable" width="33%"
|cellule 1
|cellule 2
|}
</pre>
|-
|
{| class="wikitable" width="50%"
|cellule 1
|cellule 2
|}
|
<pre>
{| class="wikitable" width="50%"
|cellule 1
|cellule 2
|}
</pre>
|-
|
{| class="wikitable" width="100%"
|cellule 1
|cellule 2
|}
|
<pre>
{| class="wikitable" width="100%"
|cellule 1
|cellule 2
|}
</pre>
|}

Ce paramètre peut également être utilisé pour chacune des cellules.
Voyons un exemple avec les cellules :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="33%" | Résultat affiché !! style="background:#00CCFF" width="33%" | Codage Wiki
|-
|
{| class="wikitable" width="95%"
| colspan="3" | Tableau 1
|-
| width="33%" | cellule 1
| width="33%" | cellule 2
| width="33%" | cellule 3
|}
|
<pre>
{| class="wikitable" width="95%"
| colspan="3" | Tableau 1
|-
| width="33%" | cellule 1
| width="33%" | cellule 2
| width="33%" | cellule 3
|}
</pre>
|-
|
{| class="wikitable" width="95%"
| colspan="3" | Tableau 2
|-
| width="50%" | cellule 1
| width="35%" | cellule 2
| width="15%" | cellule 3
|}
|
<pre>
{| class="wikitable" width="95%"
| colspan="3" | Tableau 2
|-
| width="50%" | cellule 1
| width="35%" | cellule 2
| width="15%" | cellule 3
|}
</pre>
|}

====Hauteur : ''code'' height====

Pour le paramètre de hauteur '''height''', l'utilisation est la même que pour le paramètre de largeur '''width''' mais cette fois-ci on changera alors la hauteur des cellules.

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="33%" | Résultat affiché !! style="background:#00CCFF" width="33%" | Codage Wiki
|-
|
{| class="wikitable" width="95%"

! Tableau 1
|-
| height="60" | cellule 1
|-
| height="20" | cellule 2
|-
| height="40" | cellule 3
|}
|
<pre>
{| class="wikitable" width="95%"
! Tableau 1
|-
| height="60" | cellule 1
|-
| height="20" | cellule 2
|-
| height="40" | cellule 3
|}
</pre>
|}

===Alignement===

'''align et valign:''' 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.


====Alignement horizontal====

Pour l'alignement horizontal, il faut utiliser la class <code>wikitable</code>:

 class="wikitable gauche"
 class="wikitable centre"
 class="wikitable droite"

Voyons maintenant un exemple de positionnement d'un tableau :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable gauche"
|à gauche
|}
|
<pre>
{| class="wikitable gauche"
|à gauche
|}
</pre>
|-
|
{| class="wikitable centre"
|au centre
|}
|
<pre>
{| class="wikitable centre"
|au centre
|}
</pre>
|-
|
{| class="wikitable droite"
|à droite
|}
|
<pre>
{| class="wikitable droite"
|à droite
|}
</pre>
|}

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.

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
| Positionnement
|-
| sans
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}
|
<pre>
{| class="wikitable"
| Positionnement
|-
| sans
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}
</pre>
|}

====Alignement vertical====

Pour l'alignement vertical, il faut utiliser le paramètre <code>valign</code> :

 valign="top"
 valign="middle"
 valign="bottom"

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 [[#width_et_height|taille]] de 150 pixels pour que l'on puisse bien voir comment se positionne le texte des autres cellules.

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
| height="150" | Position
| valign="top" | haut
| valign="middle" | milieu
| valign="bottom" | bas
|}
|
<pre>
{| class="wikitable"
| height="150" | Position
| valign="top" | haut
| valign="middle" | milieu
| valign="bottom" | bas
|}
</pre>
|}

===Espacement===
'''cellspacing et cellpadding:''' Il est possible de changer l'espacement entre les cellules grâce au paramètre <code>cellspacing</code>. Et il est possible de spécifier l'espacement entre le bord d'une cellule et son contenu grâce au paramètre <code>cellpadding</code>. 

Leur utilisation est la suivante :

 cellspacing="x"

 cellpadding="x"

*Commençons par un exemple avec le paramètre <code>cellspacing</code> :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| border="1" cellspacing="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
|
<pre>
{| border="1" cellspacing="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
</pre>
|-
|
{| border="1" cellspacing="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
|
<pre>
{| border="1" cellspacing="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
</pre>
|}

*Voici maintenanr un exemple avec le paramètre <code>cellpadding</code> :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| border="1" cellpadding="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
|
<pre>
{| border="1" cellpadding="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
</pre>
|-
|
{| border="1" cellpadding="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
|
<pre>
{| border="1" cellpadding="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
</pre>
|}

===Bordure===

'''border:''' 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.<br/>

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.

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| border="0"
|sans bordure 1
|sans bordure 2
|}
|
<pre>
{| border="0"
|sans bordure 1
|sans bordure 2
|}
</pre>
|-
|
{| border="1"
|bordure normale 1
|bordure normale 2
|}
|
<pre>
{| border="1"
|bordure normale 1
|bordure normale 2
|}
</pre>
|-
|
{| border="10"
|grosse bordure 1
|grosse bordure 2
|}
|
<pre>
{| border="10"
|grosse bordure 1
|grosse bordure 2
|}
</pre>
|
|}

On peut également choisir 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...)


{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{|style="border:2px solid black;"
|exemple : solid
|}
|
<pre>
{|style="border:2px solid black;"
|exemple : dotted
|}
</pre>
|-
|
{|style="border:2px dotted black;"
|exemple : dotted
|}
|
<pre>
{|style="border:2px dotted black;"
|exemple : dotted
|}
</pre>
|-
|
{|style="border:2px dashed black;"
|exemple : dashed
|}
|
<pre>
{|style="border:2px dashed black;"
|exemple : dashed
|}
</pre>
|-
|
{|style="border:5px double black;"
|exemple : double
|}
|
<pre>
{|style="border:5px double black;"
|exemple : double
|}
</pre>
|}

===Fusion de cellules===

'''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 :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
| Simple
| colspan="2" | Fusionnée
|-
| cellule1
| cellule2
| cellule3
|}
|
<pre>
{| class="wikitable"
| Simple
| colspan="2" | Fusionnée
|-
| cellule 1
| cellule 2
| cellule 3
|}
</pre>
|}

Et voyons maintenant comment fusionner des lignes :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
| Première
| Deuxième
|-
| Gauche 1
| rowspan="3" | Droite
|-
| Gauche 2
|-
| Gauche 3
|}
|
<pre>
{| class="wikitable"
| Première
| Deuxième
|-
| Gauche 1
| rowspan="3" | Droite
|-
| Gauche 2
|-
| Gauche 3
|}
</pre>
|}

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.

===Couleurs===
'''L'usage des couleurs dans un tableau peut être une manière de clarifier l'information que le tableau doit faire passer. L'usage pertinent des couleurs doit être fait en fonction du but recherché.
L'usage abusif de couleur sans objectif précis nuit au contenu de l'article. C'est en tenant compte de ces critères qu'il convient d'utiliser les couleurs dans un article.'''

====Couleur du tableau====
La méthode la plus simple pour attribuer une couleur de fond à l'ensemble d'un tableau est l'utilisation du code style expliqué dans le paragraphe style plus loin dans l'article.

====Couleur d'une ligne====

On peut attribuer une  couleur de fond à une ligne complète de la manière suivante

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{|class="wikitable"
! cellule A
! cellule B
! cellule C
|-{{ligne grise}}
| gris a
| gris b
| gris c
|-{{ligne blanche}}
| blanc a
| blanc b
| blanc c
|-{{ligne jaune}}
| jaune a
| jaune b
| jaune c
|-{{ligne verte}}
| vert a
| vert b
| vert c
|}
|<pre>
{|class="wikitable"
! cellule A
! cellule B
! cellule C
|-{{ligne grise}}
| gris a
| gris b
| gris c
|-{{ligne blanche}}
| blanc a
| blanc b
| blanc c
|-{{ligne jaune}}
| jaune a
| jaune b
| jaune c
|-{{ligne verte}}
| vert a
| vert b
| vert c
|}
</pre>
|}

====Couleur d'une cellule====
Il est possible de changer la couleur de fond d'une cellule. Pour cela, il faut utiliser le paramètre <code>bgcolor</code> 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 [[Aide:Couleurs]] pour avoir une liste de couleurs avec leur valeur hexadécimale. 
Pour bien illustrer cela, regardons l'exemple qui suit :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="60%" | Résultat affiché !! style="background:#00CCFF" width="40%" | Codage Wiki
|-
|
{| class="wikitable"
| bgcolor="#FF6666" | rouge
| bgcolor="#66FF66" | vert
| bgcolor="#aaaaFF" | bleu
|}
|
<pre>
{| class="wikitable"
| bgcolor="#FF6666" | rouge
| bgcolor="#66FF66" | vert
| bgcolor="#aaaaFF" | bleu
|}
</pre>
|}

=== Style ===
Nous arrivons au dernier des paramètres que l'on peut utiliser dans des tableaux : <code>style</code>. Ce paramètre permet de  changer tout l'aspect graphique. Il peut aussi bien être utilisé pour le tableau que pour une cellule unique. Voici un exemple d'utilisation du paramètre style, nous allons changer la couleur de fond du tableau et choisir la couleur verte :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="30%" | Résultat affiché !! style="background:#00CCFF" width="70%" | Codage Wiki 
|-
|
{| class="wikitable" style="background-color:#CCFFCC"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
|
<pre>
{| class="wikitable" style="background-color:#CCFFCC"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
</pre>
|}


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 placer et comment l'utiliser, reportez-vous vers un tutorial sur le [[Feuilles de style en cascade|CSS]].

===Insertion d'une image===

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

Voici un petit aperçu à ne pas faire :

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 <nowiki>
{| align="right" border="0" cellpadding="0" | [[Image:Blueberries.jpg|photo de myrtille]] |}
</nowiki>
</blockquote>

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

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 <nowiki>[[Image:Blueberries.jpg|right|photo de myrtille]]</nowiki>
</blockquote>

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;">
[[Image:Blueberries.jpg|right|photo de mytille]]
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.
</blockquote>

=== Tableau triable ===
Une option intéressante si on présente des données qui peuvent être triées selon plusieurs colonnes :

{|class="wikitable" style="width:100%"
|-
!  style="background:#00CCFF" width="30%" | Résultat affiché !! style="background:#00CCFF" width="70%" | Codage Wiki
|-
|
{| class="wikitable sortable" 
! N°
! Nom
! score
|-
| 1 || moi || 32.999
|-
| 2 || elle || 155.25
|-
| 3 || lui || 22
|}
|
<pre>
{| class="wikitable sortable" 
! N°
! Nom
! score
|-
| 1 || moi || 32.999
|-
| 2 || elle || 155.25
|-
| 3 || lui || 22
|}
</pre>
|}

Remarque: Pour les nombres, il faut utiliser un point et non une virgule.

Les lignes comprenant de lettres accentuées ne sont pas triées correctement. Il est très facile d'y remédier. <br> ''Voir :&nbsp; '''[[Aide:Les_tableaux_pour_les_experts#Tri correct des lettres accentuées|Syntaxe d'un tri correct des lettres accentuées]].'''''

=== Accessibilité aux malvoyants ===

Les malvoyants utilisent en général un périphérique [[Braille]] ou un navigateur à synthèse vocale. Le problème est que les éléments sont égrénés un par un, et que l'on perd alors le lien entre la cellule lue et les titres des lignes et des colonnes. Or, ce lien est fondamental pour la compréhension du tableau.

Pour résoudre ce problème et améliorer l'[[accessibilité du Web|accessibilité]], on a recours à des paramètres spécifiques.

====Tableau simple====
Ceci concerne les tableau à simple ou double entrées, mais sans colonnes fusionnées. Les paramètres d'accessibilité sont, par ordre de priorité :

# Obligatoirement: le paramètre <code>scope</code> (portée) permet d'indiquer si une cellule titre (introduite par !) se rapporte à une colonne (<code>scope=col</code>) où à une ligne (<code>scope=row</code>).
#: Ainsi, lorsqu'une cellule sera lue, le navigateur donnera le titre de la ligne et la colonne. 
# Eventuellement : le paramètre <code>summary</code> (résumé) se met dans l'ouverture du tableau et permet de donner une ''description de comment la table est organisée''.
# Eventuellement : la légende (introduite par |+) permet de titrer l'ensemble du tableau s'il n'est pas précédé d'une phrase introductive.
# Accessoirement : pour les cellules comprenant plus de 20 caractères, <code>abbr</code> donne un titre abrégé.
#: Cela permet aux médias limitées en nombre de caractères par ligne de n'afficher que le résumé, ou à une synthèse vocale de ne pas répéter pour chaque cellule un en-tête trop long.


=====Exemple=====
<poem><nowiki>{| class="wikitable" summary="le tableau indique, pour chaque numéro de tableau (col. 1), le nom du tableau (col. 2), l'artiste (col. 3) et la date (col. 4)"
|-
|+ ''Quelques toiles célèbres tirées au sort.''
|-
! scope="col" | N°
! scope="col" style="width: 50%" | Nom du tableau
! scope="col" | Artiste
! scope="col" | Date
|-
| 1 
| abbr="Bonaparte au Saint-Bernard" | Tableau-portrait équestre du général Bonaparte, premier Consul de la république, représenté dans le moment où il passe les Alpes au mont Saint-Bernard le 30 floréal an VIII
| Jacques-Louis David
| 1800-1803
|-
| 2 
| Le Radeau de la Méduse
| Théodore Géricault
| 1819
|-
| 3
| Mona Lisa
| Léonard de Vinci
| 1503-1507
|}</nowiki></poem>

=====Rendu=====
{| class="wikitable" summary="le tableau indique, pour chaque numéro de tableau (col. 1), le nom du tableau (col. 2), l'artiste (col. 3) et la date  (col. 4)"
|-
|+ ''Quelques toiles célèbres tirées au sort.''
|-
! scope="col" | N°
! scope="col" style="width: 50%" | Nom du tableau
! scope="col" | Artiste
! scope="col" | Date
|-
| 1 
| abbr="Bonaparte au Saint-Bernard" | Tableau-portrait équestre du général Bonaparte, premier Consul de la république, représenté dans le moment où il passe les Alpes au mont Saint-Bernard le 30 floréal an VIII
| Jacques-Louis David
| 1800-1803
|-
| 2 
| Le Radeau de la Méduse
| Théodore Géricault
| 1819
|-
| 3
| Mona Lisa
| Léonard de Vinci
| 1503-1507
|}

On remarque qu'il n'y a pas de différence en ce qui concerne le rendu graphique.

=====Tableaux complexes=====
Dans les cas plus compliqués, par exemple lorsqu'il y a des cellules fusionées, <code>scope</code> ne doit pas être employé. On doit attribuer un identifiant unique aux cellules de titre <code>! </code>, avec le paramètre <code>id</code>, puis indiquer à quelles cellules de titre de ligne et de colonne est associée chaque cellule, avec le paramètre <code>headers</code>. Par exemple :
<poem><nowiki>{| class="wikitable"
!
! id="col1" | 1
! id="col2" | 2
! id="col3" | 3
|-
! id="row1" | A
| headers="col1 row1" | A1
| headers="col2 row1" | A2
| headers="col2 row1" | A3
|-
! id="row2" | B
| headers="col1 row2" | B1
| headers="col2 col3 row1" | B2-B3
|}</nowiki></poem>
qui donne

{| class="wikitable"
!
! id="col1" | 1
! id="col2" | 2
! id="col3" | 3
|-
! id="row1" | A
| headers="col1 row1" | A1
| headers="col2 row1" | A2
| headers="col2 row1" | A3
|-
! id="row2" | B
| headers="col1 row2" | B1
| headers="col2 col3 row1" colspan="2" | B2-B3
|}

==Usage des tableaux==

=== 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.

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

=== 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 tableaux et les listes courtes sont réellement trop simples pour nécessiter un formatage en tableau. Voici un petit exemple à ne pas suivre :

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| class="wikitable" |
|-
|1980||Vague de pluie
|-
|1988||Nom d'un chat !
|-
|1994||La vie, la pomme
|-
|1994||Le ciel est vert
|}
</blockquote>

choisissez plutôt une liste classique :

<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>

=== 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 écrits 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]] 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.

<!-- Suggestion de présentation des annexes. Aide : http://fr.wikipedia.org/wiki/Aide:Notes et références -->
== Voir aussi ==
* [[Aide:Les tableaux pour les nuls]]
* [[Aide:Tableaux]], avec aussi la syntaxe html
=== Articles connexes ===
* {{en}} [[meta:Help:Sorting|Help:Sorting]] : tout savoir sur le tri des tableaux.

[[Catégorie:Wikipédia:aide technique]]
[[Catégorie:Aide aux contributeurs expérimentés|{{PAGENAME}}]]