Utilisateur:Raymond SÉNÈQUE/Article en cours : Différence entre versions

De WikiGenWeb
Aller à : navigation, rechercher
m
m
Ligne 1 : Ligne 1 :
 
 
{{Aide:Tableaux/m}}
 
{{Aide:Tableaux/m}}
Cette page décrit exhaustivement la syntaxe des tableaux en langage Wiki, et donne quelques conseils sur leur utilisation. Pour une explication détaillée de cette syntaxe, lire les pages [[Aide:Les tableaux pour les novices]] et [[Aide:Les tableaux pour les curieux]].
+
Cette page décrit exhaustivement la syntaxe des tableaux en langage Wiki, et donne quelques conseils sur leur utilisation. Pour une explication détaillée de cette syntaxe, lire les pages [[Aide:Les tableaux pour les novices]] et [[Aide:Tableau pour initiés]].
 
Pour remplacer la syntaxe des tableaux en HTML, {{en}} [[:en:User:Magnus Manske|Magnus Manske]] a créé des balises en langage Wiki. Elles remplacent les balises HTML <nowiki><table>, <tr>, <td>, <th> et <caption></nowiki>. Vous trouverez dans cette page, le codage HTML équivalent pour chaque exemple Wiki présenté.
 
Pour remplacer la syntaxe des tableaux en HTML, {{en}} [[:en:User:Magnus Manske|Magnus Manske]] a créé des balises en langage Wiki. Elles remplacent les balises HTML <nowiki><table>, <tr>, <td>, <th> et <caption></nowiki>. Vous trouverez dans cette page, le codage HTML équivalent pour chaque exemple Wiki présenté.
 
Dans les articles, la syntaxe Wiki est préférée au code HTML. En revanche, dans les modèles, l’utilisation de la syntaxe wiki peut devenir rapidement illisible dès que le tableau devient un peu complexe, et entre en conflit avec la syntaxe des [[mw:Help:Extension:ParserFunctions|fonctions parseurs]] et des [[Aide:Modèle|modèles]] ; elle n’est donc pas adaptée aux modèles, spécialement ceux générant des tableaux avec parties facultatives. Dans les modèles, il est donc '''fortement recommandé''' d’utiliser plutôt le codage HTML.
 
Dans les articles, la syntaxe Wiki est préférée au code HTML. En revanche, dans les modèles, l’utilisation de la syntaxe wiki peut devenir rapidement illisible dès que le tableau devient un peu complexe, et entre en conflit avec la syntaxe des [[mw:Help:Extension:ParserFunctions|fonctions parseurs]] et des [[Aide:Modèle|modèles]] ; elle n’est donc pas adaptée aux modèles, spécialement ceux générant des tableaux avec parties facultatives. Dans les modèles, il est donc '''fortement recommandé''' d’utiliser plutôt le codage HTML.
Ligne 14 : Ligne 13 :
 
**n'utiliser les éléments de tableau pour la mise en forme que si leur contenu se linéarise de manière compréhensible. Ne pas utiliser alors d'éléments propres aux tableaux de données (titres <code><nowiki><caption></nowiki></code> ou <code><nowiki>|+</nowiki></code>, en-têtes de ligne ou de colonne <code><nowiki><th></nowiki></code> ou <code><nowiki>!</nowiki></code>).
 
**n'utiliser les éléments de tableau pour la mise en forme que si leur contenu se linéarise de manière compréhensible. Ne pas utiliser alors d'éléments propres aux tableaux de données (titres <code><nowiki><caption></nowiki></code> ou <code><nowiki>|+</nowiki></code>, en-têtes de ligne ou de colonne <code><nowiki><th></nowiki></code> ou <code><nowiki>!</nowiki></code>).
 
**éviter autant que possible l'utilisation des tableaux triables.
 
**éviter autant que possible l'utilisation des tableaux triables.
Aide : Pour savoir si un tableau ne comporte pas de défauts d'accessibilité, il existe dans l'onglet « préférences » un gadget « Accessibilité : affiche une palette d'outils facilitant la vérification de l'accessibilité d'une page », dans la section « Outils avancés », à ajouter à vos préférences. Si du rouge apparait le code est à revoir ! (cf. [[Wikipédia:Atelier accessibilité/Aide gadget]]).
+
Aide : Pour savoir si un tableau ne comporte pas de défauts d'accessibilité, il existe dans l'onglet « préférences » un gadget « Accessibilité : affiche une palette d'outils facilitant la vérification de l'accessibilité d'une page », dans la section « Outils avancés », à ajouter à vos préférences. Si du rouge apparait le code est à revoir ! (cf. [[Wikipédia:Atelier accessibilité/Aide gadget]]).  
 
}}</div>
 
}}</div>
 
{{Recycler}}
 
