Modification de Aide:Tableau

{{Icône|Lien=Aide:Aide|Texte=Sommaire de l'aide|Image=Icone Aide.png|Taille=20}}
__TOC__
Les tableaux peuvent être très utiles pour la représentation de certaines données sur '''''GWiki'''''. Si vous êtes déjà familier des codes [[w:HTML|HTML]] permettant de créer des tableaux, vous pouvez insérer simplement 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 la codification HTML. Pour cela, des nouvelles balises développées par Magnus Manske ont été créées. Ces balises remplacent les traditionnelles balises HTML <nowiki><table>, <tr>, <td>, <th> et <caption></nowiki>. On peut donc se passer totalement des balises HTML, il est même plutôt conseillé de ne plus utiliser de code HTML pour créer un tableau malgré le fait que son utilisation est encore possible.

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.


== Petits exemples ==

Nous montrerons, ici, deux exemples simples pour avoir un premier contact avec le codage Wiki. Notre premier exemple nous montrera le tableau le plus minimaliste qui soit, c'est-à-dire celui qui ne contiendrait qu'une seule cellule.

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
|cellule
|}
|
<pre>
{| border="1"
|cellule
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <td>cellule</td>
  </tr>
</table>
</pre>
|}


Le deuxième exemple contient deux cellules. Comme vous pouvez le constater, il est possible de disposer les cellules de deux façons différentes. Soit les cellules sont placées les unes en dessous des autres, soit elles sont placées les unes à côté des autres. Mais nous y reviendrons plus en détail par la suite.

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
|gauche
|droite
|}
|
<pre>
{| border="1"
|gauche
|droite
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <td>gauche</td>
    <td>droite</td>
  </tr>
</table>
</pre>
|-
|
{| border="1"
|gauche || droite
|}
|
<pre>
{| border="1"
|gauche || droite
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <td>gauche</td>
    <td>droite</td>
  </tr>
</table>
</pre>
|}


== La syntaxe des tableaux ==
Nous verrons ici les différentes balises qui peuvent apparaître dans la création d'un tableau.


=== table ===
Dans le langage HTML, l'élément <code>table</code> est l'élément de base pour la création d'un tableau. En wiki, pour créer un tableau, nous procédons de la façon suivante :

 <nowiki>{| </nowiki>''paramètres''<nowiki>
 |}</nowiki>

ce qui donnerait en HTML, l'encodage suivant :

 &lt;table ''paramètres''&gt;
 &lt;/table&gt;

On voit donc bien qu'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 | et il est suivi du deuxième caractère qui est l'accodade fermante '''}'''.
Le champ ''paramètres'' doit bien entendu ê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.

=== td ===
En HTML, l'élément <code>td</code> représente une cellule dans une ligne du tableau. 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. Mais ces deux dispositions donnent le même code en HTML qui est le suivant :

 &lt;td&gt;cellule1&lt;/td&gt;&lt;td&gt;cellule2&lt;/td&gt;&lt;td&gt;cellule3&lt;/td&gt;


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

mais quelle que soit la disposition utilisée, le code HTML sera le suivant :

 &lt;td ''paramètres''&gt;cellule1&lt;/td&gt;&lt;td ''paramètres''&gt;cellule2&lt;/td&gt;&lt;td ''paramètres''&gt;cellule3&lt;/td&gt;

=== tr ===
Ce sont les balises <code>tr</code> 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 :

 |-

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

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

et nous obtenons en HTML :

 &lt;tr&gt; ... &lt;/tr&gt;

Un grand avantage du codage wiki est qu'il se charge entièrement de la fermeture des balises <code>tr</code> 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 <code>tr</code>.


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

 |- ''paramètres''

ce qui donne en HTML :

 &lt;tr ''paramètres''&gt; ... &lt;/tr&gt;

=== th ===
Les balises <code>th</code> sont très semblables aux balises <code>td</code> dans le sens où leur utilisation est totalement identique, seul la syntaxe change. Cependant il y a bien une différence notable entre ces deux balises qui intervient au niveau visuel. La balise <code>th</code> est généralement utilisée pour spécifier qu'une cellule représente un titre. Et elle peut, à cet effet, être utilisée partout où vous estimez que la cellule représente un titre. Visuellement, cela se voit car le texte de la cellule est en gras.

La syntaxe est différente et là où on utilisait un trait vertical pour les cellules, nous utiliserons 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, nous utiliserons toujours le trait vertical |

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

et nous obtenons alors en HTML :

 &lt;th ''paramètres''&gt;titre1&lt;/th&gt;&lt;th ''paramètres''&gt;titre2&lt;/th&gt;&lt;th ''paramètres''&gt;titre3&lt;/th&gt;

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 :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
! Titre Colonne 1 !! Titre Colonne 2
|-
|cellule1
|cellule2
|}
|
<pre>
{| border="1"
! Titre Colonne 1 !! Titre Colonne 2
|-
|cellule1
|cellule2
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <th>Titre Colonne 1</th>
    <th>Titre Colonne 2</th>
  </tr>
  <tr>
    <td>cellule1</td>
    <td>cellule2</td>
  </tr>
</table>
</pre>
|}

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 :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
! Titre Colonne 1 || Colonne 2
|}
|
<pre>
{| border="1"
! Titre Colonne 1 || Colonne 2
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <th>Titre Colonne 1</th>
    <th>Colonne 2</th>
  </tr>
</table>
</pre>
|}

