Aide:Les tableaux pour les curieux

Cet article est en cours de réécriture ou de restructuration importante. Vous êtes invité à en discuter en page de discussion et à participer à son amélioration de préférence en concertation pour des modifications de fond. Consultez l’historique des modifications pour voir les modifications récentes.

Cette page explique les bases de réalisation des tableaux sur Wikipédia, à l'aide de codes spécifiques, interprétés par le logiciel MédiaWiki et transformés en langage HTML.

Des modèles de tableaux simples sont disponibles sur Aide:Les tableaux pour les novices.
Cette page présente les fonctions les plus fréquentes qui intéresseront un wikipédien actif, tant dans son travail encyclopédique, que de gestion de projet/portail, ou de mise en forme de sa page personnelle. Cette page traite uniquement de la syntaxe wiki, la plus employée sur Wikipédia.
Une page d'explication complète, traitant de la syntaxe wiki et HTML, est disponible sur Aide:Les tableaux pour les experts.

Aussi, sur cette page sont présentés : les bases de l'accessibilité, la construction de tableau complexe (chevauchement de cellules : colspan="x" ; rowspan="x" ), le paramétrage des éléments (fonctions: width="x" ; heigh="x" ; ),

[modifier] Quand utiliser un tableau ?

Les tableaux ont deux usages possibles :

• présenter des données ayant plusieurs corrélations entre elles: par exemple, le revenu moyen par pays, par habitant ou l'âge, l'animal de compagnie et la couleur préférée des héros de bande dessinée.
• réaliser un effet de mise en page sans que ce type de relations n'existe entre les informations concernées.

Le détail de la syntaxe à utiliser est différent selon qu'il s'agit d'un tableau de données ou d'un tableau de présentation. Cette différence tient notamment aux problèmes d'accessibilité des tableaux.

[modifier] L'accessibilité des tableaux aux non-voyants

Un tableau est une représentation avant tout visuelle de l'information, où le contenu prend son sens à partir de sa disposition en lignes et en colonnes. Il peut donc s'avérer incompréhensible quand il est lu par la synthèse vocale d'un lecteur d'écran utilisé par une personne aveugle, ou quand il est affiché par un navigateur qui n'a pas la capacité de restituer cette présentation en lignes et en colonnes.

C'est pourquoi les tableaux nécessitent des précautions particulières d'usage et de syntaxe. Pour l'essentiel, elles se résument à deux règles prioritaires :

• Pour des tableaux de données, toujours utiliser la syntaxe adaptée pour indiquer les en-têtes de lignes (! scope=row) et de colonnes (! scope=col). Voir des Exemples ici.
• Pour des tableaux de mise en forme : ne pas utiliser cette syntaxe des en-têtes, et s'assurer que le résultat reste compréhensible quand on lit linéairement le contenu des cellules de gauche à droite, ligne après ligne.

{| 
! Ceci est en gras
| Suite du contenu
|}

{| 
|''' Ceci est en gras'''
| Suite du contenu
|}

{|
|-
|[[Image:...]]
|[[Image: ...]]
|-
|légende de l'image 1
|légende de l'image 2
|}

{|
|[[Image:...]]<br />légende de l'image 1
|[[Image: ...]]<br />légende de l'image 2
|}

Dans le premier exemple, en haut, la syntaxe non accessible (cadre en haut à gauche) mélange un tableau de données et un tableau de présentation : l'utilisateur d'un lecteur d'écran ne saura pas s'il doit chercher à comprendre le contenu comme un tableau logique ou non. La syntaxe accessible (en haut à droite) n'utilise pas d'en-têtes de tableau de données (le code !): elle ne prête pas à confusion.

Dans le second exemple, en haut, la syntaxe non accessible (cadre en bas à gauche) n'aura pas un rendu linéaire compréhensible : la légende de chaque image est complètement séparée de cette dernière. La syntaxe accessible (en bas à droite) évite cette rupture et permet à chaque légende d'être lue immédiatament après l'image à laquelle elle se rapporte.

[modifier] Créer un tableau simple

Rappel vocabulaire

Depuis l'invention des tableurs informatiques, le terme cellule s'est répandu pour désigner une case d'une grille, feuille de calcul ou tableau.

