Utilisateur:Supertoff/Accessibilité des tableaux

Pourquoi l'accessibilité et pourquoi cette aide ? modifier

L'accessibilité permet aux personnes en situation de handicap d'avoir accès à l'essentiel des informations disponibles dans un article. Par exemple pour les personnes qui utilisent un lecteur d'écran, les daltoniens, etc.

Ayant souvent croisé des articles non accessibles dans les processus de labellisation, j'ai remarqué que les tableaux de données étaient la partie la plus difficile à expliquer et qu'il me fallait souvent réexpliquer aux contributeurs de bonne volonté mais souvent un peu perdus entre les différentes aides, comme faire des tableaux accessibles. J'ai donc tenté ici, de résumer les bases qui devraient suffire à rendre accessible les tableaux les plus simples. Cette aide ne se veut pas exhaustive mais se veut la plus basique possible, à l'aide d'exemples simples, et en essayant d'éviter d'entrer dans des détails trop techniques.

Codes de base pour créer un tableau simple modifier

  • Début de tableau : {| (accolade ouvrante, pipe)
  • Début de ligne : | (pipe)
  • Séparation entre deux colonnes : || (double pipe)
  • Séparation entre deux lignes : |- (pipe, moins)
  • Fin de tableau : |} (pipe, accolade fermante)

Exemple modifier

Le code suivant :

{| class="wikitable"
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}

donne le tableau suivant :

ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3

Nota : class="wikitable" me sert à afficher facilement un quadrillage du tableau, je l'emploierai dans le reste de cette page.

Titre et sous-titre de tableau modifier

Les tableaux de données doivent posséder un titre. Mais une erreur fréquente est d'utiliser la première ligne du tableau, de fusionner toutes les colonnes, et d'y insérer le titre du tableau. De même, pour insérer un sous-titre, la même erreur est reproduite au milieu du tableau.

  À ne pas faire modifier

Le code suivant :

{| class="wikitable"
| colspan="3" align="center" | 1ère partie
|-
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|-
| colspan="3" align="center" | 2ème partie
|-
| ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|-
| ligne 4/colonne 1 || ligne 4/colonne 2 || ligne 4/colonne 3
|}

donne :

1ère partie
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
2ème partie
ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3
ligne 4/colonne 1 ligne 4/colonne 2 ligne 4/colonne 3

Nota : colspan sert à fusionner les colonnes.

  Ce qu'il faut faire modifier

Pour créer un titre de tableau, il existe un code spécifique : |+ (pipe, plus) qui doit impérativement être employé. Si un titre intermédiaire est nécessaire, il faut alors séparer le tableau en deux tableaux distincts, chacun avec son titre. Voici le code correct pour le tableau précédent :

