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

Une page de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche
Wikicode
Cette page ne concerne que le wikicode.
Niveau expert
Un tableau est un outil servant à mettre en évidence des données chiffrées ou des listes. Son utilisation est basée sur le code wiki, sauf pour les modèles, qui nécessitent du code HTML, pour éviter une trop grande complexité et des conflits avec la syntaxe des fonctions parseurs et des autres modèles, spécialement ceux générant des tableaux avec parties facultatives.

Cette page d'aide présente les fonctions les plus fréquentes d'un tableau tant pour l'espace encyclopédique, que celui des projets et des portails ou des pages personnelles. Cette page présente ainsi : les bases de l'accessibilité, la construction de tableaux complexes (fusion de cellules : colspan="x" ; rowspan="x"), le paramétrage des éléments (attributs : scope="col" ; style="…").

Bonne pratique pour l'accessibilité (voir Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux). Pour savoir si un tableau ne comporte pas de défauts d'accessibilité, utilisez le gadget « Accessibilité ». Si du rouge apparaît, le code est à revoir ! (cf. Wikipédia:Atelier accessibilité/Aide gadget.)

Syntaxe des tableaux[modifier | modifier le code]

Ouverture et fermeture[modifier | modifier le code]

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 :

Ouverture
{|
Fermeture
|}
Exemples et rendu
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|-
| Cellule
|}
<table class="wikitable centre">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
Cellule

Attributs[modifier | modifier le code]