{{Recycler}}
Ligne 43 : Ligne 42 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <td>cellule</td>
+
  <td>cellule</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 77 : Ligne 76 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <td>gauche</td>
+
  <td>gauche</td>    
    <td>droite</td>
+
  <td>droite</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 97 : Ligne 96 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <td>gauche</td>
+
  <td>gauche</td>    
    <td>droite</td>
+
  <td>droite</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 153 : Ligne 152 :
 
<pre>
 
<pre>
 
  <table>
 
  <table>
  <tr>
+
  <tr>  
    <td>cellule 1.1</td>
+
  <td>cellule 1.1</td>    
    <td>cellule 1.2</td><td> cellule 1.3</td>
+
  <td>cellule 1.2</td><td> cellule 1.3</td>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>cellule 2.1</td><td>cellule 2.2</td>
+
  <td>cellule 2.1</td><td>cellule 2.2</td>    
    <td>cellule 2.3</td>
+
  <td>cellule 2.3</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 190 : Ligne 189 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr style="background:#FFFF00">
+
  <tr style="background:#FFFF00">  
    <td>haut</td>
+
  <td>haut</td>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>bas</td>
+
  <td>bas</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 241 : Ligne 240 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <th scope="col">Titre 1</th>
+
  <th scope="col">Titre 1</th>    
    <th scope="col">Titre 2</th>
+
  <th scope="col">Titre 2</th>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>cellule 1</td>
+
  <td>cellule 1</td>    
    <td>cellule 2</td>
+
  <td>cellule 2</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 272 : Ligne 271 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <th scope="row">Titre ligne</th><th>Cellule 1</th>
+
  <th scope="row">Titre ligne</th><th>Cellule 1</th>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 294 : Ligne 293 :
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
 
   <tr>
 
   <tr>
    <th scope="row">Titre ligne</th><td>Cellule 1</td>
+
  <th scope="row">Titre ligne</th><td>Cellule 1</td>  
 
   </tr>
 
   </tr>
 
  </table>
 
  </table>
Ligne 330 : Ligne 329 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <caption>Titre</caption>
+
  <caption>Titre</caption>  
  <tr>
+
  <tr>  
    <th scope="col">Colonne 1</th>
+
  <th scope="col">Colonne 1</th>    
    <th scope="col">Colonne 2</th>
+
  <th scope="col">Colonne 2</th>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 376 : Ligne 375 :
 
   <caption>Titre</caption>
 
   <caption>Titre</caption>
 
   <tr>
 
   <tr>
    <td></td>
+
  <td></td>  
    <th scope="col">Titre 1</th>
+
  <th scope="col">Titre 1</th>  
    <th scope="col">Titre 2</th>
+
  <th scope="col">Titre 2</th>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <th scope="row">Titre ligne</th>
+
  <th scope="row">Titre ligne</th>  
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
  </table>
 
  </table>
Ligne 414 : Ligne 413 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <td>Cellule 1</td><td>Cellule 2</td><td>Cellule 3</td>
+
  <td>Cellule 1</td><td>Cellule 2</td><td>Cellule 3</td>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>Simple</td><td colspan="2">Fusionnée</td>
+
  <td>Simple</td><td colspan="2">Fusionnée</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 455 : Ligne 454 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <th>Cellules simples</td><th>Colonne</th>
+
  <th>Cellules simples</td><th>Colonne</th>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>Gauche 1</td><td rowspan="3">Droite</td>
+
  <td>Gauche 1</td><td rowspan="3">Droite</td>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>Gauche 2</td>
+
  <td>Gauche 2</td>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>Gauche 3</td>
+
  <td>Gauche 3</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 487 : Ligne 486 :
 
  | Gauche
 
  | Gauche
 
  |
 
  |
  {|class="wikitable centre"
+
  {|class="wikitable centre"  
  |-
+
  |-  
  !scope="row’| Tableau imbriqué
+
  !scope="row’| Tableau imbriqué  
  | Autre cellule
+
  | Autre cellule  
  |}
+
  |}  
 
  | Droite
 
  | Droite
 
  |-
 
  |-
Ligne 504 : Ligne 503 :
 
  | Gauche
 
  | Gauche
 
  |
 
  |
  {|class="wikitable centre"
+
  {|class="wikitable centre"  
  |-
+
  |-  
  !scope="row"| Tableau imbriqué
+
  !scope="row"| Tableau imbriqué  
  | Autre cellule
+
  | Autre cellule  
  |}
+
  |}  
 
  | Droite
 
  | Droite
 
  |-
 
  |-
Ligne 517 : Ligne 516 :
 
<pre>
 
<pre>
 
  <table class="wikitable centre">
 
  <table class="wikitable centre">
  <tr>
