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

De WikiGenWeb
Aller à : navigation, rechercher
m (Changer la couleur d'une cellule)
m (L'alignement horizontal)
Ligne 132 : Ligne 132 :
 
|-
 
|-
 
|
 
|
<pre>{| align="right" style="background-color:#c0e8f0"
+
<pre>{| class="wikitable-right" style="background-color:#c0e8f0"
 
|cellule1
 
|cellule1
 
|-
 
|-
Ligne 138 : Ligne 138 :
 
|}</pre>
 
|}</pre>
 
|
 
|
{| align="right" style="background-color:#c0e8f0"
+
{| class="wikitable-right" style="background-color:#c0e8f0"
 
|cellule1
 
|cellule1
 
|-
 
|-

Version du 28 février 2011 à 13:13

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 :
  • Utiliser obligatoirement class="wikitable" dans la déclaration du tableau.
  • Pour les cellules, n'utiliser que la clause de style pour le design. style="text-align:center; color:#FF0000;" et non align="center" color="#FF0000", etc....
  • Tableaux simples :
  • Tableaux complexes :
    • utiliser les attributs id et headers dans les tableaux de données complexes, pour relier chaque cellule de contenu à son ou à ses en-têtes de lignes et de colonnes.
    • utiliser l'attribut summary de l'élément table pour expliciter l'organisation des données dans un tableau complexe.
    • n'utiliser les éléments de tableau pour la mise en forme que si leur contenu se linéarise de manière compréhensible.
      Ne pas utiliser alors d'éléments propres aux tableaux de données (titres <caption> ou |+, en-têtes de ligne ou de colonne <th> ou !).
    • éviter autant que possible l'utilisation des tableaux triables.

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
|}
cellule dans un tableau à droite
{| class="wikitable-center" style="background-color:#C0E0F0"
|cellule dans un tableau centré
|}
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 : | , que je remplis 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
|}
cellule1 cellule2
{| style="background-color:#c0e8f0"
|cellule1
|-
|cellule2
|}
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-right" style="background-color:#c0e8f0"
|cellule1
|-
!style="background:#f0a0a0;Color:#f0a0a0|rien
|-  
|cellule2
|}
cellule1
rien
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 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
|}
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é 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
|}
cellule1 cellule2
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
|}
cellule1 cellule2
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

Codage wiki Résultat affiché
{| border="8" style="height:160px;width:160px"
!style="background:#f0a0a0;"|cellule1
|style="background:#60a0ff;vertical-align:bottom;" rowspan="3"|cellule2
|- 
|style="background:#a0ffa0;"|cellule3
|-
|cellule4
|}
cellule1 cellule2
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
Mémo
Les sinogrammes dans le monde
Pays Population Sinogrammes
Chine (RPC) 1,3 milliards Simplifiés
(En fait des variantes d'usage ancien)
Taïwan 23 millions Traditionnels
Hongkong 6 millions
Source : [http://insee.org/Stat/Sino Insee.org]
{| class="wikitable" align="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 clefs

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" : 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 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
Benelux
Pays Rang Population Date du relevé Non triable
Pays-Bas 1 16,500,000 2003 Cette
Belgique 2 10 millions 2007 Colonne
Luxembourg 3 0,5 millions est fixe.
Benelux Total : 27 M
{|class="wikitable 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 de cet article

Cet article est largement inspiré et adapté de la page Wikipédia:Aide:Les tableaux pour les curieux du 30 décembre 2010, consultée le 26 février 2011, publiée sous licence [http://creativecommons.org/licenses/by-sa/3.0/ CreativeCommons BY-SA 3.0].