Aide:Tableau

De Geneawiki
Aller à : navigation, rechercher

<- Retour Accueil de l'aide

Ces balises de tables, remplacent les traditionnelles balises HTML <table>, <tr>, <td>, <th> et <caption>. Les balises HTML peuvent cependant toujours être utilisées.

Les balises ci-dessous doivent commencer au début d'une ligne (sauf une exception). Les paramètres sont optionnels.


Les bases : Insérer un tableau (wikitable)


Barre d'outils Geneawiki.jpg


Le menu « Avancé » est utilisé pour insérer un tableau dans un article.

Modeavancé-Geneawki.jpg

Sélectionnez l'icône Tableau-Geneawiki.jpg « Tableau ». Après sélection, une fenêtre s'ouvre et vous propose d'insérer un tableau et d'adapter les paramètres de ce tableau.

  • Inclure la ligne d'en-tête
permet d'ajouter ou de supprimer la ligne des en-têtes de colonnes
  • Style avec bordures
permet de séparer les cases du tableau par un bordure
  • Rendre le tableau triable
offre la possibilité au lecteur de l'article de trier les colonnes du tableau dans l'ordre alphabétique ou numéraire.

Deux champs modifiables vous sont également proposés : le nombre de colonnes et le nombre de lignes.
Après avoir inséré un tableau via la procédure décrite ci-dessus, un code est ajouté à l'article. Il vous reste à remplir le tableau avec les informations que vous souhaitez ajouter.

{| class="wikitable"
|-
! Texte de l’en-tête !! Texte de l’en-tête !! Texte de l’en-tête
|-
| Texte de la cellule || Texte de la cellule || Texte de la cellule
|-
| Texte de la cellule || Texte de la cellule || Texte de la cellule
|-
| Texte de la cellule || Texte de la cellule || Texte de la cellule
|}

Pour cela, remplacer « Texte de l'en-tête » par le nom des colonnes et « Texte de la cellule » par des informations. Si vous souhaitez laisser vide une cellule ou un en-tête, supprimez le contenu mais gardez tout ce que ne constitue pas du texte.

Insérer un tableau (mode avancé)

Ouverture et fermeture d'un tableau

Un tableau s’ouvre et se ferme toujours avec les caractères suivants :

{| ''paramètres''
|}
Attention: Vous devez obligatoirement laisser une espace entre   {|   et   paramètre,   sinon le premier paramètre sera ignoré.

Ce qui équivaut à

<table paramètres>
</table>

Cellules ( TD )

Les cellules qui forment une même rangée de tableau peuvent être disposées verticalement, ou horizontalement, dans le code wiki :

|Cellule1
|Cellule2
|Cellule3

À l’horizontale, il faut mettre deux barres verticales entre les cellules placées sur la même ligne de code :

| Cellule1 || Cellule2 || Cellule3

Attributs de cellules

Chacune des cellules d’un tableau peut comporter des attributs, séparés du contenu par une autre barre verticale :

|attributs| Cellule1
|attributs| Cellule2
|attributs| Cellule3

Ou encore horizontalement :

|attributs| Cellule1 ||attributs| Cellule2||attributs| Cellule3

TH

Fonctionne de la même manière que TD, sauf que "!" est utilisé à la place du "|" ouvrant. "!!" peut remplacer "||". Les paramètres utilisent cependant toujours "|"!

L’indicateur de rangée ( TR )

Les balises    <tr>    vont être automatiquement générées pour la première ligne.
Pour créer une autre ligne, faites :    |-    ou    |--------------    ce qui équivaut à :   <tr>

Le nombre de traits d’union dans l’indicateur de rangée n’est pas limité, on peut en ajouter pour rendre le code wiki plus lisible.

Les paramètres peuvent être ajoutés comme ça :
|- paramètres    ou    |------- paramètres    ce qui équivaut à :   <tr params>

Titre d'un tableau (légende)

Le titre du tableau, délimité par les balises HTML <caption>...</caption> placé au début du tableau (avant la première rangée de cellules), est défini par le code wiki suivant :    |+ Titre de tableau
Avec des attributs :    |+ attributs | Titre de tableau

Cellules fusionnées

Les attributs   colspan=""   et   rowspan=""   permettent de fusionner plusieurs cellules d’une même rangée ou d’une même colonne respectivement.

Attribut par colpan

Fusion de cellule par colspan="2" ( le chiffre indique le nombre de cellule à fusionner)
dans l'exemple d'un tableau à 5 cellules : colspan="2" fusionne les cellules 1 & 2 - colspan="3" fusionne les cellules 3 , 4 et 5
Pour définir la largeur d'un élément, on utilise la fonction width="xx%"

  • en début de tableau => {| width="100%" , (dans l'exemple width="85%")
  • de cellule => ||width="50%"| (dans l'exemple on trouve différente valeur ; width="40%" , width="20%" et width="15%")

La largeur peut aussi être exprimée en pixels (utiliser alors px au lieu de %). L'utilisation des pourcentages est recommandée car ceux-ci permettent au tableau de s'adapter à l'écran du lecteur.

<center>
{| sortable" border=2 cellspacing=0 cellpadding=10 width="85%"
|-
! colspan="2" width="40%"| Titre 1||colspan="3" width="40%" | Titre 2
|-
! width="20%"  | Sous titre 1 || width="20%" |Sous titre 2 || width="15%" | Sous titre 3 ||align="center" "width="15%" | Sous titre 4||align="center" "width="15%" | Sous titre 5
|-
| Cellule 1, ligne 1 ||align="center" | Cellule 2, ligne 1 || Cellule 3, ligne 1 ||align="center" | Cellule 4, ligne 1||align="center" | Cellule 5, ligne 1
|-
| Cellule 1, ligne 2 ||align="right" | Cellule 2, ligne 2  || Cellule 3, ligne 2 ||align="center"| Cellule 4, ligne 2||align="center"| Cellule 5, ligne 2 
|}
</center>
Titre 1 Titre 2
Sous titre 1 Sous titre 2 Sous titre 3 Sous titre 4 Sous titre 5
Cellule 1, ligne 1 Cellule 2, ligne 1 Cellule 3, ligne 1 Cellule 4, ligne 1 Cellule 5, ligne 1
Cellule 1, ligne 2 Cellule 2, ligne 2 Cellule 3, ligne 2 Cellule 4, ligne 2 Cellule 5, ligne 2


Attribut rowpan

fusion de ligne par rowspan=2

{| align=right border=1
| Cellule 1, ligne 1 
|rowspan=2| Cellule 2, ligne 1 (et 2) 
| Cellule 3, ligne 1 
|- 
| Cellule 1, ligne 2 
| Cellule 3, ligne 2 
|}

On remarquera que le tableau est collé sur le bord droit de la page.

Cellule 1, ligne 1 Cellule 2, ligne 1 (et 2) Cellule 3, ligne 1
Cellule 1, ligne 2 Cellule 3, ligne 2


Tableau imbriqué

 {| border=1
 | tableau parent Cellule 1 
 |
 {| border=2
 |- bgcolor="#abcdef"
 | tableau imbriqué Cellule 2
 |- bgcolor="#abcdef"
 | tableau imbriqué Cellule 3
 |}
 | tableau parent Cellule 4
 |}

Nous présente un tableau imbriqué

tableau parent Cellule 1
tableau imbriqué Cellule 2
tableau imbriqué Cellule 3
tableau parent Cellule 4


Légende et cellules multi-lignes

Ceci est la légende
Indépendance 19 août 1919
Monnaie Afghani
Time zone UTC+4:30
Hymne national Sououd-e-Melli
Internet TLD .AF
{| border=1 align=right
|+ '''Ceci est la légende'''.
|[[Indépendance]]||[[19 août]] [[1919]]
|-
|[[Monnaie]]||[[Afghani]]
|-
|[[Time zone]]||[[Temps universel coordonné|UTC]]+4:30
|-
|[[Hymne national]]||[[Sououd-e-Melli]]
|-
|[[Top-level domain|Internet TLD]]||.AF
|}

est montré à droite.

Tableau avec titres d'en-têtes

{| border=1
! titre1!! titre2
|-
| Cellule1|| Cellule2
|}
       donne     
titre1 titre2
Cellule1 Cellule2

Bordure d'un tableau

border= X permet de spécifier la taille de la bordure du tableau, des lignes ou des cellules

Taille 1
Texte de la cellule
Taille 2
Texte de la cellule
Taille 3
Texte de la cellule
Taille 4
Texte de la cellule
Taille 5
Texte de la cellule

Alignement horizontal du texte

Pour aligner le texte dans une cellule d'un tableau, il faut utiliser la propriété de : align=" ? "

  • align="left" pour la gauche
  • align="center" pour le centre
  • align="right" pour la droite
{| class="wikitable centre"
! scope=col | Positionnement
|-
| align="left" | gauche
|-
| align="center" | centre
|-
| align="right" | droite
|}
Positionnement
gauche
centre
droite

Alignement vertical du texte

Pour chacune des cellules, il est également possible de positionner le contenu verticalement avec la propriété de style vertical-align
Dans l'exemple qui suit, il y a une cellule (celle de gauche) avec une taille de 150 pixels.

{| class="wikitable centre"
! scope=row style="height:150px;" | Position
| style="vertical-align:top;" | Haut
| style="vertical-align:middle;" | Milieu
| style="vertical-align:bottom;" | Bas
|}
Position Haut Milieu Bas

Classement alphanumérique (triable)

Chaque contenu des colonnes peut être en ordre alphabétique ou numérique en cliquant sur l'un des symboles, à droite du texte des premières cellules, dans la première ligne du tableau. Les informations des autres colonnes seront réorganisées en conséquence.

1ère colonne 2ème colonne 3ème colonne 4ème colonne
Alpha Lettre A Bleu 10
Beta Lettre B Jaune 15
Gamma Lettre C Rouge 20
Delta Lettre D Vert 5

Un tableau devient triable lorsque celui commence 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".

Ligne avec titre et contenu mélangés

  {| border=1 cellspacing=0
 ! 
 ! Header1 
 ! Header2 
 |-
 ! row a
 | cel a1
 | cel a2
 |-
 ! Row b
 | cel b1
 | cel b2 
 |}

donne:

Header1 Header2
row a cel a1 cel a2
Row b cel b1 cel b2

mais:

 {| border=1 cellspacing=0
 ! !! col Header1 !! Header2 
 |-
 ! row header A || cel a1 ||   cel a2
 |-
 ! RH B         || cel b1 ||    cel b2
 |}

donne:

col Header1 Header2
row header A cel a1 cel a2
RH B cel b1 cel b2

L'espacement entre la bordure extérieure

On peut aussi éviter de coller le contenu au bord des cellules
L’attribut cellpadding="X" modifie l'espacement ( "X" => en pixels uniquement) entre la bordure extérieure d'une cellule et son contenu

{| border="1" cellpadding="5"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
{| border="1" cellpadding="20"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}

résultat :

espacement
de 5 pixels
Cellule 1 Cellule 2
Cellule 3 Cellule 4
espacement de 20 pixels
Cellule 1 Cellule 2
Cellule 3 Cellule 4