Bienvenue sur le wiki de Nuit debout, nous sommes le 2971 mars.



Aide:Insérer un tableau (wikicode, expert)

De NuitDebout
Aller à : navigation, rechercher

La syntaxe des tableaux[modifier le wikicode]

Ouverture et fermeture[modifier le wikicode]

Les 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
cellule 
{|class="wikitable centre"
|-
| cellule
|}

 <table class="wikitable centre">
   <tr>
     <td>cellule</td>
   </tr>
 </table>

Cellules[modifier le wikicode]

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
Résultat affiché Code wiki Code HTML
Gauche Droite 
{| class="wikitable centre"
|-
| Gauche
| Droite
|}

 <table class="wikitable centre">
   <tr>
     <td>Gauche</td>
     <td>Droite</td>
   </tr>
 </table>
Gauche Droite 
{| class="wikitable centre"
|-
| Gauche || Droite
|}

 <table class="wikitable centre">
   <tr>
     <td>Gauche</td>
     <td>Droite</td>
   </tr>
 </table>

Attributs de cellules[modifier le wikicode]

Chacune 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[modifier le wikicode]

Des 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 Modèle:2e colonne vierge, la Modèle:3e colonne sans attribut affichant « Cellule4 », et la Modèle: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[modifier le wikicode]

Pour 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[modifier le wikicode]

Il 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 (60 pixels) et une couleur (rose).

Les styles séparés étaient: hauteur: style="height:60px;" et couleur: style="background-color:#FFEFE5;"

Résultat affiché Wikicode
titre A titre B titre C
texte1 texte2 texte3 
{| 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)[modifier le wikicode]