+
  <tr>  
    <td>Haut 1</td><td>Haut 2</td><td>Haut 3</td>
+
  <td>Haut 1</td><td>Haut 2</td><td>Haut 3</td>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>Gauche</td>
+
  <td>Gauche</td>    
    <td>
+
  <td>    
      <table class="wikitable centre">
+
  <table class="wikitable centre">      
        <tr>
+
  <tr>        
          <th scope="row">Tableau imbriqué</th>
+
  <th scope="row">Tableau imbriqué</th>          
          <td>Autre cellule</td>
+
  <td>Autre cellule</td>          
        </tr>
+
  </tr>        
      </table>
+
  </table>      
    </td>
+
  </td>    
    <td>Droite</td>
+
  <td>Droite</td>    
  </tr>
+
  </tr>  
  <tr>
+
  <tr>  
    <td>Bas 1</td><td>Bas 2</td><td>Bas 3</td>
+
  <td>Bas 1</td><td>Bas 2</td><td>Bas 3</td>    
  </tr>
+
  </tr>  
 
  </table>
 
  </table>
 
</pre>
 
</pre>
Ligne 655 : Ligne 654 :
 
<table border="0">
 
<table border="0">
 
   <tr>
 
   <tr>
    <td>sans bordure 1</td>
+
  <td>sans bordure 1</td>  
    <td>sans bordure 2</td>
+
  <td>sans bordure 2</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 677 : Ligne 676 :
 
<table border="1">
 
<table border="1">
 
   <tr>
 
   <tr>
    <td>bordure normale 1</td>
+
  <td>bordure normale 1</td>  
    <td>bordure normale 2</td>
+
  <td>bordure normale 2</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 684 : Ligne 683 :
 
|-
 
|-
 
|}
 
|}
On peut également choisir le style de la bordure  
+
On peut également choisir le style de la bordure  
 
  style="border:Xpx Y"
 
  style="border:Xpx Y"
 
X est la taille de la bordure (en pixels), et Y son style (<code>dotted</code>, <code>dashed</code>, <code>double</code>,...)
 
X est la taille de la bordure (en pixels), et Y son style (<code>dotted</code>, <code>dashed</code>, <code>double</code>,...)
Ligne 708 : Ligne 707 :
 
<table style="border:2px solid black;">
 
<table style="border:2px solid black;">
 
   <tr>
 
   <tr>
    <td>exemple : solid</td>
+
  <td>exemple : solid</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 727 : Ligne 726 :
 
<table style="border:2px dotted black;">
 
<table style="border:2px dotted black;">
 
   <tr>
 
   <tr>
    <td>exemple : dotted</td>
+
  <td>exemple : dotted</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 746 : Ligne 745 :
 
<table style="border:2px dashed black;">
 
<table style="border:2px dashed black;">
 
   <tr>
 
   <tr>
    <td>exemple : dashed</td>
+
  <td>exemple : dashed</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 765 : Ligne 764 :
 
<table style="border:5px double black;">
 
<table style="border:5px double black;">
 
   <tr>
 
   <tr>
    <td>exemple : double</td>
+
  <td>exemple : double</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 781 : Ligne 780 :
 
Pour aligner le tableau entier, il est conseillé d'utiliser la ''class'' correspondante :
 
Pour aligner le tableau entier, il est conseillé d'utiliser la ''class'' correspondante :
 
  class="wikitable gauche"
 
  class="wikitable gauche"
  class="wikitable centre"  
+
  class="wikitable centre"  
 
  class="wikitable droite"
 
  class="wikitable droite"
 
Un exemple de positionnement d'un tableau :
 
Un exemple de positionnement d'un tableau :
Ligne 804 : Ligne 803 :
 
<table class="wikitable gauche">
 
<table class="wikitable gauche">
 
   <tr>
 
   <tr>
    <td>à gauche</td>
+
  <td>à gauche</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 823 : Ligne 822 :
 
<table class="wikitable centre">
 
<table class="wikitable centre">
 
   <tr>
 
   <tr>
    <td>au centre</td>
+
  <td>au centre</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 842 : Ligne 841 :
 
<table class="wikitable droite">
 
<table class="wikitable droite">
 
   <tr>
 
   <tr>
    <td>à droite</td>
+
  <td>à droite</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 880 : Ligne 879 :
 
<table class="wikitable centre">
 
<table class="wikitable centre">
 
   <tr>
 
   <tr>
    <td>Positionnement</td>
+
  <td>Positionnement</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td align="left">g</td>
+
  <td align="left">g</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td align="center">c</td>
+
  <td align="center">c</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td align="right">r</td>
+
  <td align="right">r</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 921 : Ligne 920 :
 
<table class="wikitable centre">
 
<table class="wikitable centre">
 
   <tr>
 
   <tr>
    <td height="150">Position</td>
