Modification de Aide:Insérer un tableau (wikicode, expert)

== La syntaxe des tableaux ==

=== Ouverture et fermeture ===

Les tableaux et leurs éléments sont délimités principalement par la barre verticale « | » (ou tube) et les accolades « { } ». Un tableau s’ouvre et se ferme toujours avec les caractères suivants :

 <nowiki>{|</nowiki>
 <nowiki>|}</nowiki>

{|style="width:100%; border:1px solid Gray;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
{|class="wikitable centre"
|-
| cellule
|}
|<!-- Codage wiki -->
 <span style="font-weight:bold; color:red;">{|</span>class="wikitable centre"
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> cellule
 <span style="font-weight:bold;color:red;">|}</span>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <tr>
     <td>cellule</td>
   </tr>
 </table>
</syntaxhighlight >
|}

=== Cellules ===

Les cellules qui forment une même rangée de tableau peuvent être disposées verticalement, ou horizontalement, dans le code wiki :

 | Cellule1
 | Cellule2
 | Cellule3

À l’horizontale, il faut mettre deux barres verticales entre les cellules placées sur la même ligne de code :

 | Cellule1 || Cellule2 || Cellule3

{|style="width: 100%; border: 1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Code wiki
!scope="col"| Code [[HTML]]
|-<!-- Exemple 1 -->
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |-
 | Gauche
 | Droite
 |}
|<!-- Code wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <nowiki>|</nowiki>-
 <span style="font-weight:bold;color:red;"><nowiki>|</nowiki></span> Gauche
 <span style="font-weight:bold;color:red;"><nowiki>|</nowiki></span> Droite
 <nowiki>|}</nowiki>
|<!-- Code HTML -->
<syntaxhighlight lang=html5 style="margin: 1em 2px;">
 <table class="wikitable centre">
   <tr>
     <td>Gauche</td>
     <td>Droite</td>
   </tr>
 </table>
</syntaxhighlight>
|-<!-- Exemple 2 -->
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |-
 | Gauche || Droite
 |}
|<!-- Code wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <nowiki>|</nowiki>-
 <span style="font-weight:bold;color:red;"><nowiki>|</nowiki></span> Gauche <span style="font-weight:bold;color:red;"><nowiki>||</nowiki></span> Droite
 <nowiki>|}</nowiki>
|<!-- Code HTML -->
<syntaxhighlight lang=html5 style="margin: 1em 2px;">
 <table class="wikitable centre">
   <tr>
     <td>Gauche</td>
     <td>Droite</td>
   </tr>
 </table>
</syntaxhighlight>
|}

==== Attributs de cellules ====

Chacune des cellules d’un tableau peut comporter des attributs, séparés du contenu par une autre barre verticale :

 |<span style="font-weight:bold;color:red;">''attributs''|</span> Cellule1
 |<span style="font-weight:bold;color:red;">''attributs''|</span> Cellule2

Ou encore horizontalement :

 |<span style="font-weight:bold;color:red;">''attributs''|</span> Cellule1 ||<span style="font-weight:bold;color:red;">''attributs''|</span> Cellule2

==== Cellules sans contenu ====

Des cellules peuvent aussi n’avoir aucun contenu visible :

 <nowiki>|Cellule1||||||Cellule4||Cellule5</nowiki>

Comme ces cellules sans contenu visible peuvent éventuellement comporter elles-mêmes des attributs, il est hautement conseillé (pour la lisibilité du code et pour faciliter les modifications) de toujours placer au moins une espace avant les deux barres verticales séparant deux cellules (les espaces non significatifs en tête ou fin de cellule seront automatiquement supprimés), afin de clairement identifier les séparateurs de cellules et les séparateurs entre les attributs et le contenu d’une cellule (même s’il est vide) :

 <nowiki>|Cellule1 || || ||Cellule4 ||Cellule5</nowiki>

En effet le code wiki suivant :

 <nowiki>|Cellule1|||||Cellule4|||Cellule5|</nowiki>

n’affichera pas le contenu des cellules 4 et 5 dans les colonnes attendues, le code sera interprété de façon incorrecte comme s’il était :

 <span style="font-weight:bold"><nowiki>|</nowiki></span> <span style="color:#999999">Cellule1</span> <span style="font-weight:bold"><nowiki>||</nowiki></span> <span style="color:#999999"><nowiki>&lt;!-- sans contenu --&gt;</nowiki></span> <span style="font-weight:bold">||</span><span style="font-weight:bold;color:#FF0000;">&lt;!-- sans attribut --&gt;|</span> <span style="color:#999999">Cellule4</span> <span style="font-weight:bold">||</span><span style="font-weight:bold;color:#FF0000;">&lt;!-- sans attribut --&gt;|</span><span style="color:#999999">Cellule5<nowiki>|</nowiki></span>

avec la {{2e}} colonne vierge, la {{3e}} colonne sans attribut affichant « Cellule4 », et la {{4e}} colonne affichant « Cellule5<nowiki>|</nowiki> » : dans toute suite de barres verticales d’une ligne commençant par <span style="font-weight:bold"><nowiki>|</nowiki></span>, cette première barre est d’abord interprétée comme un préfixe de cellule, puis tout groupe de deux barres successives sera interprété comme un séparateur entre deux cellules ; puis chacune des cellules ainsi isolées est coupée sur la première barre verticale (non placée après une accolade encore ouverte).

=== Rangée de cellules ===

Pour indiquer une nouvelle rangée de cellules, insérer (sur une ligne séparée placée avant les cellules de cette rangée) :

 <nowiki>|</nowiki>-
