Si vous voulez mettre en forme des tableaux avec du wikitexte, vous avez de nombreuses possibilités. Cette page ne les détaillera pas toutes, mais elle vous montrera comment le wikitexte correspond au balisage HTML, la différence que fait une classe CSS et un exemple de tableau simple qui fonctionne à la fois sur les ordinateurs de bureau et les appareils mobiles.

Code de tableau simple[modifier le wikicode]

Le Wikitexte est, à bien des égards, une manière simplifiée d'écrire du HTML. Si vous êtes familier avec le HTML, vous savez probablement déjà comment construire un tableau en wikitexte. Voici un tableau qui vous aidera à comprendre le lien entre wikitexte et HTML :

Description Vous écrivez
Début de tableau
(équivalent à <table>)
{|
Début de ligne de tableau
(équivalent à <tr>)
|-
En-tête de tableau (partie de ligne ; équivalent à <th>) ! ou !!
Cellule de tableau (partie de ligne ; équivalent à <td>) | ou ||
Fin de tableau
(équivalent à </table>)
|}

Classes CSS par défaut de Fandom[modifier le wikicode]

Au fin fond du code de Fandom se trouvent deux classes que vous pouvez mettre au tout début de votre tableau. Quel que soit le wiki sur lequel vous vous trouvez, il y a toujours un formatage par défaut pour .article-table et .wikitable. Si vous utilisez le mode visuel de l'ÉditeurVisuel ou de l'éditeur classique, .article-table sera automatiquement ajouté afin que la structure de base de votre tableau soit :


{| class = "article-table"
…
|}

Mais il y a des cas où vous pourriez envisager d'utiliser .wikitable — ou aucune classe — à la place. Voici à quoi ils ressemblent tous sur un wiki complètement non personnalisé :

Avec .article-table vous obtenez un visuel plus clair

Sur les wiki UCP, .article-table a une apparence légèrement différente, toutes les cellules ayant le même arrière-plan

Avec .wikitable vous obtenez une plus grande définition de chaque cellule

Sans classe CSS, vous n'obtenez aucune bordure, ni d'arrière-plan au niveau de l'en-tête

Si vous stylisez des tableaux avec la personnalisation du CSS, il est souvent préférable de cibler la classe .article-table pour styliser les tableaux qui utilisent déjà la classe, car celle-ci est la classe par défaut.

Techniquement, une autre classe de table par défaut existe sur Fandom, appelée .WikiaTable. Cependant, si elle n'est pas modifiée par les déclarations CSS locales, elle fournit exactement le même style que .article-table

Tableaux simples[modifier le wikicode]

Comme expliqué ailleurs, les tableaux ne s'affichent pas toujours bien en navigation mobile.

La meilleure approche est de garder les choses aussi simples que possible. Regardez le wikitexte suivant, puis remarquez, sur votre téléphone, comment le tableau fonctionne sur ce petit écran :

{| class = "article-table"
!Page
!Rang 1
!Rang 2
!Rang 3
|-
|Page A
|1
|2
|3
|-
|Page B
|1
|2
|3
|-
|Page C
|2
|3
|4
|}

…Ce qui donne :

Page Rang 1 Rang 2 Rang 3
Page A 1 2 3
Page B 1 2 3
Page C 2 3 4

Codage plus avancé des tableaux[modifier le wikicode]

Les tableaux peuvent être rendus beaucoup plus avancés que l'exemple ci-dessus. Si vous souhaitez explorer d'autres options pour les tableaux wikitextes, vous pouvez commencer par consulter la page d'aide de MediaWiki pour les tableaux. Mais n'oubliez pas qu'une grande partie de ce que vous verrez dans des endroits comme mediawiki.org ou la page d'aide de Wikipedia ne tient pas vraiment compte des effets des tableaux sur mobile. Il est important de toujours vérifier votre travail avec des tableaux sur un vrai téléphone pour voir s'il s'affiche bien pour les nombreux lecteurs mobiles de votre wiki.

Il est également possible, dans certains cas d'utilisation spécifiques où les données doivent être calculées, d'utiliser des modèles ou même d'utiliser des modèles basés sur Lua, à la fois pour créer des structures de tableaux préexistantes, ou pour utiliser des modèles à l'intérieur des cellules.

Voir aussi[modifier le wikicode]

Plus d'aide

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.