Pour éviter ce problème, nous devons faire passer la deuxième colonne à la ligne comme ceci :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
! Titre Colonne 1
| Colonne 2
|}
|
<pre>
{| border="1"
! Titre Colonne 1
| Colonne 2
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <th>Titre Colonne 1</th>
    <td>Colonne 2</td>
  </tr>
</table>
</pre>
|}


=== caption ===
L'élément <code>caption</code> représente une légende. C'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

qui donnera en HTML

 &lt;caption&gt;légende&lt;/caption&gt;

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

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

qui donne alors

 &lt;caption ''paramètres''&gt;légende&lt;/caption&gt;

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. Voici le résultat que l'on obtient :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
|+ légende
| Colonne 1
| Colonne 2
|}
|
<pre>
{| border="1"
|+ légende
| Colonne 1
| Colonne 2
|}
</pre>
|
<pre>
<table border="1">
  <caption>légende</caption>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
  </tr>
</table>
</pre>
|}


=== Exemple récapitulatif ===
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.

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
|+ légende
!
! Titre 1 !! Titre 2
|-
! Titre ligne
| Cellule 1
| Cellule 2
|}
|
<pre>
{| border="1"
|+ légende
!
! Titre 1 !! Titre 2
|-
! Titre ligne
| Cellule 1
| Cellule 2
|}
</pre>
|
<pre>
<table border="1">
  <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>
</pre>
|}


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

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
| Gauche
|
{| border="1"
|tableau imbriqué
|autre cellule
|}
| Droite
|-
| Cellule 1
| Cellule 2
| Cellule 3
|}
|
<pre>
{| border="1"
| Gauche
|
{| border="1"
|tableau imbriqué
|autre cellule
|}
| Droite
|-
| Cellule 1
| Cellule 2
| Cellule 3
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <td>Gauche</td>
    <td>
      <table border="1">
        <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>
</pre>
|}


== Les paramètres ==
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 ajouter des paramètres. Ces différents paramètres seront étudiés dans cette section. Ils permettent notamment de spécifier le positionnement du tableau (gauche, milieu, droit), des couleurs à utiliser et bien d'autres choses encore.


=== border ===
Ce paramètre que nous avons déjà utilisé dans nos différents tableaux permet de spécifier la taille de la bordure du tableau. 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.

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="0"
|sans bordure 1
|sans bordure 2
|}
|
<pre>
{| border="0"
|sans bordure 1
|sans bordure 2
|}
</pre>
|
<pre>
<table border="0">
  <tr>
    <td>sans bordure 1</td>
    <td>sans bordure 2</td>
  </tr>