====Appliquer un style (attribut) à une rangée====
Il est possible d’ajouter des attributs (styles) qui s’appliquent à toute la rangée de cellules placées après cette ligne :

 <nowiki>|</nowiki>-''attributs''

Les attributs peuvent être des "styles" : une couleur (de fond, de bordure), une largeur (width), une hauteur (height), etc.<br/><br/>
'''Exemple:''' 
On donne pour attribut à la rangée (rangée texte1/texte2/texte3): <code><nowiki>style="height:60px; background-color:#FFEFE5;"</nowiki></code> une hauteur (60 pixels) et une couleur (rose).<br/><br/>
Les styles séparés étaient: hauteur: <code><nowiki>style="height:60px;"</nowiki></code> et <code><nowiki>couleur: style="background-color:#FFEFE5;"</nowiki></code>

{|style="width:100%;  border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Wikicode
|-
|
{| class="wikitable centre"
|-
|titre A
|titre B
|titre C
|- style="height:60px; background-color:#FFEFE5;"
| style="text-align:left;"  | texte1
| style="text-align:right;" | texte2
| style="text-align:center;" | texte3
|}
|
<pre>
{| class="wikitable centre"
|-
|titre A
|titre B
|titre C
|- style="height:60px; background-color:#FFEFE5;"
| style="text-align:left;"  | texte1
| style="text-align:right;" | texte2
| style="text-align:center;" | texte3
|}
</pre>
|}

====première rangée et style (attribut)====
Si la première rangée de la table n’a besoin d’aucun de ces styles ou attributs, on peut se passer de la ligne indicatrice de nouvelle rangée et placer les cellules de cette rangée juste après la ligne d’ouverture de la table :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
 {| class="wikitable centre"
 | Cellule 1.1
 | Cellule 1.2 || Cellule 1.3
 |-
 | Cellule 2.1 || Cellule 2.2
 | Cellule 2.3
 |}
|<!-- Codage wiki -->
<pre>
 {| class="wikitable centre"
 | Cellule 1.1
 | Cellule 1.2 || Cellule 1.3
 |-
 | Cellule 2.1 || Cellule 2.2
 | Cellule 2.3
 |}
</pre>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <tr>
     <td>Cellule 1.1</td>
     <td>Cellule 1.2</td><td>Cellule 1.3</td>
   </tr>
   <tr>
     <td>Cellule 2.1</td><td>Cellule 2.2</td>
     <td>Cellule 2.3</td>
   </tr>
 </table>
</syntaxhighlight>
|}

Un indicateur de nouvelle rangée sera ignoré (avec ses attributs) s’il n’est pas suivi de cellules avant l’indicateur suivant de rangée ou avant la fin de la table.

Le nombre de traits d’union dans l’indicateur de rangée n’est pas limité, on peut en ajouter pour rendre le code wiki plus lisible :

 <nowiki>|</nowiki>-----------------------------------------------------

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |----style="background: #FFFF00"
 | Haut
 |----
 | Bas
 |}
|<!-- Codage wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <span style="font-weight:bold;color:red;"><nowiki>|</nowiki>----style="background: #FFFF00"</span>
 <nowiki>|</nowiki> Haut
 <span style="font-weight:bold;color:red;"><nowiki>|</nowiki>----</span>
 <nowiki>|</nowiki> Bas
 <nowiki>|}</nowiki>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <tr style="background: #FFFF00">
     <td>Haut</td>
   </tr>
   <tr>
     <td>Bas</td>
   </tr>
 </table>
</syntaxhighlight>
|}

=== En-têtes de rangées et de colonnes ===

En HTML, les cellules d’en-tête se marquent avec l’élément <code>th</code> au lieu de <code>td</code>. Visuellement, le texte de ces cellules est généralement en gras et centré. Dans la classe <code>wikitable</code>, tous ces en-têtes prennent une couleur de fond différente, et seuls les en-têtes de colonnes sont centrés, les en-têtes de ligne restent alignés à gauche par défaut.

Les en-têtes permettent aux [[Lecteur d'écran|lecteurs d’écran]] utilisés par les internautes malvoyants de restituer la structure logique d’un tableau : les informations données par les cellules d’en-tête pourront être rappelées par le logiciel lorsque l’utilisateur se déplace dans le reste du tableau, afin qu’il puisse comprendre la signification des différentes données. Mais pour cela, il est '''indispensable''' que leur attribut <code>scope</code> soit présent : seul celui-ci permet au lecteur de différencier un en-tête de ligne (<code>scope="row"</code>) et un en-tête de colonne (<code>scope="col"</code>).

Pour créer des en-têtes en syntaxe wiki, on utilise le point d’exclamation à la place de la barre verticale :

 <span style="font-weight:bold;color:red;">!</span> ''Titre1''
 <span style="font-weight:bold;color:red;">!</span> ''Titre2''
 <span style="font-weight:bold;color:red;">!</span> ''Titre3''

Ou, à l’horizontale :

 <span style="font-weight:bold;color:red;">!</span> ''Titre2'' <span style="font-weight:bold;color:red;">!!</span> ''Titre3''

Avec des attributs (attention : le séparateur entre attributs et contenu d’une cellule reste la barre verticale) :

 <span style="font-weight:bold;color:red;">!scope="col" ''attributs''|</span> ''Titre1''
 <span style="font-weight:bold;color:red;">!scope="col" ''attributs''|</span> ''Titre2''
 <span style="font-weight:bold;color:red;">!scope="col" ''attributs''|</span> ''Titre3''

Exemple: 
{| class="wikitable"
! scope=col |texte affiché
!! scope=col |wikicode
|-
|width=50%|
{| class="wikitable" style="background-color:#FFF9E5;"

|-
! scope=col style="background-color:#FFECB2;"| Titre1
! scope=col style="background-color:#FFECB2;"| Titre2
|-
|  contenu 1a
|  contenu 2a
|-
|contenu 1b
| contenu 2b
|-
|}
|
<pre style="white-space:pre-wrap;">
{| class="wikitable" style="background-color:#FFF9E5;"

|-
! scope=col style="background-color:#FFECB2;"| Titre1
! scope=col style="background-color:#FFECB2;"| Titre2
|-
|  contenu 1a
|  contenu 2a
|-
| contenu 1b
| contenu 2b
|-
|}</pre>
|}

Ou à l’horizontale :

 <span style="font-weight:bold;color:red;">!scope="col" ''attributs''|</span> ''Titre1'' <span style="font-weight:bold;color:red;">!!scope="col" ''attributs''|</span> ''Titre2'' <span style="font-weight:bold;color:red;">!!scope="col" ''attributs''|</span> ''Titre3''

Si la première rangée doit être interprétée comme une rangée d’en-tête :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |-
 !scope="col"| Titre 1
 !scope="col"| Titre 2
 |-
 | Cellule 1
 | Cellule 2
 |}
|<!-- Codage wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <nowiki>|</nowiki>-
 <span style="font-weight:bold;color:red;"><nowiki>!</nowiki>scope="col"<nowiki>|</nowiki></span> Titre 1
 <span style="font-weight:bold;color:red;"><nowiki>!</nowiki>scope="col"<nowiki>|</nowiki></span> Titre 2
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> Cellule 1 <nowiki>||</nowiki> Cellule 2
 <nowiki>|}</nowiki>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <tr>
     <th scope="col">Titre 1</th>
     <th scope="col">Titre 2</th>
   </tr>
   <tr>
     <td>Cellule 1</td>
     <td>Cellule 2</td>
   </tr>
 </table>
</syntaxhighlight>
|}

Attention, pour faire des en-têtes de rangées, il n’est pas possible d’utiliser la seule forme horizontale du code wiki. Sinon, le style d’en-tête se propage sur toutes les cellules mentionnées dans la même ligne (HTML ne souffre évidemment pas de ce défaut) :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |-
 !scope="row"| Titre ligne || Cellule 1
 |}
|<!-- Codage wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <nowiki>|</nowiki>-
 <span style="font-weight:bold;color:red;">!scope="row"|</span> Titre ligne <span style="font-weight:bold;color:red;">||</span> Cellule 1
 <nowiki>|}</nowiki>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <tr>
     <th scope="row">Titre ligne</th><th>Cellule 1</th>
   </tr>
 </table>
</syntaxhighlight>
|-
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |-
 !scope="row"| Titre ligne
 | Cellule 1
 |}
|<!-- Codage wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <nowiki>|</nowiki>-
 <span style="font-weight:bold;color:red;"><nowiki>!</nowiki>scope="row"<nowiki>|</nowiki></span> Titre ligne
 <span style="font-weight:bold;color:red;"><nowiki>|</nowiki></span> Cellule 1
 <nowiki>|}</nowiki>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
  <tr>
    <th scope="row">Titre ligne</th><td>Cellule 1</td>
  </tr>
 </table>
</syntaxhighlight>
|}

Dans le cas de tableaux complexes comportant des en-têtes qui ne s’appliquent pas à la totalité d’une rangée ou d’une colonne, l’attribut <code>scope=</code> doit être remplacé par la combinaison des attributs <code>id=""</code> (dans les cellules d’en-tête) et <code>headers=""</code> (dans les cellules de données). Voir à ce sujet l’[[Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux complexes|atelier accessibilité]].

Les utilisateurs enregistrés peuvent activer dans leurs [[Special:Preferences|préférences]] un [[Aide:Gadgets|gadget]] ''Accessibilité'' qui affiche notamment un outil permettant de vérifier rapidement la syntaxe des attributs <code>scope</code>, <code>id</code> et <code>headers</code> d’un tableau.

=== Titre ===

Le titre du tableau, délimité par les balises HTML <code>&lt;caption&gt;...&lt;/caption&gt;</code> placé au début du tableau (avant la première rangée de cellules), est défini par le code wiki suivant :

 |+ Titre de tableau

Avec des attributs :

 |+''attributs''| Titre de tableau

Si plusieurs titres sont indiqués, seul le premier est pris en compte.

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |+ Titre
 |-
 !scope="col"| Colonne 1
 !scope="col"| Colonne 2
 |}
|<!-- Codage wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <span style="font-weight:bold;color:red;">|+</span> Titre
 <nowiki>|</nowiki>-
 <nowiki>!</nowiki>scope="col"<nowiki>|</nowiki> Colonne 1
 <nowiki>!</nowiki>scope="col"<nowiki>|</nowiki> Colonne 2
 <nowiki>|}</nowiki>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <caption>Titre</caption>
   <tr>
     <th scope="col">Colonne 1</th>
     <th scope="col">Colonne 2</th>
   </tr>
 </table>
</syntaxhighlight>
|}

=== Cellules fusionnées ===

Les attributs <code>colspan=""</code> et <code>rowspan=""</code> permettent de fusionner plusieurs cellules d’une même rangée ou d’une même colonne respectivement.

 |colspan="2"| Fusion de deux cellules d’une même rangée

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |-
 | Cellule 1 || Cellule 2 || Cellule 3
 |-
 | Simple ||colspan="2"| Fusionnée
 |}
|<!-- Codage wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> Cellule 1 <nowiki>||</nowiki> Cellule 2 <nowiki>||</nowiki> Cellule 3
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> Simple <nowiki>||</nowiki><span style="font-weight:bold;color:red;">colspan="2"</span><nowiki>|</nowiki> Fusionnée
 <nowiki>|}</nowiki>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <tr>
     <td>Cellule 1</td><td>Cellule 2</td><td>Cellule 3</td>
   </tr>
   <tr>
     <td>Simple</td><td colspan="2">Fusionnée</td>
   </tr>
 </table>
</syntaxhighlight>
|}

 |rowspan="3"| Fusion de trois cellules d’une même colonne

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
!scope="col"| Résultat affiché
!scope="col"| Codage wiki
!scope="col"| Codage HTML
|-
|<!-- Résultat affiché -->
 {|class="wikitable centre"
 |-
 !scope="col"| Cellules simples !!scope="col"| Colonne
 |-
 | Gauche 1 ||rowspan="3"| Droite
 |-
 | Gauche 2
 |-
 | Gauche 3
 |}
|<!-- Codage wiki -->
 <nowiki>{|</nowiki> class="wikitable centre"
 <nowiki>|</nowiki>-
 <nowiki>!</nowiki>scope="col"<nowiki>|</nowiki> Cellules simples <nowiki>!!</nowiki>scope="col"<nowiki>|</nowiki> Colonne
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> Gauche 1 <nowiki>||</nowiki><span style="font-weight:bold;color:red">rowspan="3"</span><nowiki>|</nowiki> Droite
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> Gauche 2
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> Gauche 3
 <nowiki>|}</nowiki>
|<!-- Codage HTML -->
<syntaxhighlight lang=html5 style="margin:1em 2px;">
 <table class="wikitable centre">
   <tr>
     <th>Cellules simples</th><th>Colonne</th>
   </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>
</syntaxhighlight>
|}

Le nombre de cellules fusionnées n’est pas limité. On peut combiner ces deux attributs.

=== Tableaux triables ===

Les tableaux peuvent être triés en utilisant la classe ''sortable'' depuis [[MediaWiki|MediaWiki 1.9]]. Les tableaux triables s’identifient grâce aux flèches de tri des en-têtes. Le code [[JavaScript]] [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/wikibits.js?view=log wikibits.js] qui permet le tri est copié sur les serveurs de Wikipédia. Une aide supplémentaire, en anglais, se trouve dans [[:en:Help:Sorting]].

* Noter que ce code supporte les dates dans l’ordre français (jj/mm/aaaa) avec différents séparateurs, mais ne reconnaît pas les abréviations françaises de mois (seules les abréviations en [[anglais]] sur 3 lettres sans accent mais avec une casse quelconque sont reconnues), et uniquement les dates dans un format sur 10 caractères (y compris les séparateurs) : les autres dates seront triées comme du texte. Le modèle {{M|tri date}} permet de trier efficacement les dates dans un tableau triable.
* De même les nombres sont reconnus dans le format anglais (le point et non la virgule comme séparateurs décimal, les espaces et virgules sont ignorés, mais les signes plus et moins sont reconnus, de même que la notation exponentielle avec le caractère « e » ou « E » pour la multiplication par une puissance entière de 10).

{|class="wikitable sortable"
|-
! Nombre !! Alphabet !! Dates !! Monnaie !!class="unsortable"| Non triable
|-
| 1 || Z || 02-02-2004 || 5.00 || Cette
|-
| 2 || y || 13-apr-2005 || || colonne
|-
| 3 || X || 17.aug.2006 || 6.50 || n’est
|-
| 4 || w || 01.Jan.2005 || 4.20 || pas
|-
| 5 || V || 05/12/2006 || 7.15 || triable.
|-class="sortbottom"
! Total : 15 !! !! !! Total : 29.55 !!
|}

Il est possible de créer des colonnes non triables en spécifiant l’attribut de colonne <code>class="unsortable"</code>, et d’exclure des rangées complètes en bas de tableau avec l’attribut de rangée <code>class="sortbottom"</code> :

 <nowiki>{|</nowiki>class="wikitable <strong style="color:red">sortable</strong>"
 <nowiki>|</nowiki>-
 <nowiki>!</nowiki> Nombre !! Alphabet !! Dates !! Monnaie !!<strong style="color:red">class="unsortable"|</strong> Non triable
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> 1 || Z || 02-02-2004 || 5.00 || Cette
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> 2 || y || 13-apr-2005 || || colonne
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> 3 || X || 17.aug.2006 || 6.50 || n’est
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> 4 || w || 01.Jan.2005 || 4.20 || pas
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki> 5 || V || 05/12/2006 || 7.15 || triable.
 <nowiki>|</nowiki>-<strong style="color:red">class="sortbottom"</strong>
 <nowiki>!</nowiki> Total : 15 !! !! !! Total : 29.55 !!
 <nowiki>|}</nowiki>

Le tri peut être faussé par des caractères accentués, des formats de nombres ou de dates (la fonctionnalité de tri ne reconnaît correctement que les nombres et dates aux formats anglais). Deux modèles permettent de donner des clés de tri aux valeurs affichées :
* le modèle {{m|smn}} pour les colonnes de nombres,
* le modèle {{m|tri1}} pour les chaînes de caractères (voir la section suivante).

Les tables ayant des cellules s’étendant sur plusieurs rangées (rowspan) ou colonnes (colspan) ou ayant des cellules manquantes en fin de ligne peuvent ne pas se trier correctement (la fonctionnalité de tri ne reconnait pas explicitement les groupes de rangées ou de colonnes induits par la présence de cellules fusionnées).

==== Tri correct des lettres accentuées ====

Pour faire trier correctement les lignes d’un tableau comprenant des lettres accentuées, on peut utiliser le modèle {{m|tri}} (ou son alias anglais {{m|sort}}):

'''Syntaxe :'''
: <code><nowiki>{{tri|</nowiki>''clé de tri''|''texte affiché''<nowiki>}}</nowiki></code>
: <code><nowiki>{{tri|</nowiki>''clé de tri''<nowiki>}}''texte affiché''</nowiki></code>
Par exemple :
: <code><nowiki>{{tri|Elephant|[[Éléphant]]}}</nowiki></code>

{|class="wikitable sortable"
|+ Exemple d’un tableau complet
|-
! [[Animal]]
!class="unsortable"| Codage wiki
!class="unsortable"| Statut de tri
|-
| [[Alpaga]]
| <code><nowiki>[[Alpaga]]</nowiki></code>
| OK
|-
| {{tri|Ane}}[[Âne]] {{n°|1}}
| <code><nowiki>{{tri|Ane|[[Âne]]}} {{n°|1}}</nowiki></code>
| Bien trié
|-
| [[Buffle]]
| <code><nowiki>[[Buffle]]</nowiki></code>
| OK
|-
| {{tri|Elephant|[[Éléphant]]}} {{n°|1}}
| <code><nowiki>{{tri|Elephant|[[Éléphant]]}} {{n°|1}}</nowiki></code>
| Bien trié
|-
| {{tri|Zebre|[[Zèbre]]}}
| <code><nowiki>{{tri|Zebre|[[Zèbre]]}}</nowiki></code>
| Bien trié
|-
| [[Âne]] {{n°|2}}
| <code><nowiki>[[Âne]] {{n°|2}}</nowiki></code>
| Mal trié
|-
| [[Éléphant]] {{n°|2}}
| <code><nowiki>[[Éléphant]] {{n°|2}}</nowiki></code>
| Mal trié
|}

== Les attributs de présentation ==

=== wikitable ===

'''class="wikitable"''' : Permet d'appliquer 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.

'''class="wikitable centre"''' : Permet d'adapter le style « wikitable » au tableau et de le centrer.

=== border ===

'''border''' permet de spécifier la taille de la bordure du tableau, des lignes ou des cellules. La classe « wikitable » impose sa taille de bordure et ces deux attributs ne devraient pas être utilisés en même temps.

 style="border:''taille style couleur'';"

où 
* ''taille'' est l'épaisseur de la bordure (la taille 0 signifie « pas de bordure »),
* ''style'' est le type de bordure (solid pour une ligne pleine)
* ''couleur'' est un [[Couleurs du Web|nom ou un code de couleur]]


{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|
{|
|Sans bordure 1
|Sans bordure 2
|}
|
<pre>
{|
|Sans bordure 1
|Sans bordure 2
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table>
  <tr>
    <td>Sans bordure 1</td>
    <td>Sans bordure 2</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{| style="border:1px solid black;"
|style="border:1px solid blue;"|Bordure bleue
|style="border:1px solid red;"|Bordure rouge
|}
|
<pre>
{| style="border:1px solid black;"
|style="border:1px solid blue;"|Bordure bleue
|style="border:1px solid red;"|Bordure rouge
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table style="border:1px solid black;">
  <tr>
    <td style="border:1px solid blue;">Bordure bleue</td>
    <td style="border:1px solid red;">Bordure rouge</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{|style="border: 2px solid black;"
|Exemple : solid
|}
|
<pre>
{|style="border: 2px solid black;"
|Exemple : solid
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table style="border: 2px solid black;">
  <tr>
    <td>Exemple : solid</td>
  </tr>
</table>
</syntaxhighlight>

|-
|
{|style="border: 2px dotted black;"
|Exemple : dotted
|}
|
<pre>
{|style="border: 2px dotted black;"
|Exemple : dotted
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table style="border: 2px dotted black;">
  <tr>
    <td>Exemple : dotted</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{|style="border: 2px dashed black;"
|Exemple : dashed
|}
|
<pre>
{|style="border: 2px dashed black;"
|Exemple : dashed
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table style="border: 2px dashed black;">
  <tr>
    <td>Exemple : dashed</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{|style="border: 5px double grey;"
|Exemple : double
|}
|
<pre>
{|style="border: 5px double grey;"
|Exemple : double
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table style="border: 5px double grey;">
  <tr>
    <td>Exemple : double</td>
  </tr>
</table>
</syntaxhighlight>
|}

=== Alignements ===
==== Alignement horizontal du tableau ====
Pour positionner le tableau entier, il est conseillé d'utiliser la ''class'' correspondante :
 class="wikitable gauche"
 class="wikitable centre" 
 class="wikitable droite"

Un exemple de positionnement d'un tableau :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|
{| class="wikitable gauche"
|À gauche
|}
|
<pre>
{| class="wikitable gauche"
|À gauche
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable gauche">
  <tr>
    <td>À gauche</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{| class="wikitable centre"
|Au centre
|}
|
<pre>
{| class="wikitable centre"
|Au centre
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre">
  <tr>
    <td>Au centre</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{| class="wikitable droite"
|À droite
|}
|
<pre>
{| class="wikitable droite"
|À droite
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable droite">
  <tr>
    <td>À droite</td>
  </tr>
</table>
</syntaxhighlight>
|}

==== Alignement horizontal du texte ====
Pour aligner le texte dans une cellule du tableau il faut utiliser la propriété de style <code>text-align</code>
 style="text-align:left;"
 style="text-align:center;"
 style="text-align:right;"

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|
{| class="wikitable centre"
! scope=col | Positionnement
|-
| style="text-align:left;" | g
|-
| style="text-align:center;" | c
|-
| style="text-align:right;" | d
|}
|
<pre>
{| class="wikitable centre"
! scope=col | Positionnement
|-
| style="text-align:left;" | g
|-
| style="text-align:center;" | c
|-
| style="text-align:right;" | d
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre">
  <tr>
    <th scope=col>Positionnement</th>
  </tr>
  <tr>
    <td style="text-align:left;">g</td>
  </tr>
  <tr>
    <td style="text-align:center;">c</td>
  </tr>
  <tr>
    <td style="text-align:right;">r</td>
  </tr>
</table>
</syntaxhighlight>
|}

==== Alignement vertical du texte ====
Pour chacune des cellules, il est également possible de positionner le contenu verticalement avec la propriété de style <code>vertical-align</code>

Dans l'exemple qui suit, il y a une cellule (celle de gauche) avec une [[#width et height|taille]] de 150 pixels.

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|
{| class="wikitable centre"
! scope=row style="height:150px;" | Position
| style="vertical-align:top;" | Haut
| style="vertical-align:middle;" | Milieu
| style="vertical-align:bottom;" | Bas
|}
|
<pre>
{| class="wikitable centre"
! scope=row style="height:150px;" | Position
| style="vertical-align:top;" | Haut
| style="vertical-align:middle;" | Milieu
| style="vertical-align:bottom;" | Bas
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre">
  <tr>
    <th scope=row style="height:150px;">Position</th>
    <td style="vertical-align:top;">Haut</td>
    <td style="vertical-align:middle;">Milieu</td>
    <td style="vertical-align:bottom;">Bas</td>
  </tr>
</table>
</syntaxhighlight>
|}
====  Alignement horizontal et vertical du texte  ====
Les différents styles peuvent-être combinés pour placer le texte où l'on veux.

{|style="width:100%;  border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Wikicode
|-
|
{| class="wikitable centre"
!scope=col |titre A
!scope=col |titre B
!scope=col |titre C
!scope=col |titre D
!scope=col |titre E
!scope=col |titre F
|- style="width:60px; height:100px;"
| style="text-align:left; vertical-align:top;" | hg
| style="text-align:right; vertical-align:top;" | hd
| style="text-align:center; vertical-align:top;" | hc
| style="text-align:right; vertical-align:middle;" | md
| style="text-align:right; vertical-align:bottom;" | bd
| style="text-align:center;" | ctr
|}
|
<pre>
{| class="wikitable centre"
!scope=col |titre A
!scope=col |titre B
!scope=col |titre C
!scope=col |titre D
!scope=col |titre E
!scope=col |titre F
|- style="height:100px;"
| style="text-align:left; vertical-align:top;" | hg
| style="text-align:right; vertical-align:top;" | hd
| style="text-align:center; vertical-align:top;" | hc
| style="text-align:right; vertical-align:middle;" | md
| style="text-align:right; vertical-align:bottom;" | bd
| style="text-align:center" | ctr
|}
</pre>
|}

=== border-spacing, cellpadding et margin ===

La propriété de style '''border-spacing''' modifie l'espacement entre les cellules, ou entre une cellule et la bordure extérieure du tableau (l’attribut '''cellspacing''' a le même effet mais la valeur est systématiquement en pixels, et cet attribut n'est plus valide en [[HTML5]]) .

 style="border-spacing: ''n''px;"

 cellspacing="''n''"

Avec la propriété de style <code>border-spacing</code> :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="20%" | Résultat affiché
! scope=col width="40%" | Codage wiki
! scope=col width="40%" | Codage HTML
|-
|
{| style="border:1px solid grey; border-spacing:5px"
|style="border:1px solid grey;" | Cellule 1
|style="border:1px solid grey;" |Cellule 2
|-
|style="border:1px solid grey;" |Cellule 3
|style="border:1px solid grey;" |Cellule 4
|}
|
<pre>
{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|
{| style="border:1px solid grey; border-spacing:5px"
|style="border:1px solid grey;" | Cellule 1
|style="border:1px solid grey;" |Cellule 2
|-
|style="border:1px solid grey;" |Cellule 3
|style="border:1px solid grey;" |Cellule 4
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table style="border:1px solid grey; border-spacing:5px">
  <tr>
    <td style="border:1px solid grey;">Cellule 1</td>
    <td style="border:1px solid grey;">Cellule 2</td>
  </tr>
  <tr>
    <td style="border:1px solid grey;">Cellule 3</td>
    <td style="border:1px solid grey;">Cellule 4</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{| class="wikitable" style="border-collapse:separate; border-spacing:1.5em;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
|
<pre style="white-space:pre-wrap;">
{| class="wikitable" style="border-collapse:separate; border-spacing:1.5em"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
</pre>
|
<syntaxhighlight lang=html5 enclose=div style="margin:1em 2px; white-space:pre-wrap;">
<table class="wikitable" style="border-collapse:separate; border-spacing:1.5em">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
</table>
</syntaxhighlight>
|}

L’attribut '''cellpadding''' modifie l'espacement (en pixels uniquement) entre la bordure extérieure d'une cellule et son contenu (cet espacement supplémentaire n’est pas compté dans la largeur ou la hauteur de la cellule indiquées par les attributs '''width''' ou '''height''' ou les propriétés de style CSS équivalentes, ni dans les marges du contenu). On ne peut pas le modifier autrement par une propriété de style applicable à tout le tableau, mais on peut le modifier cellule par cellule avec la propriété de style CSS <code>style="padding: ''n''px;"</code>) :

 cellpadding="''n''"

Avec l'attribut <code>cellpadding</code> :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Codage wiki
! scope=col 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>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<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>
</syntaxhighlight>
|-
|
{| 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>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<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>
</syntaxhighlight>
|}

Il existe également la propriété de style CSS <code>style="margin:"</code> qui modifie l'espacement entre le bord du tableau et le bloc contenant le tableau (ce style n’a pas d’effet sur le contenu des cellules) :

 style="margin: ''n''px;"

Avec l'attribut <code>margin</code> (seulement utilisable avec <code>style=</code>, voir quelques sections plus loin) :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%" | Résultat affiché
! scope=col width="33%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|blabla
{| class="wikitable" style="margin: 0px;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
blabla
|
<pre>
blabla
{| class="wikitable" style="margin: 0px;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
blabla
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
blabla
<table class="wikitable" style="margin: 0px;">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
</table>
blabla
</syntaxhighlight>
|-
|blabla
{| class="wikitable" style="margin: 2em;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
blabla
|
<pre>
blabla
{| class="wikitable" style="margin: 2em;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
blabla
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
blabla
<table class="wikitable" style="margin: 2em;">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
</table>
blabla
</syntaxhighlight>
|}

Il est possible de définir des valeurs différentes pour chaque coté : 
* avec deux valeurs la première s'applique en haut et bas, la seconde à droite et à gauche ; 
* avec quatre valeurs ce sont dans l'ordre les marges haut, droit, bas, gauche ;
* en spécifiant le coté on peut ne définir que la valeur nécessaire
 style="margin: ''hb''px ''dg''px;"
 style="margin: ''h''px ''d''px ''b''px ''g''px;"
 style="margin-left: ''g''px;"

=== width et height ===

Les propriétés de style '''width''' et '''height''' spécifient la largeur et la hauteur, aussi bien du tableau que des cellules. La taille peut se préciser en [[pixels]] (px), [[hauteur d'x]] (ex) [[cadratin]] (em), 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 ; la valeur 100 pixels est plus grande 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 10 cadratins.

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%;" | Résultat affiché
! scope=col width="33%;" | Codage wiki
|-
|
{| class="wikitable" style="width:10px;"
|Cellule
|}
|
<pre>
{| class="wikitable" style="width:10px;"
|Cellule
|}
|-
|
{| class="wikitable" style="width:100px;"
|Cellule
|}
|
<pre>
{| class="wikitable" style="width:100px;"
|Cellule
|}
|-
|
{| class="wikitable" style="width:10em;"
|Cellule
|}
|
<pre>
{| class="wikitable" style="width:10em;"
|Cellule
|}
|}

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 cas, le tableau doit occuper 100 % de l'espace disponible.

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%;" | Résultat affiché
! scope=col width="33%;" | Codage wiki
! scope=col width="33%;" | Codage HTML
|-
|
{| class="wikitable centre" style="width:33%;"
|Cellule
|}
|
<pre>
{| class="wikitable centre" style="width:33%;"
|Cellule
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre" style="width:33%;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{| class="wikitable centre" style="width:100%;"
|Cellule
|}
|
<pre>
{| class="wikitable centre" style="width:100%;"
|Cellule
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre" style="width:100%;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
</syntaxhighlight>
|}

Pour la propriété <code>height</code>, l'utilisation est la même que pour <code>width</code>, mais cette fois-ci la hauteur du tableau change. Ces deux propriétés peuvent également être utilisés pour chacune des cellules :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="33%;" | Résultat affiché
! scope=col width="33%;" | Codage wiki
! scope=col width="33%;" | Codage HTML
|-
|
{| class="wikitable centre" style="width:100%;"
| colspan="3" style="height:2em;" | Tableau 1
|-
| style="width:33%;" | 1/3 cellule 1
| style="width:33%;" | 1/3 cellule 2
| style="width:33%;" | 1/3 cellule 3
|}
|
<pre>
{| class="wikitable centre" style="width:100%;"
| colspan="3" style="height:2em;" | Tableau 1
|-
| style="width:33%;" | 1/3 cellule 1
| style="width:33%;" | 1/3 cellule 2
| style="width:33%;" | 1/3 cellule 3
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre" style="width:100%;">
  <tr>
    <td colspan="3" style="height:2em;">Tableau 1</td>
  </tr>
  <tr>
    <td style="width:33%;">1/3 cellule 1</td>
    <td style="width:33%;">1/3 cellule 2</td>
    <td style="width:33%;">1/3 cellule 3</td>
  </tr>
</table>
</syntaxhighlight>
|-
|
{| class="wikitable centre" style="width:100%;"
| colspan="3" | Tableau 2
|-
| style="width:50%; height:2em;" | 1/2
| style="width:25%;" | 1/4
| style="width:25%;" | 1/4
|}
|
<pre>
{| class="wikitable centre" style="width:100%;"
| colspan="3" | Tableau 2
|-
| style="width:50%; height:2em;" | 1/2
| style="width:25%;" | 1/4
| style="width:25%;" | 1/4
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre" style="width:100%;">
  <tr>
    <td colspan="3">Tableau 2</td>
  </tr>
  <tr>
    <td style="width:50%; height:2em;">1/2</td>
    <td style="width:25%;">1/4</td>
    <td style="width:25%;">1/4</td>
  </tr>
</table>
</syntaxhighlight>
|}

=== bgcolor et ligne grise ===

* ''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 [[Aide:Couleurs|code couleur en hexadécimal]].

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="20%" | Résultat affiché
! scope=col width="46%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|
{| class="wikitable centre"
| bgcolor="#FF0000" | Rouge
| bgcolor="#00FF00" | Vert
| bgcolor="#0000FF" | Bleu
|}
|
<pre>
{| class="wikitable centre"
| bgcolor="#FF0000" | Rouge
| bgcolor="#00FF00" | Vert
| bgcolor="#0000FF" | Bleu
|}
</pre>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre">
  <tr>
    <td bgcolor="#FF0000">Rouge</td>
    <td bgcolor="#00FF00">Vert</td>
    <td bgcolor="#0000FF">Bleu</td>
  </tr>
</table>
</syntaxhighlight>
|}

* Dans un tableau utilisant la classe « wikitable », utiliser l'attribut ''style'' pour modifier la couleur de fond des en-têtes de colonnes et de lignes :

 style="background: #''hex'';"

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="20%" | Résultat affiché
! scope=col width="46%" | Codage wiki
! scope=col width="33%" | Codage HTML
|-
|
{| class="wikitable centre"
! scope=col | Titre 1
! scope=col style="background: #00FF00;" | Titre 2 vert
|-
|Cellule 1
|Cellule 2
|}
|
<code><nowiki>{|</nowiki> class="wikitable centre"<br/>
<nowiki>!</nowiki> scope=col | Titre 1<br/>
<nowiki>!</nowiki> scope=col <span style="font-weight: bold; color: red;">style="background: #00FF00;"</span> | Titre 2 vert<br/>
<nowiki>|-</nowiki><br/>
<nowiki>|</nowiki>Cellule 1<br/>
<nowiki>|</nowiki>Cellule 2<br/>
<nowiki>|}</nowiki></code>
|
<syntaxhighlight lang=html5 style="margin:1em 2px;">
<table class="wikitable centre">
 <tr>
   <th scope=col>Titre 1</th>
   <th scope=col style="background: #00FF00;">Titre 2 vert</th>
 </tr>
 <tr>
   <td>Cellule 1</td>
   <td>Cellule 2</td>
 </tr>
</table>
</syntaxhighlight>
|}

* Le style « alternance » permet d'alterner les couleurs de ligne pour faciliter leur lecture :

 <nowiki>{| class="wikitable sortable alternance"</nowiki>

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="30%" | Résultat affiché
! scope=col width="70%" | Codage wiki
|-
|
{|class="wikitable sortable alternance" 
!Pays
!Capitale
|-
|France || Paris
|-
|Allemagne || Berlin
|-
|République galactique|| Coruscant
|-
|Empire romain || Rome
|}
|
<pre><nowiki>{|class="wikitable sortable alternance" 
!Pays
!Capitale
|-
|France || Paris
|-
|Allemagne || Berlin
|-
|République galactique|| Coruscant
|-
|Empire romain || Rome
|}</nowiki></pre>
|}

=== style ===

Le <code>style</code> permet de changer tout l'aspect graphique, tant dans le tableau que pour une cellule. Changeons la couleur de fond du tableau :

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="17%" | Résultat affiché
! scope=col width="46%" | Codage wiki
! scope=col width="36%" | Codage HTML
|-
|
{| class="wikitable centre" style="background-color: #CCFFCC"
| Cellule 1
|-
| Cellule 2
|-
| Cellule 3
|}
|
<pre style="white-space:pre-wrap;">
{| class="wikitable centre" style="background-color: #CCFFCC"
| Cellule 1
|-
| Cellule 2
|-
| Cellule 3
|}
</pre>
|
<syntaxhighlight lang=html5 enclose="div" style="margin:1em 2px;">
<table class="wikitable centre" style="background-color: #CCFFCC">
  <tr>
    <td>Cellule 1</td>
  </tr>
  <tr>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
  </tr>
</table>
</syntaxhighlight>
|}

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 didacticiel sur les [[Feuilles de style en cascade|CSS]].

Autre exemple : les coins arrondis.

{|style="width:100%; border:1px solid #AAAAAA;"
|- style="background-color:#E0E0FF;"
! scope=col width="17%" | Résultat affiché
! scope=col width="46%" | Codage wiki
! scope=col width="36%" | Codage HTML
|-
|
{| align=center style="border: solid 1px black; border-radius: 1em;"
| Cellule 1
|-
| Cellule 2
|-
| Cellule 3
|}
|
<pre style="white-space:pre-wrap;">
{| align=center style="border: solid 1px black; border-radius: 1em;"
| Cellule 1
|-
| Cellule 2
|-
| Cellule 3
|}
</pre>
|
<syntaxhighlight lang=html5 enclose="div" style="margin:1em 2px;">
<table align=center style="border: solid 1px black; border-radius: 1em;">
  <tr>
    <td>Cellule 1</td>
  </tr>
  <tr>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
  </tr>
</table>
</syntaxhighlight>
|}

== Quelques exemples ==
Quelques exemples de tableaux assez complexes :
* [[Résultats des ministres lors des élections législatives françaises de 2012#Tableau détaillé]]
* [[Résultats détaillés de l'élection présidentielle française de 2012#Résultats par pays_2]]

== Voir aussi ==
* [[Aide:Tableau]]

[[Catégorie:Aide:Syntaxe|Tableaux]]