Des attributs s'appliquant à l'ensemble du tableau peuvent êtres ajoutés après le code {|, sous la forme suivante :

{| attribut="valeur"

Plusieurs attributs peuvent êtres ajoutés en les séparant par des espaces.

Les principaux attributs utilisés sont les suivants :

class
Pour ajouter une ou plusieurs classes CSS permettant de mettre en forme le tableau ou de commander certaines fonctionnalités.
Plusieurs classes peuvent êtres ajoutées en les séparant par des espaces.
Les classes sont définies soit par le logiciel MediaWiki, soit par la feuille de style globale du wiki (MediaWiki:Common.css). Il est également possible d'en définir par le biais de l'extension TemplateStyles dans le cas de tableaux générés par des modèles.
Les classes les plus utilisées sont :
wikitable
Permet d'appliquer les styles standards au tableau (couleurs, bordures, etc.). Il est recommandé de toujours utiliser cette classe.
alternance
Permet d'appliquer une alternance entre deux teintes de gris pour l'arrière-plan des lignes, afin d'améliorer la lisibilité, À utiliser en complément de la classe wikitable.
centre (ou center)
Permet d'ajuster la position du tableau, en le centrant horizontalement. Par défaut, la position du tableau dépend de l'élément parent (il sera généralement aligné à gauche).
Cette classe n'a aucun effet sur le contenu à l'intérieur du tableau. Pour modifier l'alignement du contenu, voyez la propriété CSS text-align:.
gauche (ou left)
Permet d'ajuster la position du tableau, en le faisant flotter à gauche.
Cette classe n'a aucun effet sur le contenu à l'intérieur du tableau. Pour modifier l'alignement du contenu, voyez la propriété CSS text-align:.
droite (ou right)
Permet d'ajuster la position du tableau, en le faisant flotter à droite.
Cette classe n'a aucun effet sur le contenu à l'intérieur du tableau. Pour modifier l'alignement du contenu, voyez la propriété CSS text-align:.
sortable
Classe technique indiquant que le tableau est triable. Ajoute de petites flèches sur les colonnes permettant de trier le tableau. Voir la section #Tableaux triables pour plus de détails sur les tableaux triables.
Exemple : class="wikitable centre"
style
Pour ajouter une ou plusieurs propriétés CSS, permettant de mettre en forme le tableau.
À noter que certains attributs ne s'appliqueront pas aux en-têtes de lignes et colonnes, qui obéissent à certaines règles de mise en forme.
Voir pour les propriétés CSS les plus utilisées.

Lignes[modifier | modifier le code]

Pour indiquer une nouvelle ligne de cellules, insérer (sur une ligne seule placée avant les cellules de la nouvelle ligne) l'indicateur de nouvelle ligne :

Indicateur de nouvelle ligne
|-
Exemples et rendu
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|-
| Cellule 1
| Cellule 2
| Cellule 3
|}
<table class="wikitable centre">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>
Cellule 1 Cellule 2 Cellule 3
{| class="wikitable centre"
|-
| Cellule 1.1
| Cellule 1.2
| Cellule 1.3
|-
| Cellule 2.1
| Cellule 2.2
| Cellule 2.3
|}
<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>
Cellule 1.1 Cellule 1.2 Cellule 1.3
Cellule 2.1 Cellule 2.2 Cellule 2.3

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

|----

L'indicateur de nouvelle ligne peut être omis pour la première ligne du tableau.

Un indicateur de nouvelle ligne sera ignoré (y compris ses éventuels attributs) s'il n’est pas suivi de cellules avant l’indicateur suivant de nouvelle ligne ou avant la fin du tableau.

Attributs[modifier | modifier le code]

Des attributs s'appliquant à l'ensemble des cellules d'une ligne peuvent êtres ajoutés après le code |-, sous la forme suivante :

|- attribut="valeur"

Plusieurs attributs peuvent êtres ajoutés en les séparant par des espaces.

Les principaux attributs utilisés sont les suivants :

class
Pour ajouter une ou plusieurs classes CSS permettant de mettre en forme la ligne et les cellules la composant ou de commander certaines fonctionnalités.
Plusieurs classes peuvent êtres ajoutées en les séparant par des espaces.
Les classes sont définies soit par le logiciel MediaWiki, soit par la feuille de style globale du wiki (MediaWiki:Common.css). Il est également possible d'en définir par le biais de l'extension TemplateStyles dans le cas de tableaux générés par des modèles.
À l'heure actuelle, les seules classes utiles pour les lignes sont les deux classes techniques suivantes :
expand-child
Utilisée dans un tableau triable (classe sortable dans l'attribut class="" du tableau), indique que la ligne concernée doit rester solidaire de la ligne précédente lors du tri (autrement dit, la ligne ne doit pas être triée) (voir la section #Tableaux triables pour plus de détails).
Si cela peut être parfois utile (par exemple pour ne pas trier des sous-éléments liés à l'élément précédent), cela ne devrait pas être utilisé pour construire des tableaux non accessibles.
Plusieurs lignes consécutives peuvent porter cette classe, dans ce cas, elles resteront liées (dans le même ordre) à la dernière ligne précédente ne comportant pas cette classe.
sortbottom
Utilisée dans un tableau triable (classe sortable dans l'attribut class="" du tableau), indique qu'il s'agit d'une ligne de pied de tableau, qui ne doit pas être triée (par exemple si la dernière ligne indique un total). Voir la section #Tableaux triables.
style
Pour ajouter une ou plusieurs propriétés CSS, permettant de mettre en forme la ligne et les cellules la composant.
À noter que certains attributs ne s'appliqueront pas aux en-têtes de lignes et colonnes, qui obéissent à certaines règles de mise en forme.
Voir pour les propriétés CSS les plus utilisées.

Cellules[modifier | modifier le code]

Les cellules qui forment une même ligne peuvent être énumérées verticalement ou horizontalement dans le wikicode, pour un rendu identique :

Disposition verticale
| Cellule 1
| Cellule 2
| Cellule 3
Disposition horizontale
| Cellule 1 || Cellule 2 || Cellule 3
Mélange des dispositions verticales et horizontales
| Cellule 1 || Cellule 2
| Cellule 3
Exemples et rendu
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|-
| Cellule 1
| Cellule 2
| Cellule 3
|}
<table class="wikitable centre">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>
Cellule 1 Cellule 2 Cellule 3
{| class="wikitable centre"
|-
| Cellule 1 || Cellule 2 || Cellule 3
|}
<table class="wikitable centre">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>
Cellule 1 Cellule 2 Cellule 3
{| class="wikitable centre"
|-
| Cellule 1 || Cellule 2
| Cellule 3
|}
<table class="wikitable centre">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>
Cellule 1 Cellule 2 Cellule 3

Cellules sans contenu[modifier | modifier le code]

Des cellules peuvent aussi n’avoir aucun contenu visible :

Disposition verticale
| Cellule 1
| 
| Cellule 3
Disposition horizontale
| Cellule 1 ||  || Cellule 3

À noter qu'une cellule sans contenu peut néanmoins comporter des attributs.

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 une ou deux espaces entre les deux doubles barres verticales séparant les cellules, comme sur l'exemple ci-dessus (les espaces non significatifs en tête ou fin de cellule sont automatiquement supprimés lors de l'affichage), 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).

En effet, il est facile de faire des erreurs avec le nombre de barres verticales en cas de non-utilisation d'espaces intermédiaires.

Attributs[modifier | modifier le code]

Chacune des cellules d’un tableau peut comporter des attributs, séparés du contenu par une autre barre verticale à ajouter à la fin des attributs.

Plusieurs attributs peuvent êtres ajoutés en les séparant par des espaces.

Disposition verticale
Attribut appliqué aux cellules 1 et 3.
| attribut="valeur" | Cellule 1
| Cellule 2
| attribut="valeur" | Cellule 3
Disposition horizontale
Attribut appliqué aux cellules 1 et 3.
| attribut="valeur" | Cellule 1 || Cellule 2 || attribut="valeur" | Cellule 3

Les principaux attributs utilisés sont les suivants :

colspan
Fusionne n cellules adjacentes horizontalement, situées à droite (fusion de colonnes).
Les cellules adjacentes (situées à droite) qui sont « couvertes » par une fusion doivent êtres absentes du wikicode (faire comme si les cellules concernées n'existaient pas).
Voir la section sur les fusions de cellules pour plus de détails.
Indiquer le nombre de cellules à fusionner (y compris la cellule actuelle).
Exemple : colspan="2" fusionnera la cellule actuelle avec celle de droite.
rowspan
Fusionne n cellules adjacentes verticalement, situées en dessous (fusion de lignes).
Les cellules adjacentes (situées en dessous) qui sont « couvertes » par une fusion doivent êtres absentes du wikicode (faire comme si les cellules concernées n'existaient pas).
Voir la section sur les fusions de cellules pour plus de détails.
Indiquer le nombre de cellules à fusionner (y compris la cellule actuelle).
Exemple : rowspan="2" fusionnera la cellule actuelle avec celle du dessous.
headers
Utilisé pour améliorer l'accessibilité des tableaux complexes, en indiquant un ou plusieurs id de cellules d'en-tête (définis avec des id=""), auxquels doit être rattaché la cellule.
Si plusieurs id doivent êtres indiqués, les séparer par des espaces.
À utiliser à la place des attributs scope="" qui sont inutilisables avec les tableaux complexes.
Voir Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux complexes pour plus d'informations sur l'accessibilité des tableaux.
data-sort-value
Utilisé dans un tableau triable, permet de définir une clé de tri personnalisée pour la cellule.
Par exemple, pour une cellule contenant la valeur John Smith (prénom suivi du nom), on peut vouloir trier d'abord sur le nom de famille (« Smith »).
Exemple : data-sort-value="Smith, John"
class
Pour ajouter une ou plusieurs classes CSS permettant de mettre en forme la cellule.
Plusieurs classes peuvent êtres ajoutées en les séparant par des espaces.
Les classes sont définies soit par le logiciel MediaWiki, soit par la feuille de style globale du wiki (MediaWiki:Common.css). Il est également possible d'en définir par le biais de l'extension TemplateStyles dans le cas de tableaux générés par des modèles.
style
Pour ajouter une ou plusieurs propriétés CSS, permettant de mettre en forme la cellule.
Voir pour les propriétés CSS les plus utilisées.

En-têtes de lignes et de colonnes[modifier | modifier le code]

Pour créer une cellule d'en-tête, le caractère ! (point d'exclamation) doit être utilisé à la place de la barre verticale |, utilisée pour la création des cellules conventionnelles.

La syntaxe est pour le reste identique à celle des cellules.

Il n'y a aucune différentiation de la syntaxe entre une cellule d'en-tête de ligne ou de colonne. Pour cette raison, des attributs supplémentaires sont nécessaires pour indiquer aux outils d'accessibilité, tels que les lecteurs d'écran, s'il s'agit d'un en-tête de ligne ou de colonne.

Les cellules d'en-tête peuvent êtres énumérées verticalement ou horizontalement, comme pour les cellules conventionnelles.

Disposition verticale
! En-tête 1
! En-tête 2
! En-tête 3
Disposition horizontale
! En-tête 1 !! En-tête 2 !! En-tête 3
Mélange des dispositions verticales et horizontales
! En-tête 1 !! En-tête 2
! En-tête 3
Exemples et rendu
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|-
! En-tête 1.1
! En-tête 1.2
! En-tête 1.3
|-
| Cellule 2.1
| Cellule 2.2
| Cellule 2.3
|-
| Cellule 3.1
| Cellule 3.2
| Cellule 3.3
|}
<table class="wikitable centre">
  <tr>
    <th>En-tête 1.1</th>
    <th>En-tête 1.2</th>
    <th>En-tête 1.3</th>
  </tr>
  <tr>
    <td>Cellule 2.1</td>
    <td>Cellule 2.2</td>
    <td>Cellule 2.3</td>
  </tr>
  <tr>
    <td>Cellule 3.1</td>
    <td>Cellule 3.2</td>
    <td>Cellule 3.3</td>
  </tr>
</table>
En-tête 1.1 En-tête 1.2 En-tête 1.3
Cellule 2.1 Cellule 2.2 Cellule 2.3
Cellule 3.1 Cellule 3.2 Cellule 3.3
{| class="wikitable centre"
|-
! En-tête 1.1
! En-tête 1.2
! En-tête 1.3
|-
! En-tête 2.1
| Cellule 2.2
| Cellule 2.3
|-
! En-tête 3.1
| Cellule 3.2
| Cellule 3.3
|}
<table class="wikitable centre">
  <tr>
    <th>En-tête 1.1</th>
    <th>En-tête 1.2</th>
    <th>En-tête 1.3</th>
  </tr>
  <tr>
    <th>En-tête 2.1</th>
    <td>Cellule 2.2</td>
    <td>Cellule 2.3</td>
  </tr>
  <tr>
    <th>En-tête 3.1</th>
    <td>Cellule 3.2</td>
    <td>Cellule 3.3</td>
  </tr>
</table>
En-tête 1.1 En-tête 1.2 En-tête 1.3
En-tête 2.1 Cellule 2.2 Cellule 2.3
En-tête 3.1 Cellule 3.2 Cellule 3.3
Combinaison de cellules d'en-tête et de cellules conventionnelles en disposition horizontale
Il est interdit de combiner en disposition horizontale des cellules d'en-tête (code !!) avec des cellules conventionnelles (code ||).
Le code suivant n'est pas valide :
! En-tête 1 !! En-tête 2 || Cellule 3
À remplacer par :
! En-tête 1 !! En-tête 2
| Cellule 3

Accessibilité[modifier | modifier le code]

Les en-têtes de tableaux permettent également aux logiciels lecteurs d’écran utilisés par les lecteurs malvoyants d'aider à restituer la structure logique d'un tableau. Mais seuls, ils ne sont généralement pas suffisants. Pour cette raison, il est indispensable d'ajouter des attributs d'accessibilité, tels que scope="", qui permettent de préciser le type d'en-tête, en indiquant s'il s'agit d'un en-tête de ligne ou de colonne.

Ainsi, lorsque l'utilisateur se déplace dans un tableau, les en-têtes concernés (ligne et/ou colonne) pourront lui être rappelées par le logiciel, afin qu'il puisse comprendre la signification des différentes données.

Indicateur pour en-tête de colonne
! scope="col" | En-tête 1
Indicateur pour en-tête de ligne
! scope="row" | En-tête 1
Exemples et rendu
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|-
! scope="col" | En-tête 1.1
! scope="col" | En-tête 1.2
! scope="col" | En-tête 1.3
|-
| Cellule 2.1
| Cellule 2.2
| Cellule 2.3
|-
| Cellule 3.1
| Cellule 3.2
| Cellule 3.3
|}
<table class="wikitable centre">
  <tr>
    <th scope="col">En-tête 1.1</th>
    <th scope="col">En-tête 1.2</th>
    <th scope="col">En-tête 1.3</th>
  </tr>
  <tr>
    <td>Cellule 2.1</td>
    <td>Cellule 2.2</td>
    <td>Cellule 2.3</td>
  </tr>
  <tr>
    <td>Cellule 3.1</td>
    <td>Cellule 3.2</td>
    <td>Cellule 3.3</td>
  </tr>
