Aide:Tableau pour initiés
Cette page explique les bases de réalisation des tableaux sur WikiGenWeb, à l'aide de codes spécifiques, interprétés par le logiciel MediaWiki et transformés en langage HTML.
Des modèles de tableaux simples sont disponibles sur Tableau pour débutant.
Cette page présente les fonctions les plus fréquentes qui intéresseront un Webgenien actif, tant dans son travail de généalogiste, que de gestion de projet/portail, ou de mise en forme de sa page personnelle.
Elle traite uniquement de la syntaxe wiki, la plus employée sur WikiGenWeb.
Une page d'explication complète, traitant de la syntaxe wiki et HTML, est disponible sur Aide:Tableau pour expert. Elle vous sera en particulier utile si vous utilisez à la fois un tableau et les [http://www.mediawiki.org/wiki/Help:Extension:ParserFunctions fonctions parseurs] dans un modèle.
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" ; height="x"),
| Recommandation importante |
|---|
Pour :
|
Sommaire
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.
Ci-dessous, 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 chaise="green", car l'anglais basique est la langue qui sert à la programmation. Chaque fonction a plusieurs attributs possibles (exemple : white, green, orange, #FF0080,…), et un attribut par défaut.
Dans les explications qui suivent, les fonctions et leurs attributs seront présentées en vert.
Rudiments
| Codage wiki | Résultat affiché | |
|---|---|---|
{| class="wikitable-right"
|cellule dans un tableau à droite
|}
|
| |
{| class="wikitable-center" style="background-color:#C0E0F0"
|cellule dans un tableau centré
|}
|
|
- Tableau 1
On ouvre le tableau avec : {| , ceci peut être suivi de paramètres affectant l'ensemble du tableau.
On applique le style (classe CSS en fait) wikitable (au tableau) avec : class="wikitable-right" , l'usage de la classe wikitable et de ses dérivées (wikitable-left, wikitable-center, wikitable-right), sobre et efficace, est recommandé dans le but d'harmoniser l'apparence des tableaux dans les articles.
Attention : ne pas utiliser les attributs HTML : ALIGN / FLOAT lors de l'emploi de "wikitable".
On ouvre une ligne avec : |, qu'on remplit avec le texte « cellule » ;
On ferme le tableau avec : |}
- Tableau 2
On aligne le tableau avec : class="wikitable-center"
On applique un autre style (au tableau) avec : style="x" , ici on le colore grâce à l’attribut background-color:#C0E0F0. Cette personnalisation des tableaux est encouragée dans les modèles et sur les pages personnelles, les portails, etc.
Fonction style="background-color:x" (« fond-couleur ») : les attributs possibles sont toute couleur, en hexadécimal (exemple : #FF0080) ou en anglais (exemple : white, green), voir Aide:Couleur. Le fond d'un tableau est coloré par défaut en blanc (attribut : white ou #FFFFFF).
Ajouter une colonne / une ligne
Passons maintenant aux tableaux à 2 cellules :
| Codage wiki | Résultat affiché | ||
|---|---|---|---|
{|
|cellule1
|cellule2
|}
|
| ||
{| style="background-color:#c0e8f0"
|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.
Changer la couleur d'une cellule
| Codage wiki | Résultat affiché | |||
|---|---|---|---|---|
{| class="wikitable-left" style="background-color:#c0e8f0"
|cellule1
|-
!style="background:#f0a0a0;Color:#f0a0a0|rien
|-
|cellule2
|}
Ici nous trouvons le texte suivant le tableau.
|
|
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 background-color: avec l'attribut #f0a0a0 ; 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 rose 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.
L'alignement horizontal
| Codage wiki | Résultat affiché | ||
|---|---|---|---|
{| class="wikitable-right" style="background-color:#c0e8f0"
|cellule1
|-
|cellule2
|}
Ici nous trouvons le texte suivant le tableau.
|
|
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é centré ne s'entoure pas de texte).
La fusion de cellules
Horizontalement...
| Codage wiki | Résultat affiché | ||||
|---|---|---|---|---|---|
{| cellspacing=5 style="background-color:#c0e8f0"
!style="background:#f0a0a0;"|cellule1
!style="background:#f0a0a0;"|cellule2
|-
|colspan=2 style="background:#a0ffa0;text-align:center;"|cellule3
|}
|
| ||||
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é, afin de mieux visualiser le résultat.
... et verticalement
| Codage wiki | Résultat affiché | ||||
|---|---|---|---|---|---|
{| cellpadding=6
!style="background:#f0a0a0;"|cellule1
|style="background:#60a0ff;" rowspan=3|cellule2
|-
|style="background:#a0ffa0;"|cellule3
|-
|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, ici6; - 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ît sur la deuxième ligne du tableau.
Spécifier la taille d'un tableau
| Codage wiki | Résultat affiché | ||||
|---|---|---|---|---|---|
{| style="height:160px; width:160px; border:8px ridge #F0F0F0;"
!style="background:#f0a0a0;"|cellule1
|style="background:#60a0ff;vertical-align:bottom;" rowspan="3"|cellule2
|-
|style="background:#a0ffa0;"|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.
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.
| Résultat affiché | Codage wiki | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
{| class="wikitable-center" style="width:80%"
|+ Mémo
! colspan="3"| Les sinogrammes dans le monde
|-
!style="width:33%"| Pays ||style="width:33%"| Population || Sinogrammes
|- style="vertical-align:top;"
| Chine (RPC) || {{formatnum: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 clés
- Pour définir la largeur d'un élément, on utilise la fonction
width="x%": en début de tableau{| width="80%", de cellule||width="33%"|. La largeur est le plus souvent exprimée en px et en %. Les % sont recommandés car s'adaptant à l'écran du lecteur.
Pour définir l'alignement vertical du texte, on utilise le stylevertical-align="x". Les valeurs possibles sonttop,bottometmiddle
Pour fusionner horizontalement x cellules, on utilise la fonctioncolspan="x"(colonnes expansion x) :||colspan="2"|. La premiè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.
Exemple bilan : tableaux triables
| Recommandation importante |
|---|
| Bonne pratique : éviter autant que possible l'utilisation des tableaux triables qui posent des gros problèmes d'accessibilité. |
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 [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/wikibits.js?view=log wikibits.js] qui permet le tri est copié sur les serveurs de WikiGenWeb.
Une aide supplémentaire se trouve sur Aide:Tri.
| Résultat affiché | Codage wiki | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
{|class="wikitable-center sortable"
|+ Benelux
! Pays || Rang || Population || Date du relevé ||class="unsortable"| Non triable
|-
| Pays-Bas || 1 || {{formatnum:16.500.000}} || 2003 || Cette
|-
| Belgique || 2 || 10 millions || 2007 || Colonne
|-
| Luxembourg || 3 || {{formatnum:0.5}} millions || || est fixe.
|-class="sortbottom"
! Benelux || || Total : 27 M || ||
|}
|
- Fonctions nouvelles
- Toutes les colonnes deviennent triables lorsque 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.
Les lignes comprenant des lettres accentuées ne sont pas triées correctement. Il est très facile d'y remédier. Voir : Tableau pour expert.
- Limite connue
- 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.
Articles connexes
| Sources et crédits | Cet article est largement inspiré et adapté de la page WikiPédia [http://fr.wikipedia.org/w/index.php?title=Aide:Les_tableaux_pour_les_curieux&oldid=60719275 Aide:Les tableaux pour les curieux], publiée sous licence [http://creativecommons.org/licenses/by-sa/3.0/deed.fr CreativeCommons CC BY-SA 3.0]. |
|---|
