Aide:Tableau
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 | ||
---|---|---|---|---|
|
{| 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
{|
etparamè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 |
|
Le tableau parent |
Légende et cellules multi-lignes
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
|
|
|
|
|
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 :
|
|