</table>
En-tête 1.1 En-tête 1.2 En-tête 1.3
Cellule 2.1 Cellule 2.2 Cellule 2.3
Cellule 3.1 Cellule 3.2 Cellule 3.3
{| class="wikitable centre"
|-
! scope="col" | En-tête 1.1
! scope="col" | En-tête 1.2
! scope="col" | En-tête 1.3
|-
! scope="row" | En-tête 2.1
| Cellule 2.2
| Cellule 2.3
|-
! scope="row" | En-tête 3.1
| Cellule 3.2
| Cellule 3.3
|}
<table class="wikitable centre">
  <tr>
    <th scope="col">En-tête 1.1</th>
    <th scope="col">En-tête 1.2</th>
    <th scope="col">En-tête 1.3</th>
  </tr>
  <tr>
    <th scope="row">En-tête 2.1</th>
    <td>Cellule 2.2</td>
    <td>Cellule 2.3</td>
  </tr>
  <tr>
    <th scope="row">En-tête 3.1</th>
    <td>Cellule 3.2</td>
    <td>Cellule 3.3</td>
  </tr>
</table>
En-tête 1.1 En-tête 1.2 En-tête 1.3
En-tête 2.1 Cellule 2.2 Cellule 2.3
En-tête 3.1 Cellule 3.2 Cellule 3.3

Particularités concernant la mise en forme[modifier | modifier le code]

Les navigateurs affichent habituellement toujours le contenu des cellules d'en-tête en gras. Cette distinction aide à la différenciation des cellules d'en-tête par rapport aux cellules conventionelles.

De plus, lorsque la classe wikitable est utilisée (ce qui est recommandé), les cellules d'en-tête sont affichés avec un arrière-plan gris foncé. Et à noter également que certaines propriétés CSS, qui seraient définies dans un attribut style="" d'ouverture de tableau ou d'indicateur de nouvelle ligne, ne s'appliquent pas aux cellules d'en-tête. Cela concerne nottament les propriétés suivantes :

background:
Style par défaut : arrière-plan gris-foncé, code couleur héxadécimal : #EAECF0.
text-align:
Style par défaut : alignement du contenu au centre, sauf pour les en-têtes de lignes identifiées avec un scope="row", qui sont alignées à gauche.

Pour modifier la couleur d'arrière-plan ou l'alignement horizontal du contenu d'une cellule d'en-tête, il faut se servir de l'attribut style="" de la cellule.

Attributs[modifier | modifier le code]

Chacune des cellules d'en-tête d'un tableau peut comporter des attributs, séparés du contenu par une autre barre verticale à ajouter à la fin des attributs.

Plusieurs attributs peuvent êtres ajoutés en les séparant par des espaces.

Attention : noter que le séparateur entre les attributs et le contenu reste la barre verticale |.

Disposition verticale
Attribut appliqué aux en-têtes 1 et 3.
! attribut="valeur" | En-tête 1
! En-tête 2
! attribut="valeur" | En-tête 3
Disposition horizontale
Attribut appliqué aux en-têtes 1 et 3.
! attribut="valeur" | En-tête 1 !! En-tête 2 !! attribut="valeur" | En-tête 3

Les principaux attributs utilisés sont les suivants :