{| class="wikitable"
|-
|+ 1ère partie
|-
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
{| class="wikitable"
|+ 2ème partie
|-
| ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|-
| ligne 4/colonne 1 || ligne 4/colonne 2 || ligne 4/colonne 3
|}

qui donne :

1ère partie
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
2ème partie
ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3
ligne 4/colonne 1 ligne 4/colonne 2 ligne 4/colonne 3
Il ne faut pas mettre deux titres consécutifs pour un même tableau car seul le premier sera pris en compte.

En-têtes de colonnes et de lignes modifier

Un tableau de données doit comporter, à minima, des en-têtes de colonnes ou des en-têtes de lignes et, à maxima, les deux. Ces en-têtes doivent comporter un code particulier sinon ils ne sont pas compris comme des en-têtes.

Avec un en-tête modifier

  À ne pas faire modifier

Le code suivant :

{| class="wikitable"
|+ 1ère partie
|-
| align="center" | '''colonne 0''' || align="center" | '''colonne 1''' || align="center" | '''colonne 2''' || align="center" | '''colonne 3'''
|-
| '''ligne 1''' || ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| '''ligne 2''' || ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
{| class="wikitable"
|+ 2ème partie
|-
| align="center" | '''colonne 0''' || align="center" | '''colonne 1''' || align="center" | '''colonne 2''' || align="center" | '''colonne 3'''
|-
| '''ligne 3''' || ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|-
| '''ligne 4''' || ligne 4/colonne 1 || ligne 4/colonne 2 || ligne 4/colonne 3
|}

donne :

1ère partie
colonne 0 colonne 1 colonne 2 colonne 3
ligne 1 ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
2ème partie
colonne 0 colonne 1 colonne 2 colonne 3
ligne 3 ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3
ligne 4 ligne 4/colonne 1 ligne 4/colonne 2 ligne 4/colonne 3

  Ce qu'il faut faire modifier

Les codes spécifiques doivent être employés :

  • ! scope="col" | pour un en-tête de colonne.
  • ! scope="row" | pour un en-tête de ligne.

Notez ici l'emploi d'un point d'exclamation en lieu et place du pipe en début de code. Ils doivent être placés de la manière suivante :

  • ! scope="col" | entre le titre et la première ligne de données.
  • ! scope="row" | avant chaque ligne de données.

Le code suivant :

{| class="wikitable"
|+ 1ère partie
|-
! scope ="col" | colonne 0
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 1
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
! scope ="row" | ligne 2
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
{| class="wikitable"
|+ 2ème partie
|-
! scope ="col" | colonne 0
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 3
| ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|-
! scope ="row" | ligne 4
| ligne 4/colonne 1 || ligne 4/colonne 2 || ligne 4/colonne 3
|}

donne :

1ère partie
colonne 0 colonne 1 colonne 2 colonne 3
ligne 1 ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
2ème partie
colonne 0 colonne 1 colonne 2 colonne 3
ligne 3 ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3
ligne 4 ligne 4/colonne 1 ligne 4/colonne 2 ligne 4/colonne 3

Nota : les résultats sont similaires pour un lecteur lambda, mais en terme d'accessibilité, ça n'est pas le cas.

Avec en-têtes de ligne ou de colonne en double modifier

Il ne faut pas mettre deux "scope" pour une même colonne ou une même ligne car seul l'un des deux sera pris en compte.

Cependant, pour une raison de présentation, il est parfois utile de mettre deux en-têtes de colonnes et/ou de lignes. Dans ce cas, il faut utiliser un seul "scope" et pour un des en-têtes et donner « l'aspect d'un en-tête » au deuxième, c'est à dire lui donner le même format (gras, couleur de fond).

  À ne pas faire modifier

Le code suivant :

{| class="wikitable"
|+Tableau incorrect
! scope="col" colspan ="2" | Saison régulière
! scope="col" colspan ="2" | Séries éliminatoires
|-
! scope="col" | Buts
! scope="col" | Aides
! scope="col" | Buts
! scope="col" | Aides
|}

donne :

Tableau incorrect
Saison régulière Séries éliminatoires
Buts Aides Buts Aides

  Ce qu'il faut faire modifier

Le code suivant :

{| class="wikitable"
|+Tableau correct
| colspan ="2" style="background-color: #eaecf0; text-align:center;" | '''Saison régulière'''
| colspan ="2" style="background-color: #eaecf0; text-align:center;" | '''Séries éliminatoires'''
|-
! scope="col" | {{abréviation discrète|Buts|Buts en saison régulière}}
! scope="col" | {{abréviation discrète|Aides|Aides en saison régulière}}
! scope="col" | {{abréviation discrète|Buts|Buts en séries éliminatoires}}
! scope="col" | {{abréviation discrète|Aides|Aides en séries éliminatoires}}
|}

donne :

Tableau correct
Saison régulière Séries éliminatoires
Buts Aides Buts Aides

Un lecteur lambda sait que tout le terme but se rapporte à ce qui est écrit au-dessus : saison régulière ou séries éliminatoires. Avec un lecteur d'écran, s'il n'est pas précisé explicitement (ici grâce au modèle abréviation) à quoi le terme but se rapporte, une personne en situation de handicap ne lirait que "but" à deux reprises, sans savoir de quelle partie il s'agit.

Abréviations modifier

Les abréviations ne sont pas toujours explicites pour tous les lecteurs (même en dehors des problèmes d'accessibilité). Par exemple : que veut dire A pour quelqu'un qui ne s'intéresse pas au hockey sur glace ? Il faut donc faire en sorte d'expliciter ces abréviations.

  À ne pas faire modifier

Pour prendre un exemple du hockey sur glace :

{| class="wikitable"
|+ Résultats
! scope="col" | PJ
! scope="col" | B
! scope="col" | A
! scope="col" | Pts
|-
| 5 || 1 || 2 || 3
|}
Résultats
PJ B A Pts
5 1 2 3

  Ce qu'il faut faire modifier

Utiliser les modèles {{abréviation}} et {{abréviation discrète}}, ou utiliser les liens internes (attention à ne pas utiliser directement les redirections : par exemple ne pas utiliser [[SNCF]] mais [[Société nationale des chemins de fer français|SNCF]]) :

{| class="wikitable"
|+ Résultats
! scope="col" | {{abréviation|PJ|Parties jouées}}
! scope="col" | [[But|B]]
! scope="col" | {{abréviation discrète|A|Aides}}
! scope="col" | {{abréviation discrète|Pts|Points}}
|-
| 5 || 1 || 2 || 3
|}
Résultats
PJ B A Pts
5 1 2 3

Tableaux côte à côte modifier

La solution la plus régulièrement employée et qui est prohibée, est d'imbriquer les tableaux dans un autre tableau. Il existe pourtant des solutions pour mettre des tableaux l'un à côté de l'autre.

  À ne pas faire modifier

Imbriquer des tableaux. Je ne mettrais pas d'exemple ici puisque plusieurs solutions sont possibles et qu'il ne faut pas les employer.

  Ce qu'il faut faire modifier

Il faut, par exemple, employer la classe gauche en début de chaque tableau : {| class="gauche", associée au code {{clr}} après le dernier tableau :

{| class="wikitable gauche"
|+Tableau 1
|-
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
{| class="wikitable gauche"
|+Tableau 2
|-
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
{| class="wikitable gauche"
|+Tableau 3
|-
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
{{clr}}

ce qui donne :

Tableau 1
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
Tableau 2
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
Tableau 3
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3

Nota : ne pas oublier de placer le code {{clr}} après le dernier tableau sinon le texte qui suit se place à côté du tableau au lieu de se trouver en-dessous.

Mise en forme modifier

Gras modifier

Le code wiki pour mettre un texte en gras est l'emploi de l'apostrophe droite à trois reprises avant et après chaque texte. Il ne faut pas utiliser le point d'exclamation pour mettre en gras toute une ligne. Le point d'exclamation, comme vu plus haut, s'emploie avec les codes de en-têtes de colonne et de ligne.

  À ne pas faire modifier

Le code suivant :

{| class="wikitable"
|+ Exemple
|-
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
! ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}

donne :

Exemple
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3

  Ce qu'il faut faire modifier

Le code suivant :

{| class="wikitable"
|+ Exemple
|-
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
| '''ligne 2/colonne 1''' || '''ligne 2/colonne 2''' || '''ligne 2/colonne 3'''
|}

donne :

Exemple
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3

Couleurs modifier

Les couleurs peuvent être employées dans les tableaux en veillant cependant à :

  • Ne pas véhiculer une information uniquement par la couleur
  • Employer des contrastes suffisants entre le texte et la couleur de fond

  À ne pas faire modifier

Dans l'exemple ci-dessous, la couleur associée à la légende n'est pas accessible. Le contraste de la dernière colonne est insuffisant :

{| class="wikitable"
|+ Exemple
|-
| ligne 1/colonne 1 || bgcolor="gold" | ligne 1/colonne 2 || style="background: #0000ff;" | ligne 1/colonne 3
|-
| bgcolor="gold" | ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
*Légende : en jaune, les cases importantes.

ce qui donne :

Exemple
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
  • Légende : en jaune, les cases importantes.

  Ce qu'il faut faire modifier

Dans l'exemple ci-dessous, le gras et l'italique, associés à la légende, sont accessibles. Le contraste de la dernière colonne est bon :

{| class="wikitable"
|+ Exemple
|-
| ligne 1/colonne 1 || bgcolor="gold" | '''ligne 1/colonne 2''' || style="background: #0000ff; color: #ffffff;" | ligne 1/colonne 3
|-
| bgcolor="gold" | ''ligne 2/colonne 1'' || ligne 2/colonne 2 || ligne 2/colonne 3
|}
*Légende : en gras et en italique, les cases importantes.

ce qui donne :

Exemple
ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
  • Légende : en gras et en italique, les cases importantes.

Finalement, un exemple concret modifier

Voici finalement, un exemple concret et accessible de tout ce qui a été décrit précédemment :

{| class="wikitable gauche"
|+ 1ère partie du 1er tableau
|-
! scope ="col" | colonne 0
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 1
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
! scope ="row" | ligne 2
| style="background: #0000ff; color: #ffffff;" | ''ligne 2/colonne 1'' || ligne 2/colonne 2 || ligne 2/colonne 3 
|}
{| class="wikitable gauche"
|+ 1ère partie du 2ème tableau
|-
! scope ="col" | colonne 0
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 1
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
! scope ="row" | ligne 2
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|}
{{clr}}
{| class="wikitable gauche"
|+ 2ème partie du 1er tableau
|-
! scope ="col" | colonne 0
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 3
| ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|-
! scope ="row" | ligne 4
| ligne 4/colonne 1 || ligne 4/colonne 2 || ligne 4/colonne 3
|}
{| class="wikitable gauche"
|+ 2ème partie du 2ème tableau
|-
! scope ="col" | colonne 0
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 3
| ligne 3/colonne 1 || style="background: #0000ff; color: #ffffff;" | ''ligne 3/colonne 2'' || ligne 3/colonne 3
|-
! scope ="row" | ligne 4
| ligne 4/colonne 1 || ligne 4/colonne 2 || ligne 4/colonne 3
|}
{{clr}}
*Légende : en italique, informations importantes.

qui donne :

1ère partie du 1er tableau
colonne 0 colonne 1 colonne 2 colonne 3
ligne 1 ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
1ère partie du 2ème tableau
colonne 0 colonne 1 colonne 2 colonne 3
ligne 1 ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
2ème partie du 1er tableau
colonne 0 colonne 1 colonne 2 colonne 3
ligne 3 ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3
ligne 4 ligne 4/colonne 1 ligne 4/colonne 2 ligne 4/colonne 3
2ème partie du 2ème tableau
colonne 0 colonne 1 colonne 2 colonne 3
ligne 3 ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3
ligne 4 ligne 4/colonne 1 ligne 4/colonne 2 ligne 4/colonne 3
  • Légende : en italique, informations importantes.

Nota : l'astuce pour pouvoir afficher ces tableaux comme ceci est de d'abord afficher les premières parties des deux tableaux, puis les deuxièmes parties (et non pas les deux parties du tableau 1 puis les deux parties du tableau 2) : en gros on code horizontalement, pas verticalement. Mais je ne sais pas si je suis bien clair...

Pour aller plus loin modifier

Pour ceux qui veulent approfondir le sujet, voici quelques astuces complémentaires pour aller plus loin dans les tableaux et dans l'accessibilité.

Aides et outils modifier

Vous pouvez déjà visiter ces pages d'aides qui m'ont fortement aidé à mes débuts :

Atelier accessibilité modifier

Aide plus complète sur les tableaux modifier

  • aide:Tableau pour connaître encore plus de syntaxe sur les tableaux.

Gadget accessibilité modifier

Pour vérifier les problèmes d'accessibilité, un gadget existe : dans vos préférences, onglet gadgets, section Maintenance : cocher Accessibilité. Attention, ce gadget n'est qu'une aide, il ne détecte pas tous les problèmes d'accessibilité (mais il est quand même d'une très grande utilité et je ne saurais m'en passer, merci à son créateur).

Astuces modifier

Mettre une ligne complète en gras en un tour de main modifier

Si ça vous énerve de mettre des apostrophes droites pour chaque case du tableau :

  • Avant la ligne à mettre en gras, remplacer le code |- par le code : |- style="font-weight: bold;"
{| class="wikitable"
|+ Exemple
|-
! scope ="col" | 
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 1
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|- style="font-weight: bold;"
! scope ="row" | ligne 2
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|-
! scope ="row" | ligne 3
| ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|}
Exemple
colonne 1 colonne 2 colonne 3
ligne 1 ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
ligne 3 ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3

Créer une alternance de couleur automatique entre les lignes modifier

Pour éviter de donner alternativement et manuellement une couleur à chaque ligne :

  • Au début du tableau, insérer la classe alternance : {| class="alternance"
{| class="wikitable alternance"
|+ Exemple
|-
! scope ="col" | 
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 1
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
! scope ="row" | ligne 2
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|-
! scope ="row" | ligne 3
| ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|}
Exemple
colonne 1 colonne 2 colonne 3
ligne 1 ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
ligne 3 ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3
  • Pour inverser l'ordre des couleurs, utiliser la classe : {| class="alternance2"
{| class="wikitable alternance2"
|+ Exemple
|-
! scope ="col" | 
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 1
| ligne 1/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
! scope ="row" | ligne 2
| ligne 2/colonne 1 || ligne 2/colonne 2 || ligne 2/colonne 3
|-
! scope ="row" | ligne 3
| ligne 3/colonne 1 || ligne 3/colonne 2 || ligne 3/colonne 3
|}
Exemple
colonne 1 colonne 2 colonne 3
ligne 1 ligne 1/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 ligne 2/colonne 1 ligne 2/colonne 2 ligne 2/colonne 3
ligne 3 ligne 3/colonne 1 ligne 3/colonne 2 ligne 3/colonne 3

Aligner le texte modifier

Pour améliorer la présentation, le texte peut être aligné à gauche, à droite ou centré. Par défaut, le texte est aligné à gauche. Dans les exemples qui suivent, le XXXXX devra être remplacé, au choix, par left, center ou right.

  • Pour aligner tout un tableau :
    • Indiquer l'alignement en tout début de tableau grâce au code style="text-align: XXXXX;".
  • Pour aligner une ligne :
    • Avant la ligne, remplacer le code |- par le code |-align="XXXXX".
  • Pour aligner une seule cellule
    • Dans la cellule, insérer le code align="XXXXX" | (le pipe qui suit est important, il sépare l'alignement de la valeur de la cellule du tableau).

Par exemple, les cellules de ce tableau sont centrées sauf la deuxième ligne qui est alignée à gauche et la deuxième cellule de la troisième ligne alignée à droite :

{| class="wikitable" style="text-align: center;"
|+ Exemple
|-
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
| texte centré par défaut || texte centré || texte centré
|-align="left"
| aligné à gauche || à gauche || à gauche
|-
| texte centré || align="right" | à droite || centré
|}

ce qui donne :

Exemple
colonne 1 colonne 2 colonne 3
texte centré par défaut texte centré texte centré
aligné à gauche à gauche à gauche
texte centré à droite centré

Fusionner des lignes ou des colonnes modifier

Il est utile parfois de fusionner des lignes et/ou des colonnes. Deux codes spécifiques existent (x étant le nombre de lignes/colonnes à fusionner) :

  • colspan="x", pour les fusions de colonnes
  • rowspan="x", pour les fusions de lignes

Par exemple :

{| class="wikitable"
|+ Exemple
|-
! scope ="col" | 
! scope ="col" | colonne 1
! scope ="col" | colonne 2
! scope ="col" | colonne 3
|-
! scope ="row" | ligne 1
| rowspan="2" | lignes 1 et 2/colonne 1 || ligne 1/colonne 2 || ligne 1/colonne 3
|-
! scope ="row" | ligne 2
| colspan="2" rowspan="2" | lignes 2 et 3/colonnes 2 et 3
|-
! scope ="row" | ligne 3
| ligne 3/colonne 1
|}

ce qui donne :

Exemple
colonne 1 colonne 2 colonne 3
ligne 1 lignes 1 et 2/colonne 1 ligne 1/colonne 2 ligne 1/colonne 3
ligne 2 lignes 2 et 3/colonnes 2 et 3
ligne 3 ligne 3/colonne 1