</table>
</pre>
|-
|
{| border="1"
|bordure normale 1
|bordure normale 2
|}
|
<pre>
{| border="1"
|bordure normale 1
|bordure normale 2
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <td>bordure normale 1</td>
    <td>bordure normale 2</td>
  </tr>
</table>
</pre>
|-
|
{| border="10"
|grosse bordure 1
|grosse bordure 2
|}
|
<pre>
{| border="10"
|grosse bordure 1
|grosse bordure 2
|}
</pre>
|
<pre>
<table border="10">
  <tr>
    <td>grosse bordure 1</td>
    <td>grosse bordure 2</td>
  </tr>
</table>
</pre>
|}


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

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
| Simple
| colspan="2" | Fusionnée
|-
| cellule1
| cellule2
| cellule3
|}
|
<pre>
{| border="1"
| Simple
| colspan="2" | Fusionnée
|-
| cellule 1
| cellule 2
| cellule 3
|}
</pre>
|
<pre>
<table border="1">
  <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>
</pre>
|}

Et voyons maintenant comment fusionner des lignes :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
| Première
| Deuxième
|-
| Gauche 1
| rowspan="3" | Droite
|-
| Gauche 2
|-
| Gauche 3
|}
|
<pre>
{| border="1"
| Première
| Deuxième
|-
| Gauche 1
| rowspan="3" | Droite
|-
| Gauche 2
|-
| Gauche 3
|}
</pre>
|
<pre>
<table border="1">
  <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>
</pre>
|}

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


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

Pour l'alignement horizontal, il faut utiliser le paramètre <code>align</code> alors que pour l'alignement vertical, il faut utiliser <code>valign</code> :

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

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

Voyons maintenant un exemple de positionnement d'un tableau :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| align="left" border="1"
|à gauche
|}
|
<pre>
{| align="left" border="1"
|à gauche
|}
</pre>
|
<pre>
<table align="left" border="1">
  <tr>
    <td>à gauche</td>
  </tr>
</table>
</pre>
|-
|
{| align="center" border="1"
|au centre
|}
|
<pre>
{| align="center" border="1"
|au centre
|}
</pre>
|
<pre>
<table align="center" border="1">
  <tr>
    <td>au centre</td>
  </tr>
</table>
</pre>
|-
|
{| align="right" border="1"
|à droite
|}
|
<pre>
{| align="right" border="1"
|à droite
|}
</pre>
|
<pre>
<table align="right" border="1">
  <tr>
    <td>à droite</td>
  </tr>
</table>
</pre>
|}

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

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
| Positionnement
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}
|
<pre>
{| border="1"
| Positionnement
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}
</pre>
|
<pre>
<table border="1">
  <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>
</pre>
|}

Pour chacune des cellules, il est également possible de positionner le contenu verticalement. Dans l'exemple qui suit, nous avons créer 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.

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
| height="150" | Position
| valign="top" | haut
| valign="center" | milieu
| valign="bottom" | bas
|}
|
<pre>
{| border="1"
| height="150" | Position
| valign="top" | haut
| valign="center" | milieu
| valign="bottom" | bas
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <td height="150">Position</td>
    <td valign="top">haut</td>
    <td valign="center">milieu</td>
    <td valign="bottom">bas</td>
  </tr>
</table>
</pre>
|}

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

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| 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>
|
<pre>
<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>
</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>
|
<pre>
<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>
</pre>
|}

et alors le paramètre <code>cellpadding</code> :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| 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>
|
<pre>
<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>
</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>
|
<pre>
<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>
</pre>
|}


=== width et height ===
Grâce aux paramètres <code>width</code> et <code>height</code>, 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.

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1" width="10"
|cellule
|}
|
<pre>
{| border="1" width="10"
|cellule
|}
</pre>
|
<pre>
<table border="1" width="10">
  <tr>
    <td>cellule</td>
  </tr>
</table>
</pre>
|-
|
{| border="1" width="100"
|cellule
|}
|
<pre>
{| border="1" width="100"
|cellule
|}
</pre>
|
<pre>
<table border="1" width="100">
  <tr>
    <td>cellule</td>
  </tr>