colspan
Fusionne n cellules adjacentes horizontalement, situées à droite (fusion de colonnes).
Les cellules adjacentes (situées à droite) qui sont « couvertes » par une fusion doivent êtres absentes du wikicode (faire comme si les cellules concernées n'existaient pas).
Voir la section sur les fusions de cellules pour plus de détails.
Indiquer le nombre de cellules à fusionner (y compris la cellule actuelle).
Exemple : colspan="2" fusionnera la cellule actuelle avec celle de droite.
rowspan
Fusionne n cellules adjacentes verticalement, situées en dessous (fusion de lignes).
Les cellules adjacentes (situées en dessous) qui sont « couvertes » par une fusion doivent êtres absentes du wikicode (faire comme si les cellules concernées n'existaient pas).
Voir la section sur les fusions de cellules pour plus de détails.
Indiquer le nombre de cellules à fusionner (y compris la cellule actuelle).
Exemple : rowspan="2" fusionnera la cellule actuelle avec celle du dessous.
scope
Utilisé pour l'accessibilité des tableaux, indique s'il s'agit d'un en-tête de ligne ou de colonne.
Noter que l'en-tête s'applique à l'ensemble de la ligne ou de la colonne, et non seulement aux lignes ou colonnes situées à droite ou en dessous Il ne doit donc y avoir qu'un seul attribut scope du même type sur l'ensemble d'une ligne ou colonne.
Si une ligne ou colonne dépend de plusieurs en-têtes, il ne faut pas utiliser l'attribut scope="", mais utiliser à la place les attributs id="" (sur les en-têtes) et headers="" (sur les cellules).
Valeurs possibles :
col 
Indique qu'il s'agit d'un en-tête de colonne.
row 
Indique qu'il s'agit d'un en-tête de ligne.
Exemple : scope="col"
id
Utilisé pour l'accessibilité des tableaux complexes, en indiquant un ou plusieurs id (identifiants uniques) de cellules d'en-tête (définis avec id=""), auxquels doit être rattaché la cellule.
Si plusieurs id doivent êtres indiqués, les séparer par des espaces.
Attention au fait qu'un id doit toujours être unique sur l'ensemble d'un article (pas seulement d'un tableau). Il faut donc être particulièrement prudent dans le cas de tableaux générés par des modèles utilisant des id.
À utiliser à la place des attributs scope="" qui sont inutilisables avec les tableaux complexes.
Voir Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux complexes pour plus d'informations sur l'accessibilité des tableaux.
headers
Utilisé pour l'accessibilité des tableaux complexes, en indiquant un ou plusieurs id de cellules d'en-tête supérieures (définis avec id=""), auxquels doit être rattaché cet en-tête.
Si plusieurs id doivent êtres indiqués, les séparer par des espaces.
À utiliser à la place des attributs scope="" qui sont inutilisables avec les tableaux complexes.
À noter qu'une cellule d'en-tête peut à la fois contenir un attribut id="" et un attribut headers="". Cette situation se retrouve dans le cas de tableaux complexes, avec des en-têtes intermédiaires. Dans ce cas, l'en-tête intermédiaire peut à la fois être rattaché à un en-tête supérieur, tout en définissant un id pour permettre aux cellules ou en-têtes inférieurs de s'y rattacher.
Voir Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux complexes pour plus d'informations sur l'accessibilité des tableaux.
data-sort-type
Utilisé dans un tableau triable, permet d'indiquer le type de données pour les cellules d'une colonne, afin que le contenu soit trié correctement.
Normalement, MediaWiki essaie de détecter automatiquement le type de données à partir du contenu des cinq premières lignes. Mais la détection peut parfois aboutir à un mauvais choix. Pour cette raison, il est parfois nécessaire de forcer un type de données.
Les valeurs possibles sont :
  • text : pour du contenu texte,
  • number : pour des nombres,
  • IPAddress : pour des adresses IP,
  • currency : pour des devises/monnaies,
  • url : pour des URL,
  • isoDate : pour des dates au format ISO 8601,
  • usLongDate : pour des dates au format texte utilisant la notation américaine (mois-jour-année),
  • date : pour des dates au format texte,
  • time : pour des heures.
Exemple : data-sort-type="text"
class
Pour ajouter une ou plusieurs classes CSS permettant de mettre en forme la cellule.
Plusieurs classes peuvent êtres ajoutées en les séparant par des espaces.
Les classes sont définies soit par le logiciel MediaWiki, soit par la feuille de style globale du wiki (MediaWiki:Common.css). Il est également possible d'en définir par le biais de l'extension TemplateStyles dans le cas de tableaux générés par des modèles.
style
Pour ajouter une ou plusieurs propriétés CSS, permettant de mettre en forme la cellule.
Voir pour les propriétés CSS les plus utilisées.

Titre[modifier | modifier le code]

Le titre de tableau se définit avec un balisage spécial, qui doit être inséré sur une ligne située juste après l'ouverture du tableau.

Titre de tableau
|+ Titre du tableau
Exemples et rendu
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|+ Titre du tableau
|-
! scope="col" | En-tête 1.1
! scope="col" | En-tête 1.2
! scope="col" | En-tête 1.3
|-
! scope="row" | En-tête 2.1
| Cellule 2.2
| Cellule 2.3
|-
! scope="row" | En-tête 3.1
| Cellule 3.2
| Cellule 3.3
|}
<table class="wikitable centre">
  <caption>Titre du tableau</caption>
  <tr>
    <th scope="col">En-tête 1.1</th>
    <th scope="col">En-tête 1.2</th>
    <th scope="col">En-tête 1.3</th>
  </tr>
  <tr>
    <th scope="row">En-tête 2.1</th>
    <td>Cellule 2.2</td>
    <td>Cellule 2.3</td>
  </tr>
  <tr>
    <th scope="row">En-tête 3.1</th>
    <td>Cellule 3.2</td>
    <td>Cellule 3.3</td>
  </tr>
</table>
Titre du tableau
En-tête 1.1 En-tête 1.2 En-tête 1.3
En-tête 2.1 Cellule 2.2 Cellule 2.3
En-tête 3.1 Cellule 3.2 Cellule 3.3

L'utilisation des titres de tableaux permet d'améliorer la clarté et l'accessibilité des articles, contraiement à la mauvaise pratique consistant à fusionner toutes les cellules d'une ligne, pour y mettre à l'intérieur le titre du tableau, qui est à éviter. Il est par ailleurs possible de mettre en forme facilement un titre de tableau pour le faire ressembler à une cellule de tableau (arrière-plan, bordures, etc.) en cas de bseoin.

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

Les titres de tableaux sont affichés par défaut en gras et centrés horizontalement au-dessus des tableaux.

Attributs[modifier | modifier le code]

Un titre de tableau peut comporter des attributs. Ils se placent juste après le |+, et seront séparés du titre du tableau lui-même par une barre verticale.

|+ attribut="valeur" | Titre du tableau

Plusieurs attributs peuvent êtres ajoutés en les séparant par des espaces.

Les principaux attributs utilisés sont les suivants :

class
Pour ajouter une ou plusieurs classes CSS permettant de mettre en forme le titre
Plusieurs classes peuvent êtres ajoutées en les séparant par des espaces.
Les classes sont définies soit par le logiciel MediaWiki, soit par la feuille de style globale du wiki (MediaWiki:Common.css). Il est également possible d'en définir par le biais de l'extension TemplateStyles dans le cas de tableaux générés par des modèles.
style
Pour ajouter une ou plusieurs propriétés CSS, permettant de mettre en forme le titre.
Voir pour les propriétés CSS les plus utilisées.
Exemple : style="text-align:left;"

Cellules fusionnées[modifier | modifier le code]

Les attributs colspan="" et rowspan="" permettent de fusionner plusieurs cellules d’une même ligne ou d’une même colonne respectivement.

|colspan="2"| Fusion de deux cellules d’une même ligne
Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellule 1 Cellule 2 Cellule 3
Simple Fusionnée
{| class="wikitable centre"
|-
| Cellule 1 || Cellule 2 || Cellule 3
|-
| Simple ||colspan="2"| Fusionnée
|}
 <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>
