Utilisateur:Raymond SÉNÈQUE/Article en cours : Différence entre versions

De WikiGenWeb
Aller à : navigation, rechercher
m (Rudiments)
m (Rudiments)
Ligne 47 : Ligne 47 :
 
|-
 
|-
 
|
 
|
<pre>{| align="center" style="background-color:#C0E0F0"
+
<pre>{| class="wikitable" align="center" style="background-color:#C0E0F0"
 
|cellule dans un tableau centré
 
|cellule dans un tableau centré
 
|}</pre>
 
|}</pre>
 
|
 
|
{| align="center" style="background-color:#C0E0F0"
+
{| class="wikitable" align="center" style="background-color:#C0E0F0"
 
|cellule dans un tableau centré
 
|cellule dans un tableau centré
 
|}
 
|}

Version du 26 février 2011 à 16:05

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 :
    • utiliser systématiquement des en-têtes de ligne et de colonne explicites (! scope=col, ! scope=row) dans les tableaux de données.
    • utiliser autant que possible l'élément caption pour indiquer le titre du tableau.
    • ne jamais imbriquer plusieurs niveaux de tableaux.
  • 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" align="right"
|cellule dans un wiki-tableau à droite
|}
cellule dans un wiki-tableau à droite
{| class="wikitable" align="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" , l'usage de cette class wikitable, sobre et efficace, est encouragé dans le but d'harmoniser l'apparence des tableaux dans les articles.
On applique éventuellement une classe d'alignement (il existe left, center et right)
Attention : ne pas utiliser l'attribut HTML ALIGN 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 : 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:#C0E0F0. 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 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 Modèle:Green ; 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 Modèle:Green 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é
{| align="right" style="background-color:#c0e8f0"
|cellule1
|-
|bgcolor=#f0a0a0|<font color=#f0a0a0>rien</font>
|-     
|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 Modèle:Green avec l'attribut Modèle:Green ; cet attribut est une valeur numérique, qui ne nécessite pas l'emploi de guillemets ; le séparateur Modèle:Green 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.

L'alignement horizontal

Codage wiki Résultat affiché
{| align="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é à gauche ou centré ne s'entoure pas de texte).

La fusion de cellules

Horizontalement...

Codage wiki Résultat affiché
{| cellspacing=5 style="background-color:#c0e8f0"
|bgcolor=#f0a0a0|cellule1
|bgcolor=#f0a0a0|cellule2
|-     
|bgcolor=#a0ffa0 colspan=2|<center>cellule3</center>
|}
cellule1 cellule2
cellule3

Ceci s'obtient avec le paramètre Modèle:Green, suivi du nombre de colonnes que doit occuper la cellule concernée ; ici Modèle:Green. 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.

... et verticalement

Codage wiki Résultat affiché
{| cellpadding=6
!bgcolor=#f0a0a0|cellule1
|bgcolor=#60a0ff rowspan=3|cellule2
|-     
|bgcolor=#a0ffa0|cellule3
|-
|cellule4
|}
cellule1 cellule2
cellule3
cellule4

Une cellule peut également s'étendre verticalement au moyen du paramètre Modèle:Green, 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 Modèle:Green, suivi de la valeur de la marge en pixels, ici Modèle:Green ;
  • le texte de la cellule 1 est en gras ; ceci s'obtient en remplaçant le caractère Modèle:Green de début de ligne par le caractère Modèle:Green ; 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" height="160" width="160"
!bgcolor="#f0a0a0"|cellule1
!bgcolor="#60a0ff" rowspan="3" valign="bottom"|cellule2
|-     
|bgcolor="#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 Modèle:Green et Modèle:Green, 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 centre" width="80%"
|+ Mémo
! colspan="3"| Les sinogrammes dans le monde
|-
!width="33%"| Pays ||width="33%"| Population || Sinogrammes
|- valign="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 Modèle:Green : en début de tableau Modèle:Green, de cellule Modèle:Green. 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 la fonction Modèle:Green : tableau Modèle:Green , ligne Modèle:Green, case Modèle:Green . Les valeurs possibles sont Modèle:Green et Modèle:Green
Pour fusionner horizontalement x cellules, on utilise la fonction Modèle:Green (colonnes expansion x) : Modèle:Green. 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 :

|-
Modèle:Green Première cellule (double car "2") | Dernière cellule (simple)

Pour fusionner verticalement x cellules, on utilise la fonction Modèle:Green (étage expansion x) : Modèle:Green. 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
{{{texte}}}

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 Wikipédia. Une aide supplémentaire se trouve sur [[en:Help:Sorting|(en)Modèle:Lang]].

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 : Modèle:Green
Une colonne devient fixe et non triable lorsqu'on lui spécifie : Modèle:Green
Une ligne devient fixe et non triable lorsqu'on lui spécifie : Modèle:Green
Les totaux ne sont pas calculés automatiquement, ils sont entrés à la main par l'auteur du tableau. Les lignes comprenant de lettres accentuées ne sont pas triées correctement. Il est très facile d'y remédier.
Voir :  Syntaxe d'un tri correct des lettres accentuées.

Trois modèles sont destinés à faciliter les tris
  • Le modèle {{smn}} pour les colonnes de nombres,
  • le modèle {{tri}} pour les chaînes de caractères et
  • le modèle {{Tri date}} pour les dates.

Ces modèles permettent de trier des colonnes avec des clefs de tri différentes des valeurs affichées.

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.