</table>
</pre>
|-
|
{| border="1" width="200"
|cellule
|}
|
<pre>
{| border="1" width="200"
|cellule
|}
</pre>
|
<pre>
<table border="1" width="200">
  <tr>
    <td>cellule</td>
  </tr>
</table>
</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.

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1" width="33%"
|cellule
|}
|
<pre>
{| border="1" width="33%"
|cellule
|}
</pre>
|
<pre>
<table border="1" width="33%">
  <tr>
    <td>cellule</td>
  </tr>
</table>
</pre>
|-
|
{| border="1" width="50%"
|cellule
|}
|
<pre>
{| border="1" width="50%"
|cellule
|}
</pre>
|
<pre>
<table border="1" width="50%">
  <tr>
    <td>cellule</td>
  </tr>
</table>
</pre>
|-
|
{| border="1" width="100%"
|cellule
|}
|
<pre>
{| border="1" width="100%"
|cellule
|}
</pre>
|
<pre>
<table border="1" width="100%">
  <tr>
    <td>cellule</td>
  </tr>
</table>
</pre>
|}

Pour le paramètre <code>height</code>, l'utilisation est la même que pour <code>width</code> 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 :


{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1" width="100%"
| colspan="3" | Tableau 1
|-
| width="33%" | 1/3 cellule 1
| width="33%" | 1/3 cellule 2
| width="33%" | 1/3 cellule 3
|}
|
<pre>
{| border="1" width="100%"
| colspan="3" | Tableau 1
|-
| width="33%" | 1/3 cellule 1
| width="33%" | 1/3 cellule 2
| width="33%" | 1/3 cellule 3
|}
</pre>
|
<pre>
<table border="1" 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>
</pre>
|-
|
{| border="1" width="100%"
| colspan="3" | Tableau 2
|-
| width="50%" | 1/2 cellule 1
| width="25%" | 1/4 cellule 2
| width="25%" | 1/4 cellule 3
|}
|
<pre>
{| border="1" width="100%"
| colspan="3" | Tableau 2
|-
| width="50%" | 1/2 cellule 1
| width="25%" | 1/4 cellule 2
| width="25%" | 1/4 cellule 3
|}
</pre>
|
<pre>
<table border="1" 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>
</pre>
|}

=== bgcolor ===
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 :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1"
| bgcolor="#FF0000" | rouge
| bgcolor="#00FF00" | vert
| bgcolor="#0000FF" | bleu
|}
|
<pre>
{| border="1"
| bgcolor="#FF0000" | rouge
| bgcolor="#00FF00" | vert
| bgcolor="#0000FF" | bleu
|}
</pre>
|
<pre>
<table border="1">
  <tr>
    <td bgcolor="#FF0000">rouge</td>
    <td bgcolor="#00FF00">vert</td>
    <td bgcolor="#0000FF">bleu</td>
  </tr>
</table>
</pre>
|}

=== style ===
On peut utiliser le paramètre <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 :

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| border="1" style="background-color:#CCFFCC"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
|
<pre>
{| border="1" style="background-color:#CCFFCC"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
</pre>
|
<pre>
<table border="1" style="background-color:#CCFFCC">
  <tr>
    <td>cellule 1</td>
  </tr>
  <tr>
    <td>cellule 2</td>
  </tr>
  <tr>
    <td>cellule 3</td>
  </tr>
</table>
</pre>
|}

=== class ===
Nous arrivons au dernier des paramètres que l'on peut utiliser dans des tableaux : <code>class</code>. Il existe une classe pour les tableaux, permettant d'avoir un bon rendu rapidement: la classe <code>wikitable</code>:

{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"
|- bgcolor="#00CCFF"
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
|-
|
{| class="wikitable"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
|
<pre>
{| class="wikitable"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
</pre>
|
<pre>
<table class="wikitable">
  <tr>
    <td>cellule 1</td>
  </tr>
  <tr>
    <td>cellule 2</td>
  </tr>
  <tr>
    <td>cellule 3</td>
  </tr>
</table>
</pre>
|}

[[Catégorie:Aide]]