|rowspan="3"| Fusion de trois cellules d’une même colonne
Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellules simples Colonne
Gauche 1 Droite
Gauche 2
Gauche 3
{| class="wikitable centre"
|-
!scope="col"| Cellules simples !!scope="col"| Colonne
|-
| Gauche 1 ||rowspan="3"| Droite
|-
| Gauche 2
|-
| Gauche 3
|}
 <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>

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

Accessibilité des tableaux[modifier | modifier le code]

Position des en-têtes de lignes
Les en-têtes de lignes ne doivent pas obligatoirement se trouver sur la première colonne d'un tableau. Par exemple, sur un tableau représentatnt un classement, si la 1re colonne est un numéro, et que la 2e est le nom, il est possible de placer les en-têtes des différentes lignes sur la seconde colonne[WCAG 1] :
|-
| Cellule 2.1
! scope="row" | En-tête 2.2
| Cellule 2.3

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

Les utilisateurs enregistrés peuvent activer dans leurs préférences le gadget « Accessibilité » qui affiche notamment un outil permettant de vérifier rapidement la présence des attributs scope, id et headers d’un tableau.


Tableaux triables[modifier | modifier le code]

Aides détaillées : (en) m:Help:Sorting et (en) en:Help:Sorting.

Le tri des données est impossible avec la « version mobile » de Wikipédia.

Le tri des données peut ne pas fonctionner pour les utilisateurs chez qui les styles CSS ne sont pas pris en compte ou sont désactivés.

Les tableaux peuvent être triés en utilisant la classe sortable depuis MediaWiki 1.9. Les tableaux triables s’identifient grâce aux flèches de tri des en-têtes. Cette fonctionnalité repose sur le code JavaScript jquery.tablesorter.js.

Différents types de données[modifier | modifier le code]

MediaWiki essaie de déterminer automatiquement le type de données de chaque colonne à partir du contenu des cinq premières lignes. Mais la détection peut parfois échouer. Pour cette raison, il est parfois nécessaire de forcer un type de données avec l'attribut data-sort-type="" dans l'en-tête de colonne concerné.

Cet attribut peut prendre différentes valeurs :

  • text : pour du contenu texte,
  • number : pour des nombres, y compris avec des espaces comme séparateurs de milliers, ou des parties décimales.
  • IPAddress : pour des adresses IP,
  • currency : pour des devises/monnaies,
  • url : pour des URL,
  • isoDate : pour des dates au format ISO 8601 (année-mois-jour),
  • usLongDate : pour des dates au format texte utilisant la notation américaine (mois-jour-année),
  • date : pour des dates au format texte, de type jour-mois-année. Différents séparateurs sont supportés (espaces, tirets, points, /), avec ou sans zéro initial, le mois peut être en toutes lettres ou en chiffres.
  • time : pour des heures.

Exemple : data-sort-type="text"

Particularités[modifier | modifier le code]
Dates
Les dates sont prises en charge selon différents formats.
Il existe trois formats techniques (ou types) de dates possibles : date, isoDate et usLongDate. Ce dernier correspondant à des dates au format texte brut utilisant la notation américaine (mois-jour-année), et ce format d'écriture n'étant pas utilisé dans les contenus francophones, il n'est pas utile sur la Wikipédia en français.
La détection automatique fonctionne généralement très bien pour les dates utilisant les modèles {{date}} ou {{date-}}. Les dates au format texte (sans modèles de date) ne sont par contre correctement triées que si les cellules concernées ne contiennent que des dates complètes (jour mois année, différents séparateurs supportés), et sans texte « 1er » ou {{1er}}. Si certaines dates sont partielles (mois année ou année) ou comportent des intervalles, il faut utiliser le modèle {{date}} ou {{date-}} pour toutes les dates.
Dates au format texte brut
Les dates au format texte brut correspondent au type de données date.
Le mois peut être écrit en toutes lettres, ou par son numéro, avec ou sans zéro initial. Par contre, les abréviations de mois ne sont pas supportées, ni les termes « 1er » ou « 1er ». Si des abréviations de mois ou des termes de type « 1er » sont présents, il faut passer par {{date}} ou {{date-}}.
Exemples : 31 décembre 1999, 31-12-1999, 31/12/1999, etc.
Dates avec un modèle de date {{date}} ou {{date-}}
Les dates issues d'un modèle de date correspondent au type de données isoDate.
Ces modèles de date génèrent automatiquement une clé de tri (via un attribut data-sort-value="") au format ISO 8601 (année-mois-jour).
Les modèles de date {{date}} et {{date-}} peuvent êtres utilisés indistinctement, les clés de tri générées étant identiques. la seule différence concernant la création d'un lien interne ou non.
Exemples : {{date-|31 décembre 1999}}, {{date|31|décembre|1999}}, {{date-|31-12-1999}}, etc.
Dates avec l'ancien modèle de date {{tri date}}
Cet ancien modèle de date servait avec le précédent système de tri des tableaux (avant l'utilisation de la version HTML5 par MediaWiki, autorisant les attributs de données personnalisés data-*, dont data-sort-value est issu). Depuis ce moment, les modèles {{date}} et {{date-}} ont été modifiés pour générer une clé de tri automatiquement.
Il est préférable d'utiliser pour les nouveaux tableaux les modèles {{date}} ou {{date-}}, qui apportent un meilleur support et une syntaxe simplifiée.
Le modèle {{tri date}} générant des clés de tri non-standard du type AnnéeMoisJour (exemple : 19991231) qui sont incompatibles avec les autres modèles de date, le type de données correspondant à utiliser en cas de besoin est alors number.
Il faut veiller impérativement à ne pas mélanger dans une colonne triable d'un tableau des dates en format texte brut (31 décembre 1999) avec des dates issues d'un modèle de date ({{date-|31 décembre 1999}}), ni mélanger des dates issues des modèles {{date}}/{{date-}} avec d'autres issues de {{tri date}}. En effet, les clés de tri sont incompatibles entre elles.
Toute date non reconnue sera traitée et triée comme du texte.
Nombres
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). Si une colonne contient du texte dans certaines cellules et des nombres dans les autres, le tri sera alphabétique et non numérique ; pour forcer le tri numérique, on peut utiliser le modèle {{tri}} sur les cellules contenant du texte[1].
???
Nombre Alphabet Dates Monnaie 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
40 w 01.Jan.2005 4.20 pas
5 V 05/12/2006 7.15 triable.
Total : 15 Total : 29.55

Il est possible de créer des colonnes non triables en spécifiant l’attribut de colonne class="unsortable", et d’exclure des lignes complètes en bas de tableau avec l’attribut de ligne class="sortbottom" :

{|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
|-
| 40 || w || 01.Jan.2005 || 4.20 || pas
|-
| 5 || V || 05/12/2006 || 7.15 || triable.
|-class="sortbottom"
! Total : 15 !! !! !! Total : 29.55 !!
|}

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 {{smn}} pour les colonnes de nombres,
  • le modèle {{tri1}} pour les chaînes de caractères (voir la section suivante).