+
  <td height="150">Position</td>  
    <td valign="top">haut</td>
+
  <td valign="top">haut</td>  
    <td valign="middle">milieu</td>
+
  <td valign="middle">milieu</td>  
    <td valign="bottom">bas</td>
+
  <td valign="bottom">bas</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 985 : Ligne 984 :
 
<table border="1" cellspacing="5">
 
<table border="1" cellspacing="5">
 
   <tr>
 
   <tr>
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 3</td>
+
  <td>cellule 3</td>  
    <td>cellule 4</td>
+
  <td>cellule 4</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 017 : Ligne 1 016 :
 
<table border="1" cellspacing="20">
 
<table border="1" cellspacing="20">
 
   <tr>
 
   <tr>
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 3</td>
+
  <td>cellule 3</td>  
    <td>cellule 4</td>
+
  <td>cellule 4</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 056 : Ligne 1 055 :
 
<table border="1" cellpadding="5">
 
<table border="1" cellpadding="5">
 
   <tr>
 
   <tr>
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 3</td>
+
  <td>cellule 3</td>  
    <td>cellule 4</td>
+
  <td>cellule 4</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 088 : Ligne 1 087 :
 
<table border="1" cellpadding="20">
 
<table border="1" cellpadding="20">
 
   <tr>
 
   <tr>
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 3</td>
+
  <td>cellule 3</td>  
    <td>cellule 4</td>
+
  <td>cellule 4</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 128 : Ligne 1 127 :
 
<table border="1" align="left" style="margin:0px;">
 
<table border="1" align="left" style="margin:0px;">
 
   <tr>
 
   <tr>
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 3</td>
+
  <td>cellule 3</td>  
    <td>cellule 4</td>
+
  <td>cellule 4</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 161 : Ligne 1 160 :
 
<table border="1" align="left" style="margin-right:20px;">
 
<table border="1" align="left" style="margin-right:20px;">
 
   <tr>
 
   <tr>
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 3</td>
+
  <td>cellule 3</td>  
    <td>cellule 4</td>
+
  <td>cellule 4</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 194 : Ligne 1 193 :
 
<table border="1" width="10">
 
<table border="1" width="10">
 
   <tr>
 
   <tr>
    <td>cellule</td>
+
  <td>cellule</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 213 : Ligne 1 212 :
 
<table class="wikitable" width="100">
 
<table class="wikitable" width="100">
 
   <tr>
 
   <tr>
    <td>cellule</td>
+
  <td>cellule</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 232 : Ligne 1 231 :
 
<table class="wikitable" width="200">
 
<table class="wikitable" width="200">
 
   <tr>
 
   <tr>
    <td>cellule</td>
+
  <td>cellule</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 259 : Ligne 1 258 :
 
<table class="wikitable centre" width="33%">
 
<table class="wikitable centre" width="33%">
 
   <tr>
 
   <tr>
    <td>cellule</td>
+
  <td>cellule</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 278 : Ligne 1 277 :
 
<table class="wikitable centre" width="50%">
 
<table class="wikitable centre" width="50%">
 
   <tr>
 
   <tr>
    <td>cellule</td>
+
  <td>cellule</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 297 : Ligne 1 296 :
 
<table class="wikitable centre" width="100%">
 
<table class="wikitable centre" width="100%">
 
   <tr>
 
   <tr>
    <td>cellule</td>
+
  <td>cellule</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 332 : Ligne 1 331 :
 
<table class="wikitable centre" width="100%">
 
<table class="wikitable centre" width="100%">
 
   <tr>
 
   <tr>
    <td colspan="3">Tableau 1</td>
+
  <td colspan="3">Tableau 1</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td width="33%">1/3 cellule 1</td>
+
  <td width="33%">1/3 cellule 1</td>  
    <td width="33%">1/3 cellule 2</td>
+
  <td width="33%">1/3 cellule 2</td>  
    <td width="33%">1/3 cellule 3</td>
+
  <td width="33%">1/3 cellule 3</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 364 : Ligne 1 363 :
 
<table class="wikitable centre" width="100%">
 
<table class="wikitable centre" width="100%">
 
   <tr>
 
   <tr>
    <td colspan="3">Tableau 2</td>
+
  <td colspan="3">Tableau 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td width="50%">1/2</td>
+
  <td width="50%">1/2</td>  
    <td width="25%">1/4</td>
+
  <td width="25%">1/4</td>  
    <td width="25%">1/4</td>
+
  <td width="25%">1/4</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 402 : Ligne 1 401 :
 
<table class="wikitable centre">
 
<table class="wikitable centre">
 
   <tr>
 
   <tr>
    <td bgcolor="#FF0000">rouge</td>
