Aide:Tableau pour initiés : Différence entre versions

Version actuelle en date du 28 mars 2011 à 14:21

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"),

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

{| 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 :

{|
|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

{| 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

{| 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...

{| 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

{| 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, 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ît sur la deuxième ligne du tableau.

Spécifier la taille d'un tableau

{| 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.

{| 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 style vertical-align="x". Les valeurs possibles sont top , bottom et middle
Pour fusionner horizontalement x cellules, on utilise la fonction colspan="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

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.

{|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

• Tableau

Liste des manuels d'utilisation

Projet:Aide
Lecteurs	Manuel du lecteur
Éditeurs	Manuel de l'éditeur
Administrateurs	Manuel de l'administrateur