Les tables ayant des cellules s’étendant sur plusieurs lignes (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 lignes ou de colonnes induits par la présence de cellules fusionnées).

Tri correct des lettres accentuées[modifier | modifier le code]

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

Syntaxe :

{{tri|clé de tri|texte affiché}}
{{tri|clé de tri}}''texte affiché''

Par exemple :

{{tri|Elephant|[[Éléphant]]}}
Exemple d’un tableau complet
Animal Codage wiki Statut de tri
Alpaga [[Alpaga]] OK
Âne no 1 {{tri|Ane|[[Âne]]}} {{n°|1}} Bien trié
Buffle [[Buffle]] OK
Éléphant no 1 {{tri|Elephant|[[Éléphant]]}} {{n°|1}} Bien trié
Zèbre {{tri|Zebre|[[Zèbre]]}} Bien trié
Âne no 2 [[Âne]] {{n°|2}} Mal trié
Éléphant no 2 [[Éléphant]] {{n°|2}} Mal trié

Mise en forme[modifier | modifier le code]

Classe wikitable[modifier | modifier le code]

La classe wikitable permet d'appliquer différents styles de mise en forme standardisés prévus pour les tableaux, le rendant plus élégant qu'un tableau classique. Il est conseillé d'utiliser cette classe systématiquement pour tous les tableaux de données. Autrement, il faut gérer soi-même la mise en forme du tableau, et peut induire un manque de cohérence du tableau, ou encore une mise en forme (couleur, contraste, taille du texte, bordures, marges, etc.) non-accessibles.

L'autre avantage de cette classe, c'est qu’elle gère automatiquement la mise en forme des en-têtes de tableaux.

Elle peut être complétée en ajoutant la classe alternance, commandant une alternance de teintes de gris pour l'arrière-plan des lignes, afin d'améliorer la lisibilité.

Il est bien entendu possible de modifier la mise en forme par défaut d'un élément, en utilisant différents attributs CSS .

Bordures[modifier | modifier le code]

Il est possible de modifier les différentes bordures d'un tableau, de lignes ou de cellules à l'aide de la propriété CSS border:.

L'utilisation de la classe wikitable ajoute automatiquement différentes bordures au tableau. Par défaut, sans cette classe, un tableau ne comporte aucune bordure.

Cette propriété CSS a besoin des trois valeurs suivantes : taille type couleur. Exemple : border:2px solid forestgreen;. L'ordre dans lequel sont indiqués ces trois valeurs n'a aucune importance.

taille type couleur sont :

taille
Indiquer la taille de la bordure, en pixels, en ajoutant le suffixe px à la fin.
Exemple : 2px
type
Indiquer le type de bordure.
Types de bordures :
  • solid : bordure continue :
  • dotted : bordure en pointillés :
  • dashed : bordure en tirets :
  • double : bordure continue double : Une épaisseur d'au moins 4px est nécessaire pour afficher une bordure continue double.
couleur
Couleur de la bordure, sous la forme d'un code couleur CSS (nom de couleur ou code hexadécimal).
Suppression de bordure
Pour désactiver une bordure, il suffit de passer la valeur unique none à la place des trois valeurs.
Exemple : border:none;

D'autres propriétés CSS plus précises que border: sont disponibles, n'affectant qu'un seul segment de la bordure (gauche, droite, haut ou bas). Pour le reste, leur fonctionnement est identique :

border-right:
Bordure droite.
border-left:
Bordure gauche.
border-top:
Bordure haute.
border-bottom:
Bordure basse.

Les propriétés CSS suivantes, spécifiques aux bordures peuvent aussi êtres utiles :

border-collapse:
Permet de définir si les bordures du tableau et des cellules doivent êtres jointes (dites « collapse ») ou non.
Des bordures jointes signifient que deux cellules adjacentes vont se partager la même bordure, et que la bordure extérieure du tableau sera remplacée par celle des cellules.
Par défaut, avec la classe wikitable, les bordures sont jointes, sans cette classe, les bordures sont disjointes.
Valeurs possibles :
separate
Bordures disjointes.
collapse
Bordures jointes.
Exemple : border-collapse:separate;
border-spacing:
Permet de définir, en pixels, l'espacement entre les bordures des cellules, quand les bordures sont disjointes.
Exemple : border-spacing:4px;
Exemples de tableaux comportant la classe wikitable
Codage wiki Codage HTML Rendu
{| class="wikitable"
|-
| Bordure par défaut
| Bordure par défaut
|}
<table class="wikitable">
  <tr>
    <td>Bordure par défaut</td>
    <td>Bordure par défaut</td>
  </tr>
</table>
Bordure par défaut Bordure par défaut
{| class="wikitable" style="border:2px solid black;"
|-
| Bordure solid
| Bordure solid
|}
<table class="wikitable" style="border:2px solid black;">
  <tr>
    <td>Bordure solid</td>
    <td>Bordure solid</td>
  </tr>
</table>
Bordure solid Bordure solid
{| class="wikitable" style="border:2px dotted black;"
|-
| Bordure dotted
| Bordure dotted
|}
<table class="wikitable" style="border:2px dotted black;">
  <tr>
    <td>Bordure dotted</td>
    <td>Bordure dotted</td>
  </tr>
</table>
Bordure dotted Bordure dotted
{| class="wikitable" style="border:2px dashed black;"
|-
| Bordure dashed
| Bordure dashed
|}
<table class="wikitable" style="border:2px dashed black;">
  <tr>
    <td>Bordure dashed</td>
    <td>Bordure dashed</td>
  </tr>
</table>
Bordure dashed Bordure dashed
{| class="wikitable" style="border:4px double black;"
|-
| Bordure double
| Bordure double
|}
<table class="wikitable" style="border:4px double black;">
  <tr>
    <td>Bordure double</td>
    <td>Bordure double</td>
  </tr>
</table>
Bordure double Bordure double
{| class="wikitable" style="border:2px solid black; border-collapse:separate;"
|-
| Bordures disjointes
| Bordures disjointes
|}
<table class="wikitable" style="border:2px solid black; border-collapse:separate;">
  <tr>
    <td>Bordures disjointes</td>
    <td>Bordures disjointes</td>
  </tr>
</table>
Bordures disjointes Bordures disjointes
{| class="wikitable" style="border:2px solid black; border-collapse:separate; border-spacing:4px;"
|-
| Bordures disjointes
| Bordures disjointes
|}
<table class="wikitable" style="border:2px solid black; border-collapse:separate; border-spacing:4px;">
  <tr>
    <td>Bordures disjointes</td>
    <td>Bordures disjointes</td>
  </tr>
</table>
Bordures disjointes Bordures disjointes
{| class="wikitable" style="border:2px solid black;"
|-
| style="border:2px solid blue;" | Bordures jointes bleues
| style="border:2px solid red;" | Bordures jointes rouges
|}
<table class="wikitable" style="border:2px solid black;">
  <tr>
    <td style="border:2px solid blue;">Bordures jointes bleues</td>
    <td style="border:2px solid red;">Bordures jointes rouges</td>
  </tr>