+
  <td bgcolor="#FF0000">rouge</td>  
    <td bgcolor="#00FF00">vert</td>
+
  <td bgcolor="#00FF00">vert</td>  
    <td bgcolor="#0000FF">bleu</td>
+
  <td bgcolor="#0000FF">bleu</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 437 : Ligne 1 436 :
 
<table class="wikitable centre">
 
<table class="wikitable centre">
 
  <tr>
 
  <tr>
  <th scope=col>Titre 1</th>
+
  <th scope=col>Titre 1</th>  
  <th scope=col style="background:#00FF00;">Titre 2 vert</th>
+
  <th scope=col style="background:#00FF00;">Titre 2 vert</th>  
 
  </tr>
 
  </tr>
 
  <tr>
 
  <tr>
  <td>cellule 1</td>
+
  <td>cellule 1</td>  
  <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
  </tr>
 
  </tr>
 
</table>
 
</table>
Ligne 1 481 : Ligne 1 480 :
 
<table class="wikitable centre">
 
<table class="wikitable centre">
 
   <tr>
 
   <tr>
    <td>Ligne 1</td>
+
  <td>Ligne 1</td>  
    <td>fond blanc</td>
+
  <td>fond blanc</td>  
 
   </tr>
 
   </tr>
 
   <tr bgcolor="#f5f5f5">
 
   <tr bgcolor="#f5f5f5">
    <td>Ligne 2</td>
+
  <td>Ligne 2</td>  
    <td>fond gris</td>
+
  <td>fond gris</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>Ligne 3</td>
+
  <td>Ligne 3</td>  
    <td>fond blanc</td>
+
  <td>fond blanc</td>  
 
   </tr>
 
   </tr>
 
   <tr bgcolor="#f5f5f5">
 
   <tr bgcolor="#f5f5f5">
    <td>Ligne 4</td>
+
  <td>Ligne 4</td>  
    <td>fond gris</td>
+
  <td>fond gris</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 531 : Ligne 1 530 :
 
style="background-color:#CCFFCC">
 
style="background-color:#CCFFCC">
 
   <tr>
 
   <tr>
    <td>cellule 1</td>
+
  <td>cellule 1</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 2</td>
+
  <td>cellule 2</td>  
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
    <td>cellule 3</td>
+
  <td>cellule 3</td>  
 
   </tr>
 
   </tr>
 
</table>
 
</table>
Ligne 1 543 : Ligne 1 542 :
 
|}
 
|}
 
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 tutorial sur le [[Feuilles de style en cascade|CSS]].
 
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 tutorial sur le [[Feuilles de style en cascade|CSS]].
 +
 +
==Articles connexes==
 +
* [[Aide:Tableau|Tableau]]
  
  

Version du 26 février 2011 à 20:05

Aide:Tableaux/m Cette page décrit exhaustivement la syntaxe des tableaux en langage Wiki, et donne quelques conseils sur leur utilisation. Pour une explication détaillée de cette syntaxe, lire les pages Aide:Les tableaux pour les novices et Aide:Tableau pour initiés. Pour remplacer la syntaxe des tableaux en HTML, (en) Magnus Manske a créé des balises en langage Wiki. Elles remplacent les balises HTML <table>, <tr>, <td>, <th> et <caption>. Vous trouverez dans cette page, le codage HTML équivalent pour chaque exemple Wiki présenté. Dans les articles, la syntaxe Wiki est préférée au code HTML. En revanche, dans les modèles, l’utilisation de la syntaxe wiki peut devenir rapidement illisible dès que le tableau devient un peu complexe, et entre en conflit avec la syntaxe des fonctions parseurs et des modèles ; elle n’est donc pas adaptée aux modèles, spécialement ceux générant des tableaux avec parties facultatives. Dans les modèles, il est donc fortement recommandé d’utiliser plutôt le codage HTML.

Recommandation importante
{{{texte}}}

Modèle:Recycler

La syntaxe des tableaux

Les tableaux et leurs éléments sont délimités principalement par la barre verticale « | » (ou tube) et les accolades « { } ». Pour utiliser ces caractères dans le texte (c’est-à-dire les voir apparaître à l’écran, sans que MediaWiki ne l’interprète comme du code), il faut les mettre dans la balise spéciale « nowiki » : <nowiki>|</nowiki> ; ou bien <nowiki>{</nowiki> ; ou encore <nowiki>}</nowiki>. Les balises HTML peuvent comporter plusieurs attributs : le codage Wiki permet de les insérer, certains étant prédéfinis afin d’uniformiser leur utilisation.