Si 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
Cellule 1.1 Cellule 1.2 Cellule 1.3
Cellule 2.1 Cellule 2.2 Cellule 2.3 
 {| 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
Haut
Bas 
{| 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[modifier le wikicode]

En 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
Titre1 Titre2
contenu 1a contenu 2a
contenu 1b contenu 2b 
{| 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
Titre 1 Titre 2
Cellule 1 Cellule 2 
{| 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
Titre ligne Cellule 1 
{| 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>
Titre ligne Cellule 1 
{| 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[modifier le wikicode]

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

Si plusieurs titres sont indiqués, seul le premier est pris en compte.

Résultat affiché Codage wiki Codage HTML
Titre
Colonne 1 Colonne 2 
{| 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[modifier le wikicode]

Les 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
Cellule 1 Cellule 2 Cellule 3
Simple Fusionnée 
{| 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
Cellules simples Colonne
Gauche 1 Droite
Gauche 2
Gauche 3 
{| 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[modifier le wikicode]

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 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[modifier le wikicode]

Pour 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]]}}
Exemple d’un tableau complet
Animal Codage wiki Statut de tri
Alpaga [[Alpaga]] OK
‍Âne Modèle:N° {{tri|Ane|[[Âne]]}} {{n°|1}} Bien trié
Buffle [[Buffle]] OK
Éléphant Modèle:N° {{tri|Elephant|[[Éléphant]]}} {{n°|1}} Bien trié
Zèbre {{tri|Zebre|[[Zèbre]]}} Bien trié
Âne Modèle:N° [[Âne]] {{n°|2}} Mal trié
Éléphant Modèle:N° [[Éléphant]] {{n°|2}} Mal trié

Les attributs de présentation[modifier le wikicode]

wikitable[modifier le wikicode]

class="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[modifier le wikicode]

border 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 
{|
|Sans bordure 1
|Sans bordure 2
|}

<table>
  <tr>
    <td>Sans bordure 1</td>
    <td>Sans bordure 2</td>
  </tr>
</table>
Bordure bleue Bordure rouge 
{| 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>
Exemple : solid 
{|style="border: 2px solid black;"
|Exemple : solid
|}

<table style="border: 2px solid black;">
  <tr>
    <td>Exemple : solid</td>
  </tr>
</table>
Exemple : dotted 
{|style="border: 2px dotted black;"
|Exemple : dotted
|}

<table style="border: 2px dotted black;">
  <tr>
    <td>Exemple : dotted</td>
  </tr>
</table>
Exemple : dashed 
{|style="border: 2px dashed black;"
|Exemple : dashed
|}

<table style="border: 2px dashed black;">
  <tr>
    <td>Exemple : dashed</td>
  </tr>
</table>
Exemple : double 
{|style="border: 5px double grey;"
|Exemple : double
|}

<table style="border: 5px double grey;">
  <tr>
    <td>Exemple : double</td>
  </tr>
</table>

Alignements[modifier le wikicode]

Alignement horizontal du tableau[modifier le wikicode]

Pour 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
À gauche 
{| class="wikitable gauche"
|À gauche
|}

<table class="wikitable gauche">
  <tr>
    <td>À gauche</td>
  </tr>
</table>
Au centre 
{| class="wikitable centre"
|Au centre
|}

<table class="wikitable centre">
  <tr>
    <td>Au centre</td>
  </tr>
</table>
À droite 
{| class="wikitable droite"
|À droite
|}

<table class="wikitable droite">
  <tr>
    <td>À droite</td>
  </tr>
</table>

Alignement horizontal du texte[modifier le wikicode]

Pour 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
Positionnement
g
c
d 
{| 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[modifier le wikicode]

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.

Résultat affiché Codage wiki Codage HTML
Position Haut Milieu Bas 
{| 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[modifier le wikicode]

Les différents styles peuvent-être combinés pour placer le texte où l'on veux.

Résultat affiché Wikicode
titre A titre B titre C titre D titre E titre F
hg hd hc md bd ctr 
{| 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[modifier le wikicode]

La 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
Cellule 1 Cellule 2
Cellule 3 Cellule 4 
{|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>
Cellule 1 Cellule 2
Cellule 3 Cellule 4 
{| 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
Cellule 1 Cellule 2
Cellule 3 Cellule 4 
{| 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>
Cellule 1 Cellule 2
Cellule 3 Cellule 4 
{| 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
Cellule 1 Cellule 2
Cellule 3 Cellule 4

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
Cellule 1 Cellule 2
Cellule 3 Cellule 4

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[modifier le wikicode]

Les 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 pixels (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
Cellule 
{| class="wikitable" style="width:10px;"
|Cellule
|}

<table class="wikitable" style="width:10px;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
Cellule 
{| class="wikitable" style="width:100px;"
|Cellule
|}

<table class="wikitable" style="width:100px;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
Cellule 
{| 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
Cellule 
{| class="wikitable centre" style="width:33%;"
|Cellule
|}

<table class="wikitable centre" style="width:33%;">
  <tr>
    <td>Cellule</td>
  </tr>
</table>
Cellule 
{| 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
Tableau 1
1/3 cellule 1 1/3 cellule 2 1/3 cellule 3 
{| 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>
Tableau 2
1/2 1/4 1/4 
{| 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 le wikicode]

  • bgcolor permet de changer la couleur de fond d'une cellule :
bgcolor="#hex"
Résultat affiché Codage wiki Codage HTML
Rouge Vert Bleu 
{| 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
Titre 1 Titre 2 vert
Cellule 1 Cellule 2

{| class="wikitable centre"
! scope=col | Titre 1
! scope=col style="background: #00FF00;" | Titre 2 vert
|-
|Cellule 1
|Cellule 2
|} 

<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
Pays Capitale
France Paris
Allemagne Berlin
République galactique Coruscant
Empire romain Rome 
{|class="wikitable sortable alternance" 
!Pays
!Capitale
|-
|France || Paris
|-
|Allemagne || Berlin
|-
|République galactique|| Coruscant
|-
|Empire romain || Rome
|}

style[modifier le wikicode]

Le 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
Cellule 1
Cellule 2
Cellule 3 
{| 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
Cellule 1
Cellule 2
Cellule 3 
{| 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[modifier le wikicode]

Quelques exemples de tableaux assez complexes :

Voir aussi[modifier le wikicode]

Récupérée de « http://wiki.nuit-debout.fr/index.php?title=Aide:Insérer_un_tableau_(wikicode,_expert)&oldid=151678 »