Utilisateur:As de carreau/Brouillon/tableaux
Quelle différence ?
- À retenir
Modifier les paramètres d'insertion
modifierRemplir un tableau
modifier
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. 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 une en-tête, supprimez le contenu mais gardez tout ce que ne constitue pas du texte. Pour comprendre le code affiché, référez-vous à l'aide avancée. |
Aide avancée
modifierCette page ne présentait que les éléments de base pour insérer un tableau en wikicode.
Deux autres pages d'aide existent pour compléter vos besoins :
- Aide:Insérer un tableau (wikicode, avancé) - détail de la syntaxe, mise en page et espacement
- Aide:Insérer un tableau (wikicode, expert) - bases de l'accessibilité, tableau complexe (fusion de cellules) et paramétrage des éléments.
Aide du Wikicode
Quelle différence ?
Si vous souhaitez directement obtenir des tableaux prêts à remplir, il existe un icône « Tableau » présent dans la fenêtre de modifications, dans l'onglet « Avancé ».
Les tableaux posant fréquemment des problèmes d'accessibilité, plusieurs instructions sont présentes sur Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux, pour respecter les principales conventions de navigation.
Syntaxe d'un tableau élémentaire
modifierAmorcer un tableau
modifierUn tableau s’ouvre avec le code : {|
.
La plupart des tableaux utilisent la classe wikitable
, s'écrivant : class="wikitable"
. L'usage de la classe wikitable
simplifie et harmonise la mise en forme des tableaux de données.
Par défaut, un tableau se positionne à gauche, mais peut être centré avec : class="wikitable center"
(attention, avec (en)center
le tableau prend toute la largeur de la page et ne peut donc pas admettre d'image à droite et/ou à gauche).
Pour améliorer la lisibilité des grands tableaux, une alternance de gris peut être appliquée avec : class="wikitable alternance"
.
Un tableau se ferme avec le code : |}
.
Insérer un titre
modifierLe titre du tableau est défini par : |+
.
Le titre du tableau se place en début de tableau, avant la première rangée de cellules. Si plusieurs titres sont indiqués, seul le premier est pris en compte.
Insérer une nouvelle ligne
modifierUne nouvelle ligne est créée dans un tableau avec le code : |-
.
Le nombre de tirets dans |-
n'est pas limité, on peut en ajouter pour rendre le code wiki plus lisible ; par exemple : |------
.
Le code |-
est ignoré s’il n’est pas suivi de contenu suivi de nouvelles cellules.
Créer une cellule
modifierUne nouvelle cellule (ou case) est créée dans un tableau avec le code : |
(si le contenu des cellules est décrit verticalement) ; ou bien : ||
(si disposé horizontalement).
Il est possible de laisser des cellules vides. Dans la disposition à l'horizontale, il est alors important de toujours placer au moins une espace avant les deux barres verticales séparant deux cellules, afin de clairement identifier les cellules et attributs de cellules.
Créer une en-tête de colonne ou une en-tête de ligne
modifierUn en-tête de colonne est créé par : ! scope="col"
.
L'en-tête de colonne se place sur la 1re ligne (avant la première ligne de contenu), c'est-à-dire après le premier |-
.
Un en-tête de ligne est créé par : ! scope="row"
.
L'en-tête de ligne se place au début de chaque ligne, c'est-à-dire après chaque |-
.
Par défaut dans la classe wikitable
, le texte des en-têtes est affiché en gras, tous les en-têtes prennent une couleur de fond différente, et les en-têtes de colonnes sont centrés tandis que les en-têtes de lignes sont alignés à gauche.
En syntaxe wiki, le point d’exclamation est utilisé à la place de la barre verticale pour définir des en-têtes.
Exemple récapitulatif
modifierTitre col. A | Titre col. B | Titre col. C | |
---|---|---|---|
Titre ligne 1 | Donnée 1A | Donnée 1B | Donnée 1C |
Titre ligne 2 | Donnée 2A | Donnée 2B | Donnée 2C |
Titre ligne 3 | Donnée 3A | Donnée 3B | Donnée 3C |
{| class="wikitable alternance centre" |+ Titre |- | ! scope="col" | Titre col. A ! scope="col" | Titre col. B ! scope="col" | Titre col. C |- ! scope="row" | Titre ligne 1 | Donnée 1A | Donnée 1B | Donnée 1C |- ! scope="row" | Titre ligne 2 | Donnée 2A | Donnée 2B | Donnée 2C |- ! scope="row" | Titre ligne 3 | Donnée 3A | Donnée 3B | Donnée 3C |}
{| class="wikitable alternance centre" |+ Titre |---- ! !! scope="col" | Titre col. A !! scope="col" | Titre col. B !! scope="col" | Titre col. C |---- ! scope="row" | Titre ligne 1 | Donnée 1A || Donnée 1B || Donnée 1C |---- ! scope="row" | Titre ligne 2 | Donnée 2A || Donnée 2B || Donnée 2C |---- ! scope="row" | Titre ligne 3 | Donnée 3A || Donnée 3B || Donnée 3C |}
Syntaxe supplémentaire
modifierLargeur d'un élément du tableau
modifierPour définir la largeur d'un élément, on utilise la fonction width="x%"
: en début de tableau {| width="100%"
, ou de cellule ||width="50%"|
.
La largeur est le plus souvent exprimée en pixels (utiliser alors px
au lieu de %
) ou en pourcentage. L'utilisation des pourcentages est recommandée car ceux-ci permettent au tableau de s'adapter à l'écran du lecteur.
Exemple concret :
{| class="wikitable" |+Tableau exemple !scope=col|titre A !scope=col|titre B |- |width="50%"|AAAAAAAAAAAAAAAAAAAAA |BBB |}
titre A | titre B |
---|---|
AAAAAAAAAAAAAAAAAAAAA | BBB |
Alignement vertical du texte dans une cellule
modifierPour définir l'alignement vertical du texte, on utilise la fonction valign="x"
: tableau {| valign="top"
, ligne |- valign="top"
, case ||valign="bottom"|
. Les valeurs possibles sont top
et bottom
Fusionner des cellules
modifierIl est parfois nécessaire de fusionner des cellules.
Pour fusionner horizontalement x cellules, on utilise la fonction colspan="x"
(expansion de x colonnes) : ||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 le code.
Pour fusionner verticalement x cellules, on utilise la fonction rowspan="x"
(expansion de x rangées) : ||rowspan="2"|
. La 1re 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 le code.
Tableaux triables
modifierLes tableaux peuvent être triés. Les tableaux triables s'identifient grâce aux flèches de tri des en-têtes. Le tri est cependant à utiliser avec parcimonie dans les articles, allant à l'encontre de normes d'accessibilité.
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"
.
Les tableaux ayant des cellules fusionnées sur plusieurs rangées (rowspan) ou colonnes (colspan) ou ayant des cellules manquantes en fin de ligne ne se trient pas correctement. Il est recommandé d'utiliser la fusion de colonnes ou de lignes uniquement dans des cellules non triées, avec donc le code "unsortable"
ou "sortbottom"
. Voir exemple ci-après.
Exemple bilan
modifierLe tableau ci-après est un bilan, il utilise au moins une fois chaque fonction souvent nécessaire (width
, align
, colspan
, rowspan
, sortable
, style="text-align:center"
).
Pays | Rang | Population | Date du relevé |
---|---|---|---|
Pays-Bas | 1 | 16 500 000 | 2003 |
Belgique | 2 | 10 millions | 2007 |
Luxembourg | 3 | 0,5 million | |
Benelux | Total : 27 M |
{|class="wikitable sortable centre" style="text-align:center; width:80%;" |+ Benelux ! scope="col" width="25%" | Pays ! scope="col" | Rang ! scope="col" | Population ! scope="col" | Date du relevé |- | Pays-Bas || 1 || align="right" | {{formatnum:16500000}} || 2003 |- | Belgique || 2 || align="right" | 10 millions || 2007 |- | Luxembourg || 3 || align="right" | {{formatnum:0.5}} million || |-class="sortbottom" | '''Benelux''' || colspan="3" | '''Total : 27 M''' |}
Voir aussi
modifier- Aide:Insérer un tableau (wikicode, expert) pour les explications détaillées de la syntaxe des tableaux en wikicode
- Wikipédia:Modèles/Tableaux : modèles pour faciliter la création de tableaux
Cette page d'aide présente les fonctions les plus fréquentes d'un tableau tant pour l'espace encyclopédique, que celui des projets et des portails ou des pages personnelles. Cette page présente ainsi : les bases de l'accessibilité, la construction de tableau complexe (fusion de cellules : colspan="x"
; rowspan="x"
), le paramétrage des éléments (fonctions : width="x"
; height="x"
).
La syntaxe des tableaux
modifierOuverture et fermeture
modifierLes tableaux et leurs éléments sont délimités principalement par la barre verticale « | » (ou tube) et les accolades « { } ». Un tableau s’ouvre et se ferme toujours avec les caractères suivants :
{| |}
Résultat affiché | Codage wiki | Codage HTML | |
---|---|---|---|
|
{|class="wikitable centre" |- | cellule |} |
<table class="wikitable centre">
<tr>
<td>cellule</td>
</tr>
</table>
|
Cellules
modifierLes 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
Résultat affiché | Code wiki | Code HTML | ||
---|---|---|---|---|
|
{| class="wikitable centre" |- | Gauche | Droite |} |
<table class="wikitable centre">
<tr>
<td>Gauche</td>
<td>Droite</td>
</tr>
</table>
| ||
|
{| class="wikitable centre" |- | Gauche || Droite |} |
<table class="wikitable centre">
<tr>
<td>Gauche</td>
<td>Droite</td>
</tr>
</table>
|
Attributs de cellules
modifierChacune des cellules d’un tableau peut comporter des attributs, séparés du contenu par une autre barre verticale :
|attributs| Cellule1 |attributs| Cellule2
Ou encore horizontalement :
|attributs| Cellule1 ||attributs| Cellule2
Cellules sans contenu
modifierDes cellules peuvent aussi n’avoir aucun contenu visible :
|Cellule1||||||Cellule4||Cellule5
Comme ces cellules sans contenu visible peuvent éventuellement comporter elles-mêmes des attributs, il est hautement conseillé (pour la lisibilité du code et pour faciliter les modifications) de toujours placer au moins une espace avant les deux barres verticales séparant deux cellules (les espaces non significatifs en tête ou fin de cellule seront automatiquement supprimés), afin de clairement identifier les séparateurs de cellules et les séparateurs entre les attributs et le contenu d’une cellule (même s’il est vide) :
|Cellule1 || || ||Cellule4 ||Cellule5
En effet le code wiki suivant :
|Cellule1|||||Cellule4|||Cellule5|
n’affichera pas le contenu des cellules 4 et 5 dans les colonnes attendues, le code sera interprété de façon incorrecte comme s’il était :
| Cellule1 || <!-- sans contenu --> ||<!-- sans attribut -->| Cellule4 ||<!-- sans attribut -->|Cellule5|
avec la 2e colonne vierge, la 3e colonne sans attribut affichant « Cellule4 », et la 4e colonne affichant « Cellule5| » : dans toute suite de barres verticales d’une ligne commençant par |, cette première barre est d’abord interprétée comme un préfixe de cellule, puis tout groupe de deux barres successives sera interprété comme un séparateur entre deux cellules ; puis chacune des cellules ainsi isolées est coupée sur la première barre verticale (non placée après une accolade encore ouverte).
Rangée de cellules
modifierPour indiquer une nouvelle rangée de cellules, insérer (sur une ligne séparée placée avant les cellules de cette rangée) :
|-
Appliquer un style (attribut) à une rangée
modifierIl est possible d’ajouter des attributs(styles) qui s’appliquent à toute la rangée de cellules placées après cette ligne :
|-attributs
Les attributs peuvent être des "styles" : une couleur(de fond, de bordure), une largeur(width), une hauteur(height), etc.
Exemple:
On donne pour attribut à la rangée (rangée texte1/texte2/texte3): style="height:60px; background-color:#FFEFE5;"
une hauteur(60pixels) et une couleur(rose).
Les styles séparés étaient: hauteur: style="height:60px;"
et couleur: style="background-color:#FFEFE5;"
Résultat affiché | Wikicode | ||||||
---|---|---|---|---|---|---|---|
|
{| class="wikitable centre" |- |titre A |titre B |titre C |- style="height:60px; background-color:#FFEFE5;" | style="text-align:left;" | texte1 | style="text-align:right;" | texte2 | style="text-align:center;" | texte3 |} |
première rangée et style (attribut)
modifierSi la première rangée de la table n’a besoin d’aucun de ces styles ou attributs, on peut se passer de la ligne indicatrice de nouvelle rangée et placer les cellules de cette rangée juste après la ligne d’ouverture de la table :
Résultat affiché | Codage wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| class="wikitable centre" | Cellule 1.1 | Cellule 1.2 || Cellule 1.3 |- | Cellule 2.1 || Cellule 2.2 | Cellule 2.3 |} |
<table class="wikitable centre">
<tr>
<td>Cellule 1.1</td>
<td>Cellule 1.2</td><td>Cellule 1.3</td>
</tr>
<tr>
<td>Cellule 2.1</td><td>Cellule 2.2</td>
<td>Cellule 2.3</td>
</tr>
</table>
|
Un indicateur de nouvelle rangée sera ignoré (avec ses attributs) s’il n’est pas suivi de cellules avant l’indicateur suivant de rangée ou avant la fin de la table.
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 :
|-----------------------------------------------------
Résultat affiché | Codage wiki | Codage HTML | ||
---|---|---|---|---|
|
{| class="wikitable centre" |----style="background: #FFFF00" | Haut |---- | Bas |} |
<table class="wikitable centre">
<tr style="background: #FFFF00">
<td>Haut</td>
</tr>
<tr>
<td>Bas</td>
</tr>
</table>
|
En-têtes de rangées et de colonnes
modifierEn HTML, les cellules d’en-tête se marquent avec l’élément th
au lieu de td
. Visuellement, le texte de ces cellules est généralement en gras et centré. Dans la classe wikitable
, tous ces en-têtes prennent une couleur de fond différente, et seuls les en-têtes de colonnes sont centrés, les en-têtes de ligne restent alignés à gauche par défaut.
Les en-têtes permettent aux lecteurs d’écran utilisés par les internautes malvoyants de restituer la structure logique d’un tableau : les informations données par les cellules d’en-tête pourront être rappelées par le logiciel lorsque l’utilisateur se déplace dans le reste du tableau, afin qu’il puisse comprendre la signification des différentes données. Mais pour cela, il est indispensable que leur attribut scope
soit présent : seul celui-ci permet au lecteur de différencier un en-tête de ligne (scope="row"
) et un en-tête de colonne (scope="col"
).
Pour créer des en-têtes en syntaxe wiki, on utilise le point d’exclamation à la place de la barre verticale :
! Titre1 ! Titre2 ! Titre3
Ou, à l’horizontale :
! Titre2 !! Titre3
Avec des attributs (attention : le séparateur entre attributs et contenu d’une cellule reste la barre verticale) :
!scope="col" attributs| Titre1 !scope="col" attributs| Titre2 !scope="col" attributs| Titre3
Exemple:
texte affiché | wikicode | ||||||
---|---|---|---|---|---|---|---|
|
{| class="wikitable" style="background-color:#FFF9E5;" |- ! scope=col style="background-color:#FFECB2;"| Titre1 ! scope=col style="background-color:#FFECB2;"| Titre2 |- | contenu 1a | contenu 2a |- | contenu 1b | contenu 2b |- |} |
Ou à l’horizontale :
!scope="col" attributs| Titre1 !!scope="col" attributs| Titre2 !!scope="col" attributs| Titre3
Si la première rangée doit être interprétée comme une rangée d’en-tête :
Résultat affiché | Codage wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable centre" |- !scope="col"| Titre 1 !scope="col"| Titre 2 |- | Cellule 1 || Cellule 2 |} |
<table class="wikitable centre">
<tr>
<th scope="col">Titre 1</th>
<th scope="col">Titre 2</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
</table>
|
Attention, pour faire des en-têtes de rangées, il n’est pas possible d’utiliser la seule forme horizontale du code wiki. Sinon, le style d’en-tête se propage sur toutes les cellules mentionnées dans la même ligne (HTML ne souffre évidemment pas de ce défaut) :
Résultat affiché | Codage wiki | Codage HTML | ||
---|---|---|---|---|
|
{| class="wikitable centre" |- !scope="row"| Titre ligne || Cellule 1 |} |
<table class="wikitable centre">
<tr>
<th scope="row">Titre ligne</th><th>Cellule 1</th>
</tr>
</table>
| ||
|
{| class="wikitable centre" |- !scope="row"| Titre ligne | Cellule 1 |} |
<table class="wikitable centre">
<tr>
<th scope="row">Titre ligne</th><td>Cellule 1</td>
</tr>
</table>
|
Dans le cas de tableaux complexes comportant des en-têtes qui ne s’appliquent pas à la totalité d’une rangée ou d’une colonne, l’attribut scope=
doit être remplacé par la combinaison des attributs id=""
(dans les cellules d’en-tête) et headers=""
(dans les cellules de données). Voir à ce sujet l’atelier accessibilité.
Les utilisateurs enregistrés peuvent activer dans leurs préférences un gadget Accessibilité qui affiche notamment un outil permettant de vérifier rapidement la syntaxe des attributs scope
, id
et headers
d’un tableau.
Titre
modifierLe 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
Si plusieurs titres sont indiqués, seul le premier est pris en compte.
Résultat affiché | Codage wiki | Codage HTML | ||
---|---|---|---|---|
|
{| class="wikitable centre"
|+ Titre
|-
!scope="col"| Colonne 1
!scope="col"| Colonne 2
|}
|
<table class="wikitable centre">
<caption>Titre</caption>
<tr>
<th scope="col">Colonne 1</th>
<th scope="col">Colonne 2</th>
</tr>
</table>
|
Cellules fusionnées
modifierLes attributs colspan=""
et rowspan=""
permettent de fusionner plusieurs cellules d’une même rangée ou d’une même colonne respectivement.
|colspan="2"| Fusion de deux cellules d’une même rangée
Résultat affiché | Codage wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| class="wikitable centre"
|-
| Cellule 1 || Cellule 2 || Cellule 3
|-
| Simple ||colspan="2"| Fusionnée
|}
|
<table class="wikitable centre">
<tr>
<td>Cellule 1</td><td>Cellule 2</td><td>Cellule 3</td>
</tr>
<tr>
<td>Simple</td><td colspan="2">Fusionnée</td>
</tr>
</table>
|
|rowspan="3"| Fusion de trois cellules d’une même colonne
Résultat affiché | Codage wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| class="wikitable centre"
|-
!scope="col"| Cellules simples !!scope="col"| Colonne
|-
| Gauche 1 ||rowspan="3"| Droite
|-
| Gauche 2
|-
| Gauche 3
|}
|
<table class="wikitable centre">
<tr>
<th>Cellules simples</th><th>Colonne</th>
</tr>
<tr>
<td>Gauche 1</td><td rowspan="3">Droite</td>
</tr>
<tr>
<td>Gauche 2</td>
</tr>
<tr>
<td>Gauche 3</td>
</tr>
</table>
|
Le nombre de cellules fusionnées n’est pas limité. On peut combiner ces deux attributs.
Tableaux triables
modifierLes 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 en-têtes. Le code JavaScript wikibits.js qui permet le tri est copié sur les serveurs de Wikipédia. Une aide supplémentaire, en anglais, se trouve dans en:Help:Sorting.
- Noter que ce code supporte les dates dans l’ordre français (jj/mm/aaaa) avec différents séparateurs, mais ne reconnaît pas les abréviations françaises de mois (seules les abréviations en anglais sur 3 lettres sans accent mais avec une casse quelconque sont reconnues), et uniquement les dates dans un format sur 10 caractères (y compris les séparateurs) : les autres dates seront triées comme du texte. Le modèle {{tri date}} permet de trier efficacement les dates dans un tableau triable.
- De même les nombres sont reconnus dans le format anglais (le point et non la virgule comme séparateurs décimal, les espaces et virgules sont ignorés, mais les signes plus et moins sont reconnus, de même que la notation exponentielle avec le caractère « e » ou « E » pour la multiplication par une puissance entière de 10).
Nombre | Alphabet | Dates | Monnaie | Non triable |
---|---|---|---|---|
1 | Z | 02-02-2004 | 5.00 | Cette |
2 | y | 13-apr-2005 | colonne | |
3 | X | 17.aug.2006 | 6.50 | n’est |
4 | w | 01.Jan.2005 | 4.20 | pas |
5 | V | 05/12/2006 | 7.15 | triable. |
Total : 15 | Total : 29.55 |
Il est possible de créer des colonnes non triables en spécifiant l’attribut de colonne class="unsortable"
, et d’exclure des rangées complètes en bas de tableau avec l’attribut de rangée class="sortbottom"
:
{|class="wikitable sortable" |- ! Nombre !! Alphabet !! Dates !! Monnaie !!class="unsortable"| Non triable |- | 1 || Z || 02-02-2004 || 5.00 || Cette |- | 2 || y || 13-apr-2005 || || colonne |- | 3 || X || 17.aug.2006 || 6.50 || n’est |- | 4 || w || 01.Jan.2005 || 4.20 || pas |- | 5 || V || 05/12/2006 || 7.15 || triable. |-class="sortbottom" ! Total : 15 !! !! !! Total : 29.55 !! |}
Le tri peut être faussé par des caractères accentués, des formats de nombres ou de dates (la fonctionnalité de tri ne reconnaît correctement que les nombres et dates aux formats anglais). Deux modèles permettent de donner des clés de tri aux valeurs affichées :
- le modèle {{smn}} pour les colonnes de nombres,
- le modèle {{tri1}} pour les chaînes de caractères (voir la section suivante).
Les tables ayant des cellules s’étendant sur plusieurs rangées (rowspan) ou colonnes (colspan) ou ayant des cellules manquantes en fin de ligne peuvent ne pas se trier correctement (la fonctionnalité de tri ne reconnait pas explicitement les groupes de rangées ou de colonnes induits par la présence de cellules fusionnées).
Tri correct des lettres accentuées
modifierPour faire trier correctement les lignes d’un tableau comprenant des lettres accentuées, on peut utiliser le modèle {{tri}} (ou son alias anglais {{sort}}):
Syntaxe :
{{tri|clé de tri|texte affiché}}
{{tri|clé de tri}}''texte affiché''
Par exemple :
{{tri|Elephant|[[Éléphant]]}}
Animal | Codage wiki | Statut de tri |
---|---|---|
Alpaga | [[Alpaga]]
|
OK |
Âne no 1 | {{tri|Ane|[[Âne]]}} {{n°|1}}
|
Bien trié |
Buffle | [[Buffle]]
|
OK |
Éléphant no 1 | {{tri|Elephant|[[Éléphant]]}} {{n°|1}}
|
Bien trié |
Zèbre | {{tri|Zebre|[[Zèbre]]}}
|
Bien trié |
Âne no 2 | [[Âne]] {{n°|2}}
|
Mal trié |
Éléphant no 2 | [[Éléphant]] {{n°|2}}
|
Mal trié |
Les attributs de présentation
modifierwikitable
modifierclass="wikitable" : Permet d'appliquer le style « wikitable » au tableau. Plus élégant qu'un tableau classique, il impose certains attributs (comme la taille de la bordure) et définit des couleurs par défaut.
class="wikitable centre" : Permet d'adapter le style « wikitable » au tableau et de le centrer.
border
modifierborder permet de spécifier la taille de la bordure du tableau, des lignes ou des cellules. La classe « wikitable » impose sa taille de bordure et ces deux attributs ne devraient pas être utilisés en même temps.
style="border:taille style couleur;"
où
- taille est l'épaisseur de la bordure (la taille 0 signifie « pas de bordure »),
- style est le type de bordure (solid pour une ligne pleine)
- couleur est un nom ou un code de couleur
Résultat affiché | Codage wiki | Codage HTML | ||
---|---|---|---|---|
|
{| |Sans bordure 1 |Sans bordure 2 |} |
<table>
<tr>
<td>Sans bordure 1</td>
<td>Sans bordure 2</td>
</tr>
</table>
| ||
|
{| style="border:1px solid black;" |style="border:1px solid blue;"|Bordure bleue |style="border:1px solid red;"|Bordure rouge |} |
<table style="border:1px solid black;">
<tr>
<td style="border:1px solid blue;">Bordure bleue</td>
<td style="border:1px solid red;">Bordure rouge</td>
</tr>
</table>
| ||
|
{|style="border: 2px solid black;" |Exemple : solid |} |
<table style="border: 2px solid black;">
<tr>
<td>Exemple : solid</td>
</tr>
</table>
| ||
|
{|style="border: 2px dotted black;" |Exemple : dotted |} |
<table style="border: 2px dotted black;">
<tr>
<td>Exemple : dotted</td>
</tr>
</table>
| ||
|
{|style="border: 2px dashed black;" |Exemple : dashed |} |
<table style="border: 2px dashed black;">
<tr>
<td>Exemple : dashed</td>
</tr>
</table>
| ||
|
{|style="border: 5px double grey;" |Exemple : double |} |
<table style="border: 5px double grey;">
<tr>
<td>Exemple : double</td>
</tr>
</table>
|
Alignements
modifierAlignement horizontal du tableau
modifierPour positionner le tableau entier, il est conseillé d'utiliser la class correspondante :
class="wikitable gauche" class="wikitable centre" class="wikitable droite"
Un exemple de positionnement d'un tableau :
Résultat affiché | Codage wiki | Codage HTML | |
---|---|---|---|
|
{| class="wikitable gauche" |À gauche |} |
<table class="wikitable gauche">
<tr>
<td>À gauche</td>
</tr>
</table>
| |
|
{| class="wikitable centre" |Au centre |} |
<table class="wikitable centre">
<tr>
<td>Au centre</td>
</tr>
</table>
| |
|
{| class="wikitable droite" |À droite |} |
<table class="wikitable droite">
<tr>
<td>À droite</td>
</tr>
</table>
|
Alignement horizontal du texte
modifierPour aligner le texte dans une cellule du tableau il faut utiliser la propriété de style text-align
style="text-align:left;" style="text-align:center;" style="text-align:right;"
Résultat affiché | Codage wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable centre" ! scope=col | Positionnement |- | style="text-align:left;" | g |- | style="text-align:center;" | c |- | style="text-align:right;" | d |} |
<table class="wikitable centre">
<tr>
<th scope=col>Positionnement</th>
</tr>
<tr>
<td style="text-align:left;">g</td>
</tr>
<tr>
<td style="text-align:center;">c</td>
</tr>
<tr>
<td style="text-align:right;">r</td>
</tr>
</table>
|
Alignement vertical du texte
modifierPour 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.
Résultat affiché | Codage wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable centre" ! scope=row style="height:150px;" | Position | style="vertical-align:top;" | Haut | style="vertical-align:middle;" | Milieu | style="vertical-align:bottom;" | Bas |} |
<table class="wikitable centre">
<tr>
<th scope=row style="height:150px;">Position</th>
<td style="vertical-align:top;">Haut</td>
<td style="vertical-align:middle;">Milieu</td>
<td style="vertical-align:bottom;">Bas</td>
</tr>
</table>
|
Alignement horizontal et vertical du texte
modifierLes différents styles peuvent-être combinés pour placer le texte où l'on veux.
Résultat affiché | Wikicode | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
{| class="wikitable centre" !scope=col |titre A !scope=col |titre B !scope=col |titre C !scope=col |titre D !scope=col |titre E !scope=col |titre F |- style="height:100px;" | style="text-align:left; vertical-align:top;" | hg | style="text-align:right; vertical-align:top;" | hd | style="text-align:center; vertical-align:top;" | hc | style="text-align:right; vertical-align:middle;" | md | style="text-align:right; vertical-align:bottom;" | bd | style="text-align:center" | ctr |} |
border-spacing, cellpadding et margin
modifierLa propriété de style border-spacing modifie l'espacement entre les cellules, ou entre une cellule et la bordure extérieure du tableau (l’attribut cellspacing a le même effet mais la valeur est systématiquement en pixels, et cet attribut n'est plus valide en HTML5) .
style="border-spacing: npx;"
cellspacing="n"
Avec la propriété de style border-spacing
:
Résultat affiché | Codage wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{|style="width:100%; border:1px solid #AAAAAA;" |- style="background-color:#E0E0FF;" ! scope=col width="33%" | Résultat affiché ! scope=col width="33%" | Codage wiki ! scope=col width="33%" | Codage HTML |- | {| style="border:1px solid grey; border-spacing:5px" |style="border:1px solid grey;" | Cellule 1 |style="border:1px solid grey;" |Cellule 2 |- |style="border:1px solid grey;" |Cellule 3 |style="border:1px solid grey;" |Cellule 4 |} |
<table style="border:1px solid grey; border-spacing:5px">
<tr>
<td style="border:1px solid grey;">Cellule 1</td>
<td style="border:1px solid grey;">Cellule 2</td>
</tr>
<tr>
<td style="border:1px solid grey;">Cellule 3</td>
<td style="border:1px solid grey;">Cellule 4</td>
</tr>
</table>
| ||||
|
{| class="wikitable" style="border-collapse:separate; border-spacing:1.5em" |Cellule 1 |Cellule 2 |- |Cellule 3 |Cellule 4 |} |
<table class="wikitable" style="border-collapse:separate; border-spacing:1.5em">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
|
L’attribut cellpadding modifie l'espacement (en pixels uniquement) entre la bordure extérieure d'une cellule et son contenu (cet espacement supplémentaire n’est pas compté dans la largeur ou la hauteur de la cellule indiquées par les attributs width ou height ou les propriétés de style CSS équivalentes, ni dans les marges du contenu). On ne peut pas le modifier autrement par une propriété de style applicable à tout le tableau, mais on peut le modifier cellule par cellule avec la propriété de style CSS style="padding: npx;"
) :
cellpadding="n"
Avec l'attribut cellpadding
:
Résultat affiché | Codage wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| border="1" cellpadding="5" |Cellule 1 |Cellule 2 |- |Cellule 3 |Cellule 4 |} |
<table border="1" cellpadding="5">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
| ||||
|
{| border="1" cellpadding="20" |Cellule 1 |Cellule 2 |- |Cellule 3 |Cellule 4 |} |
<table border="1" cellpadding="20">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
|
Il existe également la propriété de style CSS style="margin:"
qui modifie l'espacement entre le bord du tableau et le bloc contenant le tableau (ce style n’a pas d’effet sur le contenu des cellules) :
style="margin: npx;"
Avec l'attribut margin
(seulement utilisable avec style=
, voir quelques sections plus loin) :
Résultat affiché | Codage wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
blabla
blabla |
blabla {| class="wikitable" style="margin: 0px;" |Cellule 1 |Cellule 2 |- |Cellule 3 |Cellule 4 |} blabla |
blabla
<table class="wikitable" style="margin: 0px;">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
blabla
| ||||
blabla
blabla |
blabla {| class="wikitable" style="margin: 2em;" |Cellule 1 |Cellule 2 |- |Cellule 3 |Cellule 4 |} blabla |
blabla
<table class="wikitable" style="margin: 2em;">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
blabla
|
Il est possible de définir des valeurs différentes pour chaque coté :
- avec deux valeurs la première s'applique en haut et bas, la seconde à droite et à gauche ;
- avec quatre valeurs ce sont dans l'ordre les marges haut, droit, bas, gauche ;
- en spécifiant le coté on peut ne définir que la valeur nécessaire
style="margin: hbpx dgpx;" style="margin: hpx dpx bpx gpx;" style="margin-left: gpx;"
width et height
modifierLes propriétés de style width et height spécifient la largeur et la hauteur, aussi bien du tableau que des cellules. La taille peut se préciser en pixel (px), hauteur d'x (ex) cadratin (em), ou en pourcentage (%). Dans les deux cas, cela représente une taille minimale.
Le premier exemple montre l'utilisation d'une taille fixe. Le premier cas utilise une largeur de 10 pixels, cependant la largeur du contenu du tableau étant plus grande, il s'adapte donc à cette taille. Le second cas utilise une taille de 100 pixels ; la valeur 100 pixels est plus grande que la largeur occupée par le contenu du tableau, celui-ci a donc bien une largeur de 100 pixels. Le troisième exemple utilise une largeur de 10 cadratins.
Résultat affiché | Codage wiki | Codage HTML | |
---|---|---|---|
|
{| class="wikitable" style="width:10px;" |Cellule |} |
<table class="wikitable" style="width:10px;">
<tr>
<td>Cellule</td>
</tr>
</table>
| |
|
{| class="wikitable" style="width:100px;" |Cellule |} |
<table class="wikitable" style="width:100px;">
<tr>
<td>Cellule</td>
</tr>
</table>
| |
|
{| class="wikitable" style="width:10em;" |Cellule |} |
<table class="wikitable" style="width:10em;">
<tr>
<td>Cellule</td>
</tr>
</table>
|
Voyons ce qu'il en est de l'utilisation d'une taille proportionnelle. Dans le premier cas, le tableau doit occuper un maximum de 33 % de la largeur disponible. Dans le deuxième cas, le tableau doit occuper 100 % de l'espace disponible.
Résultat affiché | Codage wiki | Codage HTML | |
---|---|---|---|
|
{| class="wikitable centre" style="width:33%;" |Cellule |} |
<table class="wikitable centre" style="width:33%;">
<tr>
<td>Cellule</td>
</tr>
</table>
| |
|
{| class="wikitable centre" style="width:100%;" |Cellule |} |
<table class="wikitable centre" style="width:100%;">
<tr>
<td>Cellule</td>
</tr>
</table>
|
Pour la propriété height
, l'utilisation est la même que pour width
, mais cette fois-ci la hauteur du tableau change. Ces deux propriétés peuvent également être utilisés pour chacune des cellules :
Résultat affiché | Codage wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| class="wikitable centre" style="width:100%;" | colspan="3" style="height:2em;" | Tableau 1 |- | style="width:33%;" | 1/3 cellule 1 | style="width:33%;" | 1/3 cellule 2 | style="width:33%;" | 1/3 cellule 3 |} |
<table class="wikitable centre" style="width:100%;">
<tr>
<td colspan="3" style="height:2em;">Tableau 1</td>
</tr>
<tr>
<td style="width:33%;">1/3 cellule 1</td>
<td style="width:33%;">1/3 cellule 2</td>
<td style="width:33%;">1/3 cellule 3</td>
</tr>
</table>
| ||||||
|
{| class="wikitable centre" style="width:100%;" | colspan="3" | Tableau 2 |- | style="width:50%; height:2em;" | 1/2 | style="width:25%;" | 1/4 | style="width:25%;" | 1/4 |} |
<table class="wikitable centre" style="width:100%;">
<tr>
<td colspan="3">Tableau 2</td>
</tr>
<tr>
<td style="width:50%; height:2em;">1/2</td>
<td style="width:25%;">1/4</td>
<td style="width:25%;">1/4</td>
</tr>
</table>
|
bgcolor et ligne grise
modifier- bgcolor permet de changer la couleur de fond d'une cellule :
bgcolor="#hex"
- Pour spécifier une couleur, insérer le caractère # suivi du code couleur en hexadécimal.
Résultat affiché | Codage wiki | Codage HTML | |||
---|---|---|---|---|---|
|
{| class="wikitable centre" | bgcolor="#FF0000" | Rouge | bgcolor="#00FF00" | Vert | bgcolor="#0000FF" | Bleu |} |
<table class="wikitable centre">
<tr>
<td bgcolor="#FF0000">Rouge</td>
<td bgcolor="#00FF00">Vert</td>
<td bgcolor="#0000FF">Bleu</td>
</tr>
</table>
|
- Dans un tableau utilisant la classe « wikitable », utiliser l'attribut style pour modifier la couleur de fond des en-têtes de colonnes et de lignes :
style="background: #hex;"
Résultat affiché | Codage wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
|
<table class="wikitable centre">
<tr>
<th scope=col>Titre 1</th>
<th scope=col style="background: #00FF00;">Titre 2 vert</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
</table>
|
- Le style « alternance » permet d'alterner les couleurs de ligne pour faciliter leur lecture :
{| class="wikitable sortable alternance"
Résultat affiché | Codage wiki | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
|
{|class="wikitable sortable alternance" !Pays !Capitale |- |France || Paris |- |Allemagne || Berlin |- |République galactique|| Coruscant |- |Empire romain || Rome |} |
style
modifierLe style
permet de changer tout l'aspect graphique, tant dans le tableau que pour une cellule. Changeons la couleur de fond du tableau :
Résultat affiché | Codage wiki | Codage HTML | |||
---|---|---|---|---|---|
|
{| class="wikitable centre" style="background-color: #CCFFCC" | Cellule 1 |- | Cellule 2 |- | Cellule 3 |} |
<table class="wikitable centre" style="background-color: #CCFFCC">
<tr>
<td>Cellule 1</td>
</tr>
<tr>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr>
</table>
|
L'attribut style permet de spécifier la mise en forme comme la couleur, la police de caractère, la couleur de fond pour une cellule, etc. Reportez-vous à un didacticiel sur les CSS.
Autre exemple : les coins arrondis.
Résultat affiché | Codage wiki | Codage HTML | |||
---|---|---|---|---|---|
|
{| align=center style="border: solid 1px black; border-radius: 1em;" | Cellule 1 |- | Cellule 2 |- | Cellule 3 |} |
<table align=center style="border: solid 1px black; border-radius: 1em;">
<tr>
<td>Cellule 1</td>
</tr>
<tr>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr>
</table>
|
Quelques exemples
modifierQuelques exemples de tableaux assez complexes :
Voir aussi
modifier- Aide:Tableau
- Wikipédia:Modèles/Tableaux : modèles pour faciliter la création de tableaux
- Help:Tables sur Mediawiki.
- Help:Tables sur Metawiki.