Note : le balisage standard HTML des colonnes de tableaux (avec <col attributs />) ou groupes de colonnes (avec <colgroup attributs>...</colgroup>) et celui des groupes de rangées (avec <thead attributs>...</thead>, <tbody attributs>...</tbody> et <tfoot attributs>...</tfoot>) n’est actuellement pas supporté par MediaWiki dans les pages (pas même avec un codage Wiki) : Mediawiki ne générera aucun groupe de colonnes dans les pages HTML affichées, et placera toutes les rangées dans le même groupe <tbody>...</tbody> implicite (sans aucun attribut).

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

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 chaque cellule placée sur la même ligne de code :

| cellule1 || cellule2 || cellule3
Résultat affiché Codage Wiki Codage 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

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

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 significatives en tête ou fin de cellule seront automatiquement supprimées), 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 tous les groupes de deux barres successives sera interprêté comme un séparateur entre de 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ées

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

|-

Il est possible d’ajouter des attributs qui s’appliquent à toute la rangée de cellules placées après cette ligne :

|-attributs

Si la première rangée de la table n’a besoin d’aucun de ces 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
 {|
 | cellule 1.1
 | cellule 1.2 || cellule 1.3
 |-
 | cellule 2.1 || cellule 2.2
 | cellule 2.3
 |}
 <table>
  <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 tirets 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

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

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 cette défectuosité) :

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’entê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

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>

Exemple récapitulatif

Résultat affiché Codage Wiki Codage HTML
Titre
Titre 1 Titre 2
Titre ligne cellule 1 cellule 2
 {|class="wikitable centre"
 |+ Titre
 |-
 |
 !scope="col"| Titre 1
 !scope="col"| Titre 2
 |-
 !scope="row"| Titre ligne
 | cellule 1
 | cellule 2
 |}
 <table class="wikitable centre">
  <caption>Titre</caption>
  <tr>
  <td></td>    
  <th scope="col">Titre 1</th>    
  <th scope="col">Titre 2</th>    
  </tr>
  <tr>
  <th scope="row">Titre ligne</th>    
  <td>cellule 1</td>    
  <td>cellule 2</td>    
  </tr>
 </table>

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.

|colspan="2"| fusion de deux cellules d’une même rangée
Résultat affiché Codage Wiki Codage HTML
cellule1 cellule2 cellule3
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</td><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 également combiner ces deux attributs.

Tableaux imbriqués

Il est possible d’imbriquer des tableaux, en remplaçant simplement le texte d’une cellule par un autre tableau. Il est cependant nécessaire de sauter une ligne entre la définition de la cellule englobante et le début du tableau imbriqué. Les tableaux de données ne doivent en aucun cas être imbriqués : il est seulement possible mais déconseillé d’imbriquer des tableaux de mise en page, de placer un tableau de mise en page dans un tableau de données ou inversement.

Résultat affiché Codage Wiki Codage HTML
Haut 1 Haut 2 Haut 3
Gauche
Tableau imbriqué Autre cellule
Droite
Bas 1 Bas 2 Bas 3
 {|class="wikitable centre"
 |-
 | Haut 1 || Haut 2 || Haut 3
 |-
 | Gauche
 |
  {|class="wikitable centre"   
  |-   
  !scope="row"| Tableau imbriqué   
  | Autre cellule   
  |}   
 | Droite
 |-
 | Bas 1 || Bas 2 || Bas 3
 |}
 <table class="wikitable centre">
  <tr>   
  <td>Haut 1</td><td>Haut 2</td><td>Haut 3</td>     
  </tr>   
  <tr>   
  <td>Gauche</td>     
  <td>     
  <table class="wikitable centre">       
  <tr>         
  <th scope="row">Tableau imbriqué</th>           
  <td>Autre cellule</td>           
  </tr>         
  </table>       
  </td>     
  <td>Droite</td>     
  </tr>   
  <tr>   
  <td>Bas 1</td><td>Bas 2</td><td>Bas 3</td>     
  </tr>   
 </table>

Tableaux triables

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 [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/wikibits.js?view=log wikibits.js] qui permet le tri est copié sur les serveurs de Wikipédia. Une aide supplémentaire, en anglais, se trouve sur 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 reconnait 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.
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"<code> :

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

Pour faire trier correctement les lignes d’un tableau comprenant des lettres accentuées, on peut utiliser le terme anglais {{sort}} ou le modèle français {{tri}}:

  • Son équivalent français {{tri}} ne nécessite que le paramètre fournissant la clé de tri et permettant le tri correct du texte placé juste après lui (le second paramètre du modèle anglais est inutile et ne fait rien d’autre que retourner le texte après la clé générée), mais il prend un paramètre optionnel <code>t permettant de désactiver la génération de clé de tri (quand t=0, valeur par défaut) ou de l’activer (quand t=1) : le paramètre conditionnel sert dans le cas de l’inclusion d’une clé de tri dans un modèle générant du texte susceptible d’être trié, mais où la clé de tri retournée par ce modèle serait indésirable hors de l’utilisation de ce modèle dans un tableau triable.
  • On peut se passer de passer ce paramètre conditionnel avec le modèle {{tri1}} qui force la génération de la clé de tri.