</table>
Bordures jointes bleues Bordures jointes rouges

Remarquez l'absence d'affichage de la bordure noire du tableau, remplacée par celle des cellules,
ainsi que la superposition des bordures des cellules.

{| class="wikitable" style="border:2px solid black; border-collapse:separate;"
|-
| style="border:2px solid blue;" | Bordures disjointes bleues
| style="border:2px solid red;" | Bordures disjointes rouges
|}
<table class="wikitable" style="border:2px solid black; border-collapse:separate;">
  <tr>
    <td style="border:2px solid blue;">Bordures disjointes bleues</td>
    <td style="border:2px solid red;">Bordures disjointes rouges</td>
  </tr>
</table>
Bordures disjointes bleues Bordures disjointes rouges
Exemples de tableaux ne comportant pas la classe wikitable
Codage wiki Codage HTML Rendu
{|
|-
| Cellule sans bordure
| Cellule sans bordure
|}
<table>
  <tr>
    <td>Cellule sans bordure</td>
    <td>Cellule sans bordure</td>
  </tr>
</table>
Cellule sans bordure Cellule sans bordure

Alignements[modifier | modifier le code]

Alignement horizontal du tableau[modifier | modifier le code]

La position du tableau sur l'axe horizontal est déterminée par le contenu parent (plus précisément par la valeur de la propriété CSS text-align: de cet élément parent). En pratique, Dans la quasi-totalité des cas, le tableau sera aligné à gauche, en mode « non-flottant » (c.-à-d. sans contenu dans l'éventuel espace vide situé à droite du tableau, si le tableau n'occupe pas toute la largeur de la page).

Il est possible de modifier cet alignement avec une des classes CSS suivantes, à ajouter dans l'attribut class="" d'ouverture du tableau :

