Utilisateur:Supertoff/Accessibilité des tableaux

Pourquoi l'accessibilité et pourquoi cette aide ?

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

• 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

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

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

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

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

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

À ne pas faire

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

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

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

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

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

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

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

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

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

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

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

Gras

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

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

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, mise en forme

Les couleurs, le gras, l'italique peuvent être employées dans les tableaux en veillant cependant à :

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

À ne pas faire

Dans l'exemple ci-dessous, la couleur et la mise en forme associées à la légende ne sont pas accessibles. 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, en italique et en gras 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, en italique et en gras les cases importantes.

Ce qu'il faut faire par exemple

Dans l'exemple ci-dessous, le gras, l'italique, et la couleurs, associés à une abréviation (via un modèle), sont accessibles. Le contraste de la dernière colonne est bon :

{| class="wikitable"
|+ Exemple
|-
| ligne 1/colonne 1 || bgcolor="gold" | '''{{abréviation|ligne 1/colonne 2|accessibilité correcte}}''' || style="background: #0000ff; color: #ffffff;" | ligne 1/colonne 3
|-
| bgcolor="gold" | ''{{abréviation|ligne 2/colonne 1|accessibilité correcte}}'' || 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

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;" | ''{{abréviation|ligne 2/colonne 1|accessibilité correcte}}'' || 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;" | ''{{abréviation|ligne 3/colonne 2|accessibilité correcte}}'' || 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

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

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

Atelier accessibilité

• l'atelier accessibilité et ses bonnes pratiques.

Aide plus complète sur les tableaux

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

Gadget accessibilité

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

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

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

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

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

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