Syntaxe :

{{sort|clé de tri|mots à trier}}
{{tri|clé de tri|t=1}}''mots à trier''
{{tri1|clé de tri}}''mots à trier''

Par exemple :

{{sort|Elephant|[[Éléphant]]}}
{{tri1|Elephant}}[[Éléphant]]
Exemple d’un tableau complet
Animal Codage Wiki Statut de tri
Alpaga [[Alpaga]] ok
Modèle:Tri1Âne nº 1 {{tri1|Ane}}[[Âne]] nº 1 bien trié
Buffle [[Buffle]] ok
Modèle:Tri1Éléphant nº 1 {{tri1|Elephant}}[[Éléphant]] nº 1 bien trié
Modèle:Tri1Zèbre {{tri1|Zebre}}[[Zèbre]] bien trié
Âne nº 2 [[Âne]] nº 2 mal trié
Éléphant nº 2 [[Éléphant]] nº 2 mal trié

Les attributs de présentation

wikitable

class="wikitable" : permet d'adapter 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

border permet de spécifier la taille de la bordure du tableau. La classe "wikitable" impose sa taille de bordure et ces deux balises ne devraient pas être utilisés en même temps.

border="x"

où x est donc la taille de la bordure (la taille 0 signifie « pas de bordure »).

Résultat affiché Codage Wiki Codage HTML
sans bordure 1 sans bordure 2
{| border="0"
|sans bordure 1
|sans bordure 2
|}
<table border="0">
  <tr>
  <td>sans bordure 1</td>    
  <td>sans bordure 2</td>    
  </tr>
</table>
bordure normale 1 bordure normale 2
{| border="1"
|bordure normale 1
|bordure normale 2
|}
<table border="1">
  <tr>
  <td>bordure normale 1</td>    
  <td>bordure normale 2</td>    
  </tr>
</table>

On peut également choisir le style de la bordure

style="border:Xpx Y"

X est la taille de la bordure (en pixels), et Y son style (dotted, dashed, double,...)

Résultat affiché Codage Wiki Codage HTML
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 black;"
|exemple : double
|}
<table style="border:5px double black;">
  <tr>
  <td>exemple : double</td>    
  </tr>
</table>

align et valign

align et valign positionnent le tableau et le contenu des cellules. Un tableau est aligné selon l'axe horizontal : à gauche, à droite ou au milieu. Pour le contenu d'une cellule, on peut le positionner en haut, en bas ou au milieu de la cellule. Pour l'alignement horizontal, c'est align, alors que pour l'alignement vertical, c'est valign :

align="left"
align="center"
align="right"
valign="top"
valign="middle"
valign="bottom"

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

Les trois positions sont à gauche, au milieu et à droite :

Résultat affiché Codage Wiki Codage HTML
Positionnement
g
c
d
{| class="wikitable centre"
| Positionnement
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}
<table class="wikitable centre">
  <tr>
  <td>Positionnement</td>    
  </tr>
  <tr>
  <td align="left">g</td>    
  </tr>
  <tr>
  <td align="center">c</td>    
  </tr>
  <tr>
  <td align="right">r</td>    
  </tr>
</table>

Pour chacune des cellules, il est également possible de positionner le contenu verticalement. 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"
| height="150" | Position
| valign="top" | haut
| valign="middle" | milieu
| valign="bottom" | bas
|}
<table class="wikitable centre">
  <tr>
  <td height="150">Position</td>    
  <td valign="top">haut</td>    
  <td valign="middle">milieu</td>    
  <td valign="bottom">bas</td>    
  </tr>
</table>

cellspacing, cellpadding et margin

L’attribut cellspacing modifie l'espacement (en pixels uniquement) entre les cellules, ou entre une cellule et la bordure extérieure du tableau (la propriété de style CSS "border-spacing:" a le même effet mais permet de préciser l‘unité utilisée, et prévaut sur l’attribut)

cellspacing="n"
style="border-spacing: npx;"

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"

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;"
style="margin: npx;" du tableau
border="n" (ou style="border: npx;") du tableau
cellspacing="n" (ou style="border-spacing: npx;") du tableau
border="n" du tableau (ou style="border: npx;" de la cellule)
cellpadding="n" du tableau (ou style="padding: npx;" de la cellule)
Contenu de la cellule
 
 
 
 
 

Avec l'attribut cellspacing :