centre (ou center)
Centre le tableau.
Mode « non-flottant » (c.-à-d. sans contenu dans l'éventuel espace libre à gauche et à droite du tableau).
gauche (ou left)
Aligne à gauche le tableau.
Mode « flottant » (c.-à-d. que l'éventuel espace libre situé à droite du tableau sera comblé si possible par le contenu suivant le tableau (un peu comme pour une infobox ou une miniature d'image).
droite (ou right)
Aligne à droite le tableau.
Mode « flottant » (c.-à-d. que l'éventuel espace libre situé à gauche du tableau sera comblé si possible par le contenu suivant le tableau (un peu comme pour une infobox ou une miniature d'image).
Exemples de positionnement horizontal d'un tableau
Codage wiki Codage HTML Rendu
{| class="wikitable"
|-
| Par défaut
|}
<table class="wikitable">
  <tr>
    <td>Par défaut</td>
  </tr>
</table>

Ceci est un paragraphe situé avant le tableau.

Par défaut

Ceci est un paragraphe situé après le tableau.

Un autre paragraphe.

Et encore un paragraphe...

{| class="wikitable gauche"
|-
| À gauche
|}
<table class="wikitable gauche">
  <tr>
    <td>À gauche</td>
  </tr>
</table>

Ceci est un paragraphe situé avant le tableau.

À gauche

Ceci est un paragraphe situé après le tableau.

Un autre paragraphe.

Et encore un paragraphe...

{| class="wikitable centre"
|-
| Au centre
|}
<table class="wikitable centre">
  <tr>
    <td>Au centre</td>
  </tr>
</table>

Ceci est un paragraphe situé avant le tableau.

Au centre

Ceci est un paragraphe situé après le tableau.

Un autre paragraphe.

Et encore un paragraphe...

{| class="wikitable droite"
|-
| À droite
|}
<table class="wikitable droite">
  <tr>
    <td>À droite</td>
  </tr>
</table>

Ceci est un paragraphe situé avant le tableau.

À droite

Ceci est un paragraphe situé après le tableau.

Un autre paragraphe.

Et encore un paragraphe...

Pour empêcher tout ou partie du contenu suivant le tableau d'occuper l'espace à gauche ou à droite du tableau quand les classes gauche ou droite sont utilisées, il suffit d'ajouter un modèle {{Clr}} sur une ligne juste avant le contenu que l'on ne souhaite pas pouvoir voir s'afficher à côté du tableau flottant.

Alignement horizontal du texte[modifier | modifier le code]

Pour aligner le texte dans une cellule du tableau il faut utiliser la propriété de style text-align

style="text-align:left;"
style="text-align:center;"
style="text-align:right;"
Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Positionnement
g
c
d
{| class="wikitable centre"
! scope=col | Positionnement
|-
| style="text-align:left;" | g
|-
| style="text-align:center;" | c
|-
| style="text-align:right;" | d
|}
<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>

Alignement vertical du texte[modifier | modifier le code]

Pour chacune des cellules, il est également possible de positionner le contenu verticalement avec la propriété de style vertical-align

Dans l'exemple qui suit, il y a une cellule (celle de gauche) avec une taille de 150 pixels.

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Position Haut Milieu Bas
{| class="wikitable centre"
! scope=row style="height:150px;" | Position
| style="vertical-align:top;" | Haut
| style="vertical-align:middle;" | Milieu
| style="vertical-align:bottom;" | Bas
|}
<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>

Alignement horizontal et vertical du texte[modifier | modifier le code]

Les différents styles peuvent-être combinés pour placer le texte où l'on veut.

Exemples et rendu
Résultat affiché Wikicode
titre A titre B titre C titre D titre E titre F
hg hd hc md bd ctr
{| 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
|}

border-spacing, cellpadding et margin[modifier | modifier le code]

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: npx;"
cellspacing="n"

Avec la propriété de style border-spacing :

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellule 1 Cellule 2
Cellule 3 Cellule 4
{| 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
|}
<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>
Cellule 1 Cellule 2
Cellule 3 Cellule 4
{| class="wikitable" style="border-collapse:separate; border-spacing:1.5em"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
<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>

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ée 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 style="padding: npx;") :

cellpadding="n"

Avec l'attribut cellpadding :

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellule 1 Cellule 2
Cellule 3 Cellule 4
{| border="1" cellpadding="5"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
<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>
Cellule 1 Cellule 2
Cellule 3 Cellule 4
{| border="1" cellpadding="20"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
<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>

Il existe également la propriété de style CSS style="margin:" 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: npx;"

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

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
blabla
Cellule 1 Cellule 2
Cellule 3 Cellule 4

blabla

blabla
{| class="wikitable" style="margin: 0px;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
blabla
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
blabla
Cellule 1 Cellule 2
Cellule 3 Cellule 4

blabla

blabla
{| class="wikitable" style="margin: 2em;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
blabla
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

Il est possible de définir des valeurs différentes pour chaque côté :

  • 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 côté on peut ne définir que la valeur nécessaire
style="margin: hbpx dgpx;"
style="margin: hpx dpx bpx gpx;"
style="margin-left: gpx;"

width et height[modifier | modifier le code]

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.

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellule
{| class="wikitable" style="width:10px;"
|Cellule
|}
<table class="wikitable" style="width:10px;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
Cellule
{| class="wikitable" style="width:100px;"
|Cellule
|}
<table class="wikitable" style="width:100px;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
Cellule
{| class="wikitable" style="width:10em;"
|Cellule
|}
<table class="wikitable" style="width:10em;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>

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.

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellule
{| class="wikitable centre" style="width:33%;"
|Cellule
|}
<table class="wikitable centre" style="width:33%;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
Cellule
{| class="wikitable centre" style="width:100%;"
|Cellule
|}
<table class="wikitable centre" style="width:100%;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>

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

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Tableau 1
1/3 cellule 1 1/3 cellule 2 1/3 cellule 3
{| 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
|}
<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>
Tableau 2
1/2 1/4 1/4
{| 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
|}
<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>

bgcolor et ligne grise[modifier | modifier le code]

  • bgcolor ou background-color permet de changer la couleur de fond d'une cellule :
bgcolor="#hex"
Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Rouge Vert Bleu
{| class="wikitable centre"
| bgcolor="#FF0000" | Rouge
| bgcolor="#00FF00" | Vert
| bgcolor="#0000FF" | Bleu
|}
<table class="wikitable centre">
  <tr>
    <td bgcolor="#FF0000">Rouge</td>
    <td bgcolor="#00FF00">Vert</td>
    <td bgcolor="#0000FF">Bleu</td>
  </tr>
</table>
  • 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;"
Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Titre 1 Titre 2 vert
Cellule 1 Cellule 2

{| class="wikitable centre"
! scope=col | Titre 1
! scope=col style="background: #00FF00;" | Titre 2 vert
|-
|Cellule 1
|Cellule 2
|}

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



Exemple :

On donne pour attribut à la ligne « Texte1 | Texte2 | Texte3 » : style="height:60px; background:#FFEFE5;" une hauteur (60 pixels) et une couleur (rose) ; les styles séparés étant height:60px; (hauteur) et background:#FFEFE5; (couleur) :

Exemples et rendu
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|-
| Titre A
| Titre B
| Titre C
|- style="height:60px; background:#FFEFE5;"
| Texte1
| Texte2
| Texte3
|}
<table class="wikitable centre">
  <tr>
    <td>Titre A</td>
    <td>Titre B</td>
    <td>Titre C</td>
  </tr>
  <tr style="height:60px; background:#FFEFE5;">
    <td>Texte1</td>
    <td>Texte2</td>
    <td>Texte3</td>
  </tr>
</table>
Titre A Titre B Titre C
Texte1 Texte2 Texte3
  • Le style « alternance » permet d'alterner les couleurs de ligne pour faciliter leur lecture :
{| class="wikitable sortable alternance"
Exemples et rendu
Résultat affiché Codage wiki
Pays Capitale
France Paris
Allemagne Berlin
République galactique Coruscant
Empire romain Rome
{|class="wikitable sortable alternance" 
!Pays
!Capitale
|-
|France || Paris
|-
|Allemagne || Berlin
|-
|République galactique|| Coruscant
|-
|Empire romain || Rome
|}

Propriétés CSS[modifier | modifier le code]

Les propriétés CSS les plus utilisées dans les tableaux sont les suivantes :

background: (ou background-color:)
Couleur d'arrière-plan.
text-align:
Alignement sur l'axe horizontal du contenu.
vertical-align:
Alignement sur l'axe verticale du contenu
color:
Couleur du texte.
border:
Taille, type et couleur des bordures.
width:
Largeur du tableau / des cellules (selon l'utilisation)
Pour tableau : Par défaut : la largeur du tableau s'adapte selon le contenu à l'intérieur du tableau, sans toutefois dépasser la largeur de l'écran (si possible).
height:
Hauteur du tableau / des cellules (selon l'utilisation)
margin:
XXX
padding:
XXX
caption-side:
XXX


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

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellule 1
Cellule 2
Cellule 3
{| class="wikitable centre" style="background: #CCFFCC"
| Cellule 1
|-
| Cellule 2
|-
| Cellule 3
|}
<table class="wikitable centre" style="background: #CCFFCC">
  <tr>
    <td>Cellule 1</td>
  </tr>
  <tr>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
  </tr>
</table>

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

Autre exemple : les coins arrondis.

Exemples et rendu
Résultat affiché Codage wiki Codage HTML
Cellule 1
Cellule 2
Cellule 3
{| align=center style="border: solid 1px black; border-radius: 1em;"
| Cellule 1
|-
| Cellule 2
|-
| Cellule 3
|}
<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>

Questions et problèmes fréquents[modifier | modifier le code]

Mise en forme d'une colonne[modifier | modifier le code]

Il n'existe pas de possibilité à l'heure actuelle d'appliquer en une fois une mise en forme sur l'ensemble des cellules d'une colonne, mis à part la modification de la largeur d'une colonne, qui peut se faire sur la cellule d'en-tête.

Actuellement, seule la largeur de la colonne peut être modifiée en une seule fois pour tout le tableau, avec la propriété CSS width: appliquée avec l'attribut style="" sur l'en-tête de la colonne concernée .

Si une mise en forme spécifique est nécessaire pour une colonne, il faut répéter la mise en forme pour chaque cellule de la colonne, à l'aide d'un attribut de cellule style="".

Exemples pour un arrière-plan jaune sur la 2e colonne
Codage wiki Codage HTML Rendu
{| class="wikitable centre"
|-
| Cellule 1.1
| style="background:yellow;" | Cellule 1.2
| Cellule 1.3
|-
| Cellule 2.1
| style="background:yellow;" | Cellule 2.2
| Cellule 2.3
|-
| Cellule 3.1
| style="background:yellow;" | Cellule 3.2
| Cellule 3.3
|}
<table class="wikitable centre">
  <tr>
    <td>Cellule 1.1</td>
    <td style="background:yellow;">Cellule 1.2</td>
    <td>Cellule 1.3</td>
  </tr>
  <tr>
    <td>Cellule 2.1</td>
    <td style="background:yellow;">Cellule 2.2</td>
    <td>Cellule 2.3</td>
  </tr>
  <tr>
    <td>Cellule 3.1</td>
    <td style="background:yellow;">Cellule 3.2</td>
    <td>Cellule 3.3</td>
  </tr>
</table>
Cellule 1.1 Cellule 1.2 Cellule 1.3
Cellule 2.1 Cellule 2.2 Cellule 2.3
Cellule 3.1 Cellule 3.2 Cellule 3.3

Balises HTML non supportées[modifier | modifier le code]

Les balises HTML <thead>, <tbody>, <tfoot>, <colgroup> et <col> ne sont actuellement pas supportées par MediaWiki, que ce soit en syntaxe wiki ou en code HTML.

Voir phab:T2986 et phab:T6740 pour plus d'informations.

Quelques exemples[modifier | modifier le code]

Quelques exemples de tableaux assez complexes, cependant non-accessibles :

Notes[modifier | modifier le code]

  1. Voir un exemple sur la ligne « Circonscription départementale du Rhône » dans cet article.

Web Content Accessibility Guidelines[modifier | modifier le code]

Voir aussi[modifier | modifier le code]