Dans les minutes suivantes, nous allons discuter de la création d'un objet : un tableau.
Une « fonction Â» est un aspect de cet objet. Tandis que « l'attribut (d'une fonction) Â» est le choix que l'on fait pour cet aspect. En gros : chaise (fonction = aspect de l'objet maison) + vert (attribut = choix de la couleur pour les chaises). En programmation, ceci s'écrirait chair="green", car l'anglais basique est la langue qui sert à la programmation. Chaque fonction a plusieurs attributs possibles (ex: #000000, green, orange, #00ff7f ,...), et un attribut par défaut.
Dans les explications qui suivent, les fonctions et leurs attributs seront présentées en vert.

[modifier] Rudiments

{| class=wikitable
|cellule
|}

{| align="center" style="background-color:#3f1f0f"
|cellule
|}

Tableau 1

On ouvre le tableau avec : {| , ceci peut être suivi de paramètres affectant l'ensemble du tableau.
On applique le style wikitable (au tableau) avec : class="wikitable" , l'usage de cette class wikitable, sobre et efficace, est encouragé dans le but harmoniser l'apparence les tableaux dans les articles.
On ouvre une ligne avec : | , que je remplis avec le texte « cellule Â» ;
On ferme le tableau avec : |}

Tableau 2

On aligne le tableau avec : align="x" , ici on le centre grâce à l'attribut center
On applique un autre style (au tableau) avec : style="x" , ici on le colore grâce à l'attribut background-color:#3f1f0f. Cette personnalisation des tableaux est encouragée dans les modèles et sur les pages personnelles, les portails, etc.

Fonction align="x" : les attributs possibles sont left (à gauche), center (centré), right (à droite). Un tableau se positionne par défaut à gauche (attribut: left).
Fonction background-color="x" (« fond-couleur Â») : les attributs possibles sont toute couleur, en hexadecimal (ex: #00ff7f) ou en anglais (ex: #000000, green), voir Aide:Couleur. Le fond d'un tableau est coloré par défaut en blanc (attribut: #000000 ou #000000).

[modifier] Ajouter une colonne / une ligne

Passons maintenant aux tableaux à 2 cellules  :

{|
|cellule1
|cellule2
|}

{| style="background-color:#3f170f"
|cellule1
|-
|cellule2
|}

Pour le tableau à fond blanc, nous avons juste ajouté une nouvelle ligne de codes commençant par un trait vertical | ; cette nouvelle ligne de codes ajoute une cellule au tableau sur la ligne en cours. Pour le tableau à fond gris, nous avons inséré une ligne comportant les codes |- juste avant la ligne définissant la deuxième cellule; ces codes initient une nouvelle ligne de cellules du tableau.

[modifier] Changer la couleur d'une cellule

{| align="right" style="background-color:#3f170f"
|cellule1
|-
|bgcolor=#0f5f5f|<font color=#0f5f5f>rien</font>
|-  
|cellule2
|}

Pour le tableau à fond gris, nous avons également ajouté une troisième cellule sur une nouvelle ligne, mais par un artifice (couleur du texte identique à la couleur du fond), la deuxième cellule se présente comme une cellule vide, et la troisième cellule contient le texte cellule2.

Le changement de couleur du fond d'une unique cellule est obtenu par le paramètre bgcolor= avec l'attribut #007fbf ; cet attribut est une valeur numérique, qui ne nécessite pas l'emploi de guillemets ; le séparateur | et le texte de la cellule suit obligatoirement ce ou ces paramètre(s) sur la même ligne : sinon, ceux-ci seraient interprétés comme du texte ordinaire.

Nous remarquons que la cellule rouge est bordée de deux lignes verticales grises ; en effet, les cellules sont légèrement espacées par défaut, et la cellule rouge ne recouvre donc pas complètement la couleur de fond du tableau sur sa propre ligne.

[modifier] L'alignement horizontal

{| align="right" style="background-color:#3f170f"
|cellule1
|-
|cellule2
|}

Nous pouvons remarquer que nous avons changé l'alignement du tableau à fond gris, ce qui a permis de le placer directement à droite du texte (NB: un tableau aligné à gauche ou centré ne s'entoure pas de texte).

[modifier] La fusion de cellules

[modifier] Horizontalement...

{| cellspacing=5 style="background-color:#3f170f"
|bgcolor=#0f5f5f|cellule1
|bgcolor=#0f5f5f|cellule2
|-  
|bgcolor=#5f005f colspan=2|<center>cellule3</center>
|}

Ceci s'obtient avec le paramètre colspan=, suivi du nombre de colonnes que doit occuper la cellule concernée ; ici 2. La couleur de fond de la cellule 3 a été modifiée, et son texte centré (code HTML), afin de mieux visualiser le résultat.

[modifier] ... et verticalement

{| cellpadding=6
!bgcolor=#0f5f5f|cellule1
|bgcolor=#9f5f00 rowspan=3|cellule2
|-  
|bgcolor=#5f005f colspan=2|<center>cellule3</center>
|-
|cellule4
|}

Une cellule peut également s'étendre verticalement au moyen du paramètre rowspan=, suivi du nombre de lignes que doit occuper la cellule concernée.

Pour rendre les codes qui nous intéressent plus lisibles, nous revenons au fond de tableau par défaut (blanc). Ce tableau présente les particularités suivantes :

• les marges entre les 4 bords de chaque cellule et son texte sont augmentées au moyen du paramètre cellpadding=, suivi de la valeur de la marge en pixels, ici 6 ;
• le texte de la cellule 1 est en gras ; ceci s'obtient en remplaçant le caractère | de début de ligne par le caractère ! ; ainsi, cette cellule est considérée comme un en-tête, avec un texte automatiquement centré et mis en caractères gras ;
• la cellule 2, à présent de couleur bleue, s'étend sur 3 lignes ; son texte cellule 2 est centré verticalement, et apparaîtrait sur la deuxième ligne du tableau si la zone concernée n'était pas recouverte par la cellule 3.

[modifier] Spécifier la taille d'un tableau

{| border="8" height="160" width="160"
!bgcolor=\"#0f5f5f"|cellule1
!bgcolor=\"#9f5f00" rowspan="3" valign="bottom"|cellule2
|-  
|bgcolor=\"#5f005f"|cellule3
|-
|cellule4
|}

Il est possible de définir la dimension d'un tableau en pixels à l'aide des paramètres height= et width=, suivis de la dimension en pixels.

Les mêmes paramètres peuvent être appliqués aux lignes et aux cellules, sachant qu'une même dimension ajustée à l'aide de deux paramètres se calera sur la plus grande valeur des attributs de ces paramètres.

[modifier] Exemple bilan : wikitable

Le tableau ci-dessous est un bilan à utiliser comme mémo. Il y a au moins une fois chaque fonction souvent nécessaire (width, valign, colspan, rowspan); à vous d'observer comment ce tableau est codé, et de combiner les fonctions pour créer le tableau de votre choix.

{| class="wikitable" width="80%" align="center"
|+ Mémo
! colspan="3"| Les sinogrammes dans le monde
|-
!width="33%"| Pays ||width="33%"| Population || Sinogrammes
|- valign="top"
| Chine (RPC) || 1.3 milliards || Simplifiés<br/>
(En fait des variantes d'usage ancien)
|-
|| Taïwan || 23 millions ||rowspan="2"| Traditionnels
|-
| Hongkong || 6 millions
|-
! colspan="3"| Source : [http://insee.org/Stat/Sino Insee.org]
|}

Fonctions clefs

Pour définir la largeur d'un élément, on utilise la fonction width="x%"  : en début de tableau {| widht="100px", de cellule ||width="50px"|. La largeur est le plus souvent exprimée en px et en %. Les % sont recommandés car s'adaptant a l'écran du lecteur.
Pour définir l'alignement vertical du texte, on utilise la fonction valign="x" : tableau {| valign="top" , ligne |- valign="top", case ||valign="top"| . Les valeurs possibles sont top et bottom
Pour fusionner horizontalement x cellules, on utilise la fonction colspan="x" (colonnes expansion x): ||colspan="2"|. La 1ère cellule à gauche doit être paramétrée, l'extension se fait en mangeant les cellules de droite. Les cellules mangées ne doivent pas être présentes dans votre code. Aussi, si votre tableau fait 3 cases de large, pour obtenir [__|_], définir vos cellules telles que :

|-
||colspan="2"| Première cellule (double car "2") | Dernière cellule (simple)

Pour fusionner verticalement x cellules, on utilise la fonction rowspan="x" (étage expansion x): ||rowspan="2"|. La 1ère cellule du haut doit être paramétrée, l'extension se fait vers le bas. Les cases mangées ne doivent pas être présentes dans votre code.

[modifier] Exemple bilan : tableaux triables

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 entêtes. Le code JavaScript wikibits.js qui permet le tri est copié sur les serveurs de Wikipédia. Une aide supplémentaire se trouve sur en:Help:Sorting.

{|class="wikitable sortable"
|+ Benelux
! Pays || Rang || Population || Date du relevé ||class="unsortable"| Non triable
|-
| Pays-bas || 1 || 16.500.000 || 2003 || Cette
|-
| Belgique || 2 || 10 millions || 2007 || Colonne
|-
| Luxembourg || 3 || 0.5 millions ||  || est fixe.
|-class="sortbottom"
! Benelux ||  || Total: 27 M || || 
|}

Fonctions nouvelles

Toutes les colonnes deviennent triables lors que le tableau est classé par : {| class="wikitable sortable"
Une colonne devient fixe et non triable lorsqu'on lui spécifie : ||class="unsortable"|
Une ligne devient fixe et non triable lorsqu'on lui spécifie : |- class="sortbottom"
Les totaux ne sont pas calculés automatiquement, ils sont entrés à la main par l'auteur du tableau.

Limites connues

Le tri peut être faussé par des accents, etc, ... Deux modèles sont destinés à faciliter les tris. Le modèle {{smn}} pour les colonnes de nombres et le modèle {{tri}} pour les chaînes de caractères. Ces modèles permettent de trier des colonnes avec des clefs de tri différentes des valeurs affichées.

Les tables ayant des cellules s'étalant sur plusieurs lignes (rowspan) ou colonnes (colspan) ou ayant des cellules manquantes en fin de ligne peuvent ne pas se trier correctement.

[modifier] Voir aussi

• Projet:Charte graphique, le projet qui concerne la Wikipédia francophone et en particulier Projet:Charte graphique/Apparence des tableaux pour une forme normalisée de l'apparence des tableaux.