Résultat affiché Codage Wiki Codage HTML
cellule 1 cellule 2
cellule 3 cellule 4
{| border="1" cellspacing="5"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" cellspacing="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" cellspacing="20"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" cellspacing="20">
  <tr>
  <td>cellule 1</td>    
  <td>cellule 2</td>    
  </tr>
  <tr>
  <td>cellule 3</td>    
  <td>cellule 4</td>    
  </tr>
</table>

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>

Avec l'attribut margin (seulement utilisable avec style=, voir quelques sections plus bas) :

Résultat affiché Codage Wiki Codage HTML
cellule 1 cellule 2
cellule 3 cellule 4

Texte texte texte
Texte texte texte

{| border="1" align="left" style="margin:0px;"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" align="left" style="margin:0px;">
  <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

Texte texte texte
Texte texte texte

{| border="1" align="left" style="margin-right:20px;"
|cellule 1
|cellule 2
|-
|cellule 3
|cellule 4
|}
<table border="1" align="left" style="margin-right:20px;">
  <tr>
  <td>cellule 1</td>    
  <td>cellule 2</td>    
  </tr>
  <tr>
  <td>cellule 3</td>    
  <td>cellule 4</td>    
  </tr>
</table>

width et height

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 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 ; 100 pixels est plus grand 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 200 pixels.

Résultat affiché Codage Wiki Codage HTML
cellule
{| class="wikitable" width="10"
|cellule
|}
<table border="1" width="10">
  <tr>
  <td>cellule</td>    
  </tr>
</table>
cellule
{| class="wikitable" width="100"
|cellule
|}
<table class="wikitable" width="100">
  <tr>
  <td>cellule</td>    
  </tr>
</table>
cellule
{| class="wikitable" width="200"
|cellule
|}
<table class="wikitable" width="200">
  <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 et le troisième cas, le tableau doit respectivement occuper un maximum de 50% et de 100%, de l'espace disponible.

Résultat affiché Codage Wiki Codage HTML
cellule
{| class="wikitable centre" width="33%"
|cellule
|}
<table class="wikitable centre" width="33%">
  <tr>
  <td>cellule</td>    
  </tr>
</table>
cellule
{| class="wikitable centre" width="50%"
|cellule
|}
<table class="wikitable centre" width="50%">
  <tr>
  <td>cellule</td>    
  </tr>
</table>
cellule
{| class="wikitable centre" width="100%"
|cellule
|}
<table class="wikitable centre" width="100%">
  <tr>
  <td>cellule</td>    
  </tr>
</table>

Pour l'attribut height, l'utilisation est la même que pour width, mais cette fois-ci la hauteur du tableau change. Ces deux attributs 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" width="100%"
| colspan="3" | Tableau 1
|-
| width="33%" | 1/3 cellule 1
| width="33%" | 1/3 cellule 2
| width="33%" | 1/3 cellule 3
|}
<table class="wikitable centre" width="100%">
  <tr>
  <td colspan="3">Tableau 1</td>    
  </tr>
  <tr>
  <td width="33%">1/3 cellule 1</td>    
  <td width="33%">1/3 cellule 2</td>    
  <td width="33%">1/3 cellule 3</td>    
  </tr>
</table>
Tableau 2
1/2 1/4 1/4
{| class="wikitable centre" width="100%"
| colspan="3" | Tableau 2
|-
| width="50%" | 1/2
| width="25%" | 1/4
| width="25%" | 1/4
|}
<table class="wikitable centre" width="100%">
  <tr>
  <td colspan="3">Tableau 2</td>    
  </tr>
  <tr>
  <td width="50%">1/2</td>    
  <td width="25%">1/4</td>    
  <td width="25%">1/4</td>    
  </tr>
</table>

bgcolor et ligne grise

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
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 modèle {{ligne grise}} permet d'alterner les couleurs de ligne pour faciliter leur lecture :

|- {{ligne grise}}
Résultat affiché Codage Wiki Codage HTML
Ligne 1 fond blanc
Ligne 2 fond gris
Ligne 3 fond blanc
Ligne 4 fond gris

{| class="wikitable centre"
|-
| Ligne 1 || fond blanc
|- {{ligne grise}}
| Ligne 2 || fond gris
|-
| Ligne 3 || fond blanc
|- {{ligne grise}}
| Ligne 4 || fond gris
|}

<table class="wikitable centre">
  <tr>
  <td>Ligne 1</td>    
  <td>fond blanc</td>    
  </tr>
  <tr bgcolor="#f5f5f5">
  <td>Ligne 2</td>    
  <td>fond gris</td>    
  </tr>
  <tr>
  <td>Ligne 3</td>    
  <td>fond blanc</td>    
  </tr>
  <tr bgcolor="#f5f5f5">
  <td>Ligne 4</td>    
  <td>fond gris</td>    
  </tr>
</table>

style

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 tutorial sur le CSS.

Articles connexes


Voir aussi