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

== Syntaxe d'un tableau élémentaire ==

=== Amorcer un tableau ===
Un tableau s’ouvre avec le code : {{green|'''<code><nowiki>{|</nowiki></code>'''}}.

La plupart des tableaux utilisent la classe <code>wikitable</code>, s'écrivant : {{green|'''<code><nowiki>class="wikitable"</nowiki></code>'''}}. L'usage de la classe <code>wikitable</code> simplifie et harmonise la mise en forme des tableaux de données.

Par défaut, un tableau se positionne à gauche, mais peut être centré avec : {{green|'''<code><nowiki>class="wikitable center"</nowiki></code>'''}} (attention, avec {{en}}{{green|'''<code>center</code>'''}} le tableau prend toute la largeur de la page et ne peut donc pas admettre d'image à droite et/ou à gauche).

Pour améliorer la lisibilité des grands tableaux, une alternance de gris peut être appliquée avec : '''{{green|<code><nowiki>class="wikitable alternance"</nowiki></code>}}'''.

Un tableau se ferme avec le code : {{green|'''<code><nowiki>|}</nowiki></code>'''}}.

=== Insérer un titre ===
Le titre du tableau est défini par : {{green|'''<code><nowiki>|+</nowiki></code>'''}}.

Le titre du tableau se place en début de tableau, avant la première rangée de cellules. Si plusieurs titres sont indiqués, seul le premier est pris en compte.

=== Insérer une nouvelle ligne ===
Une nouvelle ligne est créée dans un tableau avec le code : {{green|'''<code><nowiki>|-</nowiki></code>'''}}.

Le nombre de tirets dans {{green|'''<code><nowiki>|-</nowiki></code>'''}} n'est pas limité, on peut en ajouter pour rendre le code wiki plus lisible ; par exemple : {{nobr|{{green|'''<code><nowiki>|------</nowiki></code>'''}}}}.

Le code {{green|'''<code><nowiki>|-</nowiki></code>'''}} est ignoré s’il n’est pas suivi de contenu suivi de nouvelles cellules.

=== Créer une cellule ===
Une nouvelle cellule (ou case) est créée dans un tableau avec le code : {{green|'''<code><nowiki>|</nowiki></code>'''}} (si le contenu des cellules est décrit verticalement) ; ou bien : {{green|'''<code><nowiki>||</nowiki></code>'''}} (si disposé horizontalement).

Il est possible de laisser des cellules vides. Dans la disposition à l'horizontale, il est alors important de toujours placer au moins une espace avant les deux barres verticales séparant deux cellules, afin de clairement identifier les cellules et attributs de cellules.

=== Créer une en-tête de colonne ou une en-tête de ligne ===
Un '''en-tête de colonne''' est créé par : {{green|'''<code><nowiki>! scope="col"</nowiki></code>'''}}.

L'en-tête de colonne se place sur la {{1re}} ligne (avant la première ligne de contenu), c'est-à-dire après le premier {{green|'''<code><nowiki>|-</nowiki></code>'''}}.

Un '''en-tête de ligne''' est créé par : {{green|'''<code><nowiki>! scope="row"</nowiki></code>'''}}.

L'en-tête de ligne se place au début de chaque ligne, c'est-à-dire après chaque {{green|'''<code><nowiki>|-</nowiki></code>'''}}.

Par défaut dans la classe <code>wikitable</code>, le texte des en-têtes est affiché en gras, tous les en-têtes prennent une couleur de fond différente, et les en-têtes de colonnes sont centrés tandis que les en-têtes de lignes sont alignés à gauche.

En syntaxe wiki, le point d’exclamation est utilisé à la place de la barre verticale pour définir des en-têtes.

=== Exemple récapitulatif ===

 {| class="wikitable alternance centre"
 |+ Titre
 |-
 |
 ! scope="col" | Titre col. A
 ! scope="col" | Titre col. B
 ! scope="col" | Titre col. C
 |-
 ! scope="row" | Titre ligne 1
 | Donnée 1A
 | Donnée 1B
 | Donnée 1C
 |-
 ! scope="row" | Titre ligne 2
 | Donnée 2A
 | Donnée 2B
 | Donnée 2C
 |-
 ! scope="row" | Titre ligne 3
 | Donnée 3A
 | Donnée 3B
 | Donnée 3C
 |}

<pre>
 {| class="wikitable alternance centre"
 |+ Titre
 |-
 |
 ! scope="col" | Titre col. A
 ! scope="col" | Titre col. B
 ! scope="col" | Titre col. C
 |-
 ! scope="row" | Titre ligne 1
 | Donnée 1A
 | Donnée 1B
 | Donnée 1C
 |-
 ! scope="row" | Titre ligne 2
 | Donnée 2A
 | Donnée 2B
 | Donnée 2C
 |-
 ! scope="row" | Titre ligne 3
 | Donnée 3A
 | Donnée 3B
 | Donnée 3C
 |}
</pre>


<center>ou</center>


<pre>
 {| class="wikitable alternance centre"
 |+ Titre
 |----
 ! !! scope="col" | Titre col. A !! scope="col" | Titre col. B !! scope="col" | Titre col. C
 |----
 ! scope="row" | Titre ligne 1
 | Donnée 1A || Donnée 1B || Donnée 1C
 |----
 ! scope="row" | Titre ligne 2
 | Donnée 2A || Donnée 2B || Donnée 2C
 |----
 ! scope="row" | Titre ligne 3
 | Donnée 3A || Donnée 3B || Donnée 3C
 |}
</pre>

== Syntaxe supplémentaire ==

{{Encart|accessibilite|Certaines fonctions ne sont pas compatibles avec les [[Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux|bonnes pratiques]] d'accessibilité. Pour savoir si un tableau ne comporte pas de défaut de cet ordre, [[Spécial:Préférences#mw-prefsection-gadgets|utilisez le gadget « Accessibilité »]]. Si du rouge apparaît, le code posera des problèmes à certains lecteurs de l'encyclopédie, notamment ceux qui utilisent un lecteur d'écran. ({{Lang|la|texte={{abrd|Cf|Confer}}}} [[Wikipédia:Atelier accessibilité/Aide gadget]]). }}

=== Largeur d'un élément du tableau ===
Pour définir la largeur d'un élément, on utilise la fonction '''<code><nowiki>width="x%"</nowiki></code>''' : en début de tableau '''<code><nowiki>{| width="100%"</nowiki></code>''', ou de cellule '''<code><nowiki>||width="50%"|</nowiki></code>'''.

La largeur est le plus souvent exprimée en pixels (utiliser alors <code>px</code> au lieu de <code>%</code>) ou en pourcentage. L'utilisation des pourcentages est recommandée car ceux-ci permettent au tableau de s'adapter à l'écran du lecteur.

<u>'''Exemple concret :'''</u>
<pre><nowiki>{| class="wikitable"
|+Tableau exemple
!scope=col|titre A
!scope=col|titre B
|-
|width="50%"|AAAAAAAAAAAAAAAAAAAAA
|BBB
|}
</nowiki></pre>

{| class="wikitable"
|+Tableau exemple
!scope=col|titre A
!scope=col|titre B
|-
|width="50%"|AAAAAAAAAAAAAAAAAAAAA
|BBB
|}

=== Alignement vertical du texte dans une cellule ===
Pour définir '''l'alignement vertical du texte''', on utilise la fonction {{green|'''<code><nowiki>valign="x"</nowiki></code>'''}} : tableau {{green|'''<code><nowiki>{| valign="top"</nowiki></code>'''}}, ligne {{green|'''<code><nowiki>|- valign="top"</nowiki></code>'''}}, case {{green|'''<code><nowiki>||valign="bottom"|</nowiki></code>'''}} . Les valeurs possibles sont {{green|<code>top</code>}} et {{green|<code>bottom</code>}}

=== Fusionner des cellules ===
Il est parfois nécessaire de fusionner des cellules.

Pour '''fusionner horizontalement x cellules''', on utilise la fonction {{green|'''<code><nowiki>colspan="x"</nowiki></code>'''}} (expansion de x colonnes) : {{green|'''<code><nowiki>||colspan="2"|</nowiki></code>'''}}. La première cellule à gauche doit être paramétrée, l'extension se fait vers la droite. Les cellules « mangées » '''ne''' doivent '''pas''' être présentes dans le code.

Pour '''fusionner verticalement x cellules''', on utilise la fonction {{green|'''<code><nowiki>rowspan="x"</nowiki></code>'''}} (expansion de x rangées) : {{green|'''<code><nowiki>||rowspan="2"|</nowiki></code>'''}}. La {{1re}} cellule du haut doit être paramétrée, l'extension se fait vers le bas. Les cases « mangées » '''ne''' doivent '''pas''' être présentes dans le code.

<u>'''Exemple concret :'''</u>

<pre>
{| class="wikitable"
|-
! Column 1 !! Column 2 !! Column 3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C <!-- colonne 1 occupée par la cellule  A -->
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" |F
|-
| G <!-- colonnes 2+3 occupées par la cellule  F -->
|-
| colspan="3" style="text-align: center;" | H
|}
</pre>
Ce qui donne:

{| class="wikitable"
|-
! Column 1 !! Column 2 !! Column 3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C <!-- colonne 1 occupée par la cellule  A -->
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" |F
|-
| G <!-- colonnes 2+3 occupées par la cellule  F -->
|-
| colspan="3" style="text-align: center;" | H
|}

=== Tableaux triables ===
{{encart|important|La fonction tri n'est pas toujours disponible, notamment avec la version mobile de Wikipédia.}}
Les tableaux peuvent être [[Algorithme de tri|triés]]. Les tableaux triables s'identifient grâce aux flèches de tri des en-têtes. Le tri est cependant à utiliser avec parcimonie dans les articles, allant à l'encontre de normes d'[[Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux|accessibilité]].

Un tableau devient triable lorsque celui commence par : '''{{green|<code><nowiki>{| class="wikitable sortable"</nowiki></code>}}'''. 

Une colonne devient fixe et non triable lorsqu'on lui spécifie : '''{{green|<code><nowiki>||class="unsortable"|</nowiki></code>}}'''. 

Une ligne devient fixe et non triable lorsqu'on lui spécifie : '''{{green|<code><nowiki>|- class="sortbottom"</nowiki></code>}}'''. 

Les tableaux ayant des cellules fusionnées sur plusieurs rangées (rowspan) ou colonnes (colspan) ou ayant des cellules manquantes en fin de ligne ne se trient pas correctement. Il est recommandé d'utiliser la fusion de colonnes ou de lignes uniquement dans des cellules non triées, avec donc le code <code>"unsortable"</code> ou <code>"sortbottom"</code>. Voir exemple ci-après.

=== Exemple bilan ===

Le tableau ci-après est un bilan, il utilise au moins une fois chaque fonction souvent nécessaire (<code>width</code>, <code>align</code>, <code>colspan</code>, <code>rowspan</code>, <code>sortable</code>, <code>style="text-align:center"</code>).

{{Encart|important|Certaines fonctions, et notamment les tableaux triables, sont incompatibles avec les lecteurs d'écran. Ces tableaux triables sont de plus inexploitables, voir illisibles sur de nombreux smartphones. }}


{|class="wikitable sortable centre" style="text-align:center; width:80%;"
|+ Benelux
! scope="col" width="25%" | Pays
! scope="col" | Rang
! scope="col" | Population
! scope="col" | Date du relevé
|-
| Pays-Bas || 1 || align="right" | {{formatnum:16500000}} || 2003
|-
| Belgique || 2 || align="right" | 10 millions || 2007
|-
| Luxembourg || 3 || align="right" | {{formatnum:0.5}} million   ||
|-class="sortbottom"
| '''Benelux''' || colspan="3" |  '''Total : 27 M'''
|}

<pre>
{|class="wikitable sortable centre" style="text-align:center; width:80%;"
|+ Benelux
! scope="col" width="25%" | Pays
! scope="col" | Rang
! scope="col" | Population
! scope="col" | Date du relevé
|-
| Pays-Bas || 1 || align="right" | {{formatnum:16500000}} || 2003
|-
| Belgique || 2 || align="right" | 10 millions || 2007
|-
| Luxembourg || 3 || align="right" | {{formatnum:0.5}} million   ||
|-class="sortbottom"
| '''Benelux''' || colspan="3" |  '''Total : 27 M'''
|}
</pre>

== Voir aussi ==
* [[Aide:Insérer un tableau (wikicode, expert)]] pour les explications détaillées de la syntaxe des tableaux en wikicode
* [[Wikipédia:Modèles/Tableaux]] : modèles pour faciliter la création de tableaux

{{Palette|Aide aux contributeurs débutants}}

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