Aide:Tableau

De Geneawiki
Aller à la navigation Aller à la recherche

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

Un exemple de tableau minimal :


gauche droite

et la méthode pour l'obtenir :


Résultat Syntaxe wikimédia autre méthode
gauche droite
 {| border="1"
 |gauche
 |droite
 |}
 {| border="1"
 |gauche||droite
 |}


Mais reprenons au début...



Tableau

Un tableau est défini par

{| ''paramètres''
 |}

Ce qui équivaut à

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

TD

Les cellules sont créées soit comme ça :

|Cellule1
|Cellule2
|Cellule3

soit comme ça :

|Cellule1||Cellule2||Cellule3

les deux méthodes équivalent à :

<td>cellule1</td><td>cellule2</td><td>cellule3</td>

donc "||" est égal à "nouvelle ligne" + "|"

Les paramètres dans les cellules peuvent être utilisés comme ceci :

|params|cellule1||params|cellule2||params|cellule3

ce qui va donner :

<td params>

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 "|"!

TR

les balises <tr> vont être automatiquement générées pour la première ligne. Pour créer une autre ligne, faites :

|-

ou

|--------------

ou

|-------------------

les trois correspondent à :

<tr>

Les paramètres peuvent être ajoutés comme ça :

|- paramètres

Ou

|------- paramètres

ce qui équivaut à :

<tr params>

Note :

  • les balises <tr> sont automatiquement ouvertes à l'apparition du premier <td>.
  • les balises <tr> sont automatiquement fermées à l'apparition de <tr> ou de </table>.

Légende

Une balise de <légende> est créée par

|+ Légende

Qui donnera

<caption>Légende</caption>

Vous pouvez aussi utiliser des paramètres :

|+ paramètres|Légende

Qui donnera

<caption paramètres>Légende</caption>

Exemples

Exemple simple

 {| 
 | Cellule 1, ligne 1 
 | Cellule 2, ligne 1 
 |- 
 | Cellule 1, ligne 2 
 | Cellule 2, ligne 2 
 |}

générera

Cellule 1, ligne 1 Cellule 2, ligne 1
Cellule 1, ligne 2 Cellule 2, ligne 2

Exemple plus compliqué

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
 | blabla
 |
 {| border=2
 |- bgcolor="#abcdef"
 |tableau imbriqué
 |- bgcolor="#abcdef"
 |tableau
 |}
 |Le tableau parent
 |}

Nous présente un tableau imbriqué

blabla
tableau imbriqué
tableau
Le tableau parent

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 titre

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

donne

titre1 titre2
Cellule1 Cellule2

Exemple plus compliqué

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

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