Wgw
5 307
modifications
Modifications
m
borderstyle="border: x<px> <type> <couleur>"où x est donc la taille de la bordure (la taille 0 0px signifie « pas de bordure »)., type est le type de bordure : dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid), couleur est la valeur hexadécimale de la couleur #000000 à #FFFFFF{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
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 (<code>dotted</code>, <code>dashed</code>, <code>double</code>,...)
L’attribut '''cellpadding''' la propriété de style CSS "padding:" 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 <code>CSS style="padding:''n''px;"</code>) : cellpadding="''n''"
Dans un tableau utilisant la ===Classe odd===La classe "wikitable", utiliser l'attribut ''style'odd permet d' alterner les couleurs de ligne pour modifier la couleur de fond des en-têtes de colonnes et de lignes faciliter leur lecture : style|- class="background:#''hex'';"odd{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
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 [[Aide:Feuilles de style|CSS]].
== Sources et crédits de cet article ==
Cet article est largement inspiré et adapté de la page ''[[wikipedia.fr:Aide:Les tableaux pour les experts|Wikipédia:Aide:Les tableaux pour les experts]]'' du 17 janvier 2011, consultée le 26 février 2011, publiée sous licence [http://creativecommons.org/licenses/by-sa/3.0/ CreativeCommons BY-SA 3.0].
[[Catégorie:Nouvel article|{{PAGENAMEw3c}}]]
aucun résumé de modification
{{Encart|texte=Pour :
* Utiliser obligatoirement class="wikitable" dans la déclaration du tableau.
* Pour les cellules, n'utiliser que la clause de style pour le design. style="text-align:center; color:#FF0000;" et non align="center" color="#FF0000", etc....
* '''Tableaux simples''' :
**[[Aide:Scope|utiliser systématiquement des en-têtes de ligne et de colonne explicites]] (<code><nowiki>! scope=col</nowiki></code>, <code><nowiki>! scope=row</nowiki></code>) dans les tableaux de données.
<nowiki>{|</nowiki>
<nowiki>|}</nowiki>
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
<pre>
<table class="wikitable-center">
<tr> <td>cellule</td> </tr>
</table>
</pre>
À l’horizontale, il faut mettre deux barres verticales entre chaque cellule placée sur la même ligne de code :
| cellule1 || cellule2 || cellule3
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-<!-- Exemple 1 -->
|<!-- Résultat affiché -->
<pre>
<table class="wikitable-center"
<tr> <td>gauche</td> <td>droite</td> </tr>
</table>
</pre>
<pre>
<table class="wikitable-center">
<tr> <td>gauche</td> <td>droite</td> </tr>
</table>
</pre>
<nowiki>|</nowiki>- ''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 :
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
<pre>
<table class="wikitable-center">
<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>
</pre>
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 :
<nowiki>|</nowiki>-----------------------------------------------------
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
<pre>
<table class="wikitable-center">
<tr style="background:#FFFF00"> <td>haut</td> </tr> <tr> <td>bas</td> </tr>
</table>
</pre>
<span style="font-weight:bold;color:red">!scope="col" ''attributs''|</span> ''titre1'' <span style="font-weight:bold;color:red">!!scope="col" ''attributs''|</span> ''titre2'' <span style="font-weight:bold;color:red">!!scope="col" ''attributs''|</span> ''titre3''
Si la première rangée doit être interprétée comme une rangée d’en-tête :
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
<pre>
<table class="wikitable-center">
<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>
</pre>
|}
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é) :
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
<pre>
<table class="wikitable-center"
<tr> <th scope="row">Titre ligne</th><th>Cellule 1</th> </tr>
</table>
</pre>
<table class="wikitable-center"
<tr>
<th scope="row">Titre ligne</th><td>Cellule 1</td>
</tr>
</table>
|+''attributs''| Titre de tableau
Si plusieurs titres sont indiqués, seul le premier est pris en compte.
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
{|class="wikitable-center"
|+ Titre
|-
<pre>
<table class="wikitable-center">
<caption>Titre</caption> <tr> <th scope="col">Colonne 1</th> <th scope="col">Colonne 2</th> </tr>
</table>
</pre>
=== Exemple récapitulatif ===
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
{|class="wikitable" align="-center"
|+ Titre
|-
|<!-- Codage Wiki -->
<pre>
{|class="wikitable" align="-center"
|+ Titre
|-
|<!-- Codage HTML -->
<pre>
<table class="wikitable" align="-center">
<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>
Les attributs <code>colspan=""</code> et <code>rowspan=""</code> 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
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
{|class="wikitable" align="-center"
|-
| cellule1 || cellule2 || cellule3
|}
|<!-- Codage Wiki -->
<nowiki>{|</nowiki> class="wikitable" align="-center"
<nowiki>|</nowiki>-
<nowiki>|</nowiki> cellule 1 <nowiki>||</nowiki> cellule 2 <nowiki>||</nowiki> cellule 3
|<!-- Codage HTML -->
<pre>
<table class="wikitable" align="-center"> <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>
</pre>
|}
|rowspan="3"| fusion de trois cellules d’une même colonne
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
{|class="wikitable" align="-center"
|-
!scope="col"| Cellules simples !!scope="col"| Colonne
|}
|<!-- Codage Wiki -->
<nowiki>{|</nowiki> class="wikitable" align="-center"
<nowiki>|</nowiki>-
<nowiki>!</nowiki>scope="col"<nowiki>|</nowiki> Cellules simples <nowiki>!!</nowiki>scope="col"<nowiki>|</nowiki> Colonne
|<!-- Codage HTML -->
<pre>
<table class="wikitable" align="-center" > <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>
</pre>
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.
{|widthclass="100%wikitable-center" border|-!scope="0" cellspacing="2" cellpadding="2col" style="border:1px solid #AAAAAA;background:#whiteE0E0FF;color:black"|-bgcolor="#EEEEEE"Résultat affiché!scope="col"| Résultat affiché!scopestyle="colbackground:#E0E0FF;"| Codage Wiki!scope="col" style="background:#E0E0FF;"| Codage HTML
|-
|<!-- Résultat affiché -->
{|class="wikitable" align="-center"
|-
| Haut 1 || Haut 2 || Haut 3
| Gauche
|
{|class="wikitable" align="-center" |- !scope="row’| Tableau imbriqué | Autre cellule |}
| Droite
|-
|<!-- Codage Wiki -->
<pre>
{|class="wikitable" align="-center"
|-
| Haut 1 || Haut 2 || Haut 3
| Gauche
|
{|class="wikitable" align="-center" |- !scope="row"| Tableau imbriqué | Autre cellule |}
| Droite
|-
|<!-- Codage HTML -->
<pre>
<table class="wikitable" align="-center"> <tr> <td>Haut 1</td><td>Haut 2</td><td>Haut 3</td> </tr> <tr> <td>Gauche</td> <td> <table class="wikitable" align="-center"> <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>
</pre>
<nowiki>!</nowiki> Total : 15 !! !! !! Total : 29.55 !!
<nowiki>|}</nowiki>
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).
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).
== Les attributs de présentation ==
=== [[Aide:wikitable|wikitable ]] ==='''class="wikitable"''' ([[Aide: permet dWikitable|Voir l'adapter le style "article spécifique à la classe 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.;wikitable ou wikitable-left : Cadrage à gauche'''class=";wikitable" align="-center"''' : permet d'adapter le style "Cadrage centré;wikitable" au tableau et de le centrer.-right : Cadrage à droite
=== 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.
|-
|
{| borderstyle="0border:0px none"
|sans bordure 1
|sans bordure 2
|
<pre>
{| borderstyle="0border:0px none"
|sans bordure 1
|sans bordure 2
|
<pre>
<table borderstyle="0border:0px none">
<tr>
<td>sans bordure 1</td> <td>sans bordure 2</td>
</tr>
</table>
|-
|
{| borderstyle="1border:1px solid #000000"
|bordure normale 1
|bordure normale 2
|
<pre>
{| borderstyle="1border:1px solid #000000"
|bordure normale 1
|bordure normale 2
|
<pre>
<table borderstyle="1border:1px solid #000000">
<tr>
<td>bordure normale 1</td> <td>bordure normale 2</td>
</tr>
</table>
|-
|}
<br / >{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
<table style="border:2px solid black;">
<tr>
<td>exemple : solid</td>
</tr>
</table>
<table style="border:2px dotted black;">
<tr>
<td>exemple : dotted</td>
</tr>
</table>
<table style="border:2px dashed black;">
<tr>
<td>exemple : dashed</td>
</tr>
</table>
<table style="border:5px double black;">
<tr>
<td>exemple : double</td>
</tr>
</table>
</pre>
|}
=== align Alignement horizontal et valign ==='''align et valign''' positionnent le contenu des cellules. On peut le positionner en haut, en bas ou au milieu de la cellule.Pour l'alignement horizontal, c'est <code>align</code>, alors que pour l'alignement vertical, c'est <code>valign</code> : align="left" align="center" align="right" valign="top" valign="middle" valign="bottom"
{{Encart|titre=Syntaxe recommandée|texte='''texte-align et vertical-align''' 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 <code>text-align</code>, alors que pour l'alignement vertical, c'est <code>vertical-align</code> :
Pour aligner le tableau entier, il est conseillé d'utiliser la commande correspondante :
class="wikitable" alignou class="wikitable-left" class="wikitable" align="-center" class="wikitable" align="-right"
Un exemple de positionnement d'un tableau :
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- ! scope=col style="background:#E0E0FF"! scope=col ; width=":33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| class="wikitable" align="-left"
|à gauche
|}
|
<pre>
{| class="wikitable" align="-left"
|à gauche
|}
|
<pre>
<table class="wikitable" align="-left">
<tr>
<td>à gauche</td>
</tr>
</table>
|-
|
{| class="wikitable" align="-center"
|au centre
|}
|
<pre>
{| class="wikitable" align="-center"
|au centre
|}
|
<pre>
<table class="wikitable" align="-center">
<tr>
<td>au centre</td>
</tr>
</table>
|-
|
{| class="wikitable" align="-right"
|à droite
|}
|
<pre>
{| class="wikitable" align="-right"
|à droite
|}
|
<pre>
<table class="wikitable" align="-right">
<tr>
<td>à droite</td>
</tr>
</table>
|}
Les trois positions sont à gauche, au milieu et à droite :
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- ! scope=col style="background:#E0E0FF"! scope=col ; width=":33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| class="wikitable" align="-center"
| Positionnement
|-
|
<pre>
{| class="wikitable" align="-center"
| Positionnement
|-
|
<pre>
<table class="wikitable" align="-center">
<tr>
<td>Positionnement</td>
</tr>
<tr>
<td style="align:left">g</td>
</tr>
<tr>
<td style="align:center">c</td>
</tr>
<tr>
<td style="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 [[#width et height|taille]] de 150 pixels.
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- ! scope=col style="background:#E0E0FF"! scope=col ; width=":33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| class="wikitable" align="-center"
| style="height:150px" | Position
| style="vertical-align:top" | haut
|
<pre>
{| class="wikitable" align="-center"
| style="height:150px" | Position
| style="vertical-align:top" | haut
|
<pre>
<table class="wikitable" align="-center">
<tr>
<td style="height:150px">Position</td> <td style="vertical-align:top">haut</td> <td style="vertical-align:middle">milieu</td> <td style="vertical-align:bottom">bas</td>
</tr>
</table>
|}
=== cellspacingborder-spacing, cellpadding padding et margin ===L’attribut '''cellspacing''' la propriété de style CSS "border-spacing:" 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: ''n''px;"
Il existe également la propriété de style CSS <code>style="margin:"</code> 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: ''n''px;"
|-
|style="padding:0 36px"|
<div>style="'''margin''': ''n''pxnpx;" <small>du tableau</small><br /><small style="color:#AAAAAA">border="''n''" (ou style="border: ''n''pxnpx;") du tableau</small></div>
{|border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border:2px solid #AAAAAA;background:#F8F8F8;color:#000000"
|-
|style="padding:0 36px"|
<div>'''cellspacing'''="''n''" <small>(ou style="'''border-spacing''': ''n''pxnpx;") du tableau</small><br /><small style="color:#AAAAAA">border="''n''" du tableau (ou style="border: ''n''pxnpx;" de la cellule)</small></div>
{|border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border:2px solid #AAAAAA;background:#FFFFFF;color:#000000"
|-
|style="padding:0 36px"|
<div>'''cellpadding'''="''n''" <small>du tableau (ou style="'''padding''': ''n''pxnpx;" de la cellule)</small></div>
<div style="border:1px dotted #999999"><small>Contenu de la cellule</small></div>
<div> </div>
<div><small> </small><br /> </div>
|}
Avec l'attribut <code>cellspacingborder-spacing</code> :{| border="0" alignclass="wikitable-center" cellpadding="3" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| borderclass="1wikitable" cellspacingstyle="5border-spacing:5px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
{| borderclass="1wikitable" cellspacingstyle="5border-spacing:5px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
<table borderclass="1wikitable" cellspacingstyle="5border-spacing:5px; border-collapse:separate;">
<tr>
<td>cellule 1</td> <td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td> <td>cellule 4</td>
</tr>
</table>
|-
|
{| borderclass="1wikitable" cellspacingstyle="20border-spacing:15px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
{| borderclass="1wikitable" cellspacingstyle="20border-spacing:15px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
<table borderclass="1wikitable" cellspacingstyle="20border-spacing:15px; border-collapse:separate;">
<tr>
<td>cellule 1</td> <td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td> <td>cellule 4</td>
</tr>
</table>
</pre>
|}
Avec l'attribut <code>cellpaddingpadding</code> :{| border="0" alignclass="wikitable-center" cellpadding="3" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| borderclass="1wikitable" cellpaddingstyle="5padding:5px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
{| borderclass="1wikitable" cellpaddingstyle="5padding:5px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
<table borderclass="1wikitable" cellpaddingstyle="5padding:5px; border-collapse:separate;">
<tr>
<td>cellule 1</td> <td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td> <td>cellule 4</td>
</tr>
</table>
|-
|
{| borderclass="1wikitable" cellpaddingstyle="20padding:15px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
{| borderclass="1wikitable" cellpaddingstyle="20padding:15px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
<table borderclass="1wikitable" cellpaddingstyle="20padding:15px; border-collapse:separate;">
<tr>
<td>cellule 1</td> <td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td> <td>cellule 4</td>
</tr>
</table>
</pre>
|}
Avec l'attribut <code>margin</code> (seulement utilisable avec <code>style=</code>, voir quelques sections plus bas) :{| border="0" alignclass="wikitable-center" cellpadding="3" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| border="1" alignclass="wikitable-left" style="margin:0px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
{| border="1" alignclass="wikitable-left" style="margin:0px; border-collapse:separate;"
|cellule 1
|cellule 2
|
<pre>
<table border="1" alignclass="wikitable-left" style="margin:0px; border-collapse:separate;">
<tr>
<td>cellule 1</td> <td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td> <td>cellule 4</td>
</tr>
</table>
|-
|
{| border="1" alignclass="wikitable-left" style="margin:15px; border-rightcollapse:20pxseparate;"
|cellule 1
|cellule 2
|
<pre>
{| border="1" alignclass="wikitable-left" style="margin:15px; border-rightcollapse:20pxseparate;"
|cellule 1
|cellule 2
|
<pre>
<table border="1" alignclass="wikitable-left" style="margin:15px; border-rightcollapse:20pxseparate;">
<tr>
<td>cellule 1</td> <td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td> <td>cellule 4</td>
</tr>
</table>
</pre>
|}
=== 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.
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
|
<pre>
<table borderclass="1wikitable" style="width:10px">
<tr>
<td>cellule</td>
</tr>
</table>
<table class="wikitable" style="width:100px">
<tr>
<td>cellule</td>
</tr>
</table>
<table class="wikitable" style="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.
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki! scope=col style="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| class="wikitable" align="-center" style="width:33%"
|cellule
|}
|
<pre>
{| class="wikitable" align="-center" style="width:33%"
|cellule
|}
|
<pre>
<table class="wikitable" align="-center" style="width:33%">
<tr>
<td>cellule</td>
</tr>
</table>
|-
|
{| class="wikitable" align="-center" style="width:50%"
|cellule
|}
|
<pre>
{| class="wikitable" align="-center" style="width:50%"
|cellule
|}
|
<pre>
<table class="wikitable" align="-center" style="width:50%">
<tr>
<td>cellule</td>
</tr>
</table>
|-
|
{| class="wikitable" align="-center" style="width:100%"
|cellule
|}
|
<pre>
{| class="wikitable" align="-center" style="width:100%"
|cellule
|}
|
<pre>
<table class="wikitable" align="-center" style="width:100%">
<tr>
<td>cellule</td>
</tr>
</table>
Pour l'attribut <code>height</code>, l'utilisation est la même que pour <code>width</code>, mais cette fois-ci la hauteur du tableau change. Ces deux attributs peuvent également être utilisés pour chacune des cellules :
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- style="background:#E0E0FF" ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| class="wikitable" align="-center" style="widthheight:100%200px"
| colspan="3" | Tableau 1
|-
|
<pre>
{| class="wikitable" align="-center" style="widthheight:100%200px"
| colspan="3" | Tableau 1
|-
|
<pre>
<table class="wikitable" align="-center" style="widthheight:100%200px">
<tr>
<td colspan="3">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" align="-center" style="widthheight:100%200px"
| colspan="3" | Tableau 2
|-
|
<pre>
{| class="wikitable" align="-center" style="widthheight:100%200px"
| colspan="3" | Tableau 2
|-
|
<pre>
<table class="wikitable" align="-center" style="widthheight:100%200px">
<tr>
<td colspan="3">Tableau 2</td>
</tr>
<tr>
<td style="width:50%">1/2</td> <td style="width:25%">1/4</td> <td style="width:25%">1/4</td>
</tr>
</table>
|}
=== bgcolor et ligne grise background-color color===''bgcolor'' permet de changer la couleur de fond d'une cellule. La propriété de style CSS "background-color:" ou "background:" a le même effet mais prévaut sur l’attributpermet de changer la couleur de fond d'une cellule. bgcolor="#''hex''"
background-color:#''hex''
background:#''hex''
La propriété de style CSS "color:" permet de changer la couleur du texte d'une cellule.
color:#''hex''
Pour spécifier une couleur, insérer le caractère # suivi du [[Aide:Couleurs|code couleur en hexadécimal]].
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- ! scope=col style="background:#E0E0FF"! scope=col ; width=":33%" | Résultat affiché ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki ! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| class="wikitable" align="-center" | style="background:#FF0000; color:#FFFF00;" | jaune / rouge| style="background:#00FF00" | noir / vert| style="background:#0000FF; color:#FFFFFF;" | blanc / bleu
|}
|
<pre>
{| class="wikitable" align="-center" | style="background:#FF0000; color:#FFFF00;" | jaune / rouge| style="background:#00FF00" | noir / vert| style="background:#0000FF; color:#FFFFFF;" | blanc / bleu
|}
</pre>
|
<pre>
<table class="wikitable" align="-center">
<tr>
<td style="background:#FF0000; color:#FFFF00;">jaune / rouge</td> <td style="background:#00FF00">noir / vert</td> <td style="background:#0000FF; color:#FFFFFF;">blanc / bleu</td>
</tr>
</table>
</pre>
|}
|-
|
{| class="wikitable" align="center"! scope=col | Titre 1! scope=col style="background:#00FF00;" | Titre 2 vert|-|cellule 1|cellule 2|}|<nowiki>{|</nowiki> class="wikitable" align="center"<br/><nowiki>!</nowiki> scope=col | Titre 1<br/><nowiki>!</nowiki> scope=col <span style="font-weight:bold; color:green">style="background:#00FF00;"</span> | Titre 2 vert<br/><nowiki>|-</nowiki><br/><nowiki>|</nowiki>cellule 1<br/><nowiki>|</nowiki>cellule 2<br/><nowiki>|}</nowiki>|<pre><table class="wikitable" align="center"> <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></pre>|}Le modèle ''<nowiki>{{Ligne grise}}</nowiki>'' permet d'alterner les couleurs de ligne pour faciliter leur lecture : |- <nowiki>{{Ligne grise}}</nowiki>{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- style="background:#E0E0FF"! scope=col width="33%" | Résultat affiché! scope=col width="33%" | Codage Wiki! scope=col width="33%" | Codage HTML|-|{| class="wikitable alternance" align="center"
|-
| Ligne 1 || fond blanc
|- {{Ligne grise}}class="odd"
| Ligne 2 || fond gris
|-
| Ligne 3 || fond blanc
|- {{Ligne grise}}class="odd"
| Ligne 4 || fond gris
|}
|
<nowiki>{|</nowiki> class="wikitable" align="-center"<br/>
<nowiki>|-</nowiki><br/>
<nowiki>|</nowiki> Ligne 1 || fond blanc<br/>
<nowiki>|-</nowiki> <b style="color:green"><nowiki>{{</nowiki>Ligne grise<nowiki>}}</nowiki>class=odd</b><br/>
<nowiki>|</nowiki> Ligne 2 || fond gris<br/>
<nowiki>|-</nowiki><br/>
<nowiki>|</nowiki> Ligne 3 || fond blanc<br/>
<nowiki>|-</nowiki> <b style="color:green"><nowiki>{{</nowiki>Ligne grise<nowiki>}}</nowiki>class=odd</b><br/>
<nowiki>|</nowiki> Ligne 4 || fond gris<br/>
<nowiki>|}</nowiki>
|
<pre>
<table class="wikitable" align="-center">
<tr>
<td>Ligne 1</td> <td>fond blanc</td>
</tr>
<tr bgcolorclass="#E7E7E7odd"> <td>Ligne 2</td> <td>fond gris</td> </tr> <tr> <td>Ligne 3</td> <td>fond blanc</td> </tr> <tr bgcolor="#E7E7E7"> <td>Ligne 4</td> <td>fond gris</td> </tr></table></pre>|} === style ===Le <code>style</code> permet de changer tout l'aspect graphique, tant dans le tableau que pour une cellule. Changeons la couleur de fond du tableau :{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF"! scope=col width="33%" | Résultat affiché! scope=col width="33%" | Codage Wiki! scope=col width="33%" | Codage HTML|-|{| class="wikitable" align="center" style="background-color:#CCFFCC"| cellule 1|-| cellule 2|-| cellule 3|}|<pre>{| class="wikitable" align="center"style="background-color:#CCFFCC"| cellule 1|-| cellule 2|-| cellule 3|}</pre>|<pre><table class="wikitable" align="center"style="background-color:#CCFFCC"> <tr> <td>cellule 1</td>
</tr>
<tr>
<td>cellule 2Ligne 3</td> <td>fond blanc</td>
</tr>
<trclass="odd"> <td>cellule 3Ligne 4</td> <td>fond gris</td>
</tr>
</table>
</pre>
|}
==Articles connexes==
* [[Aide:Tableau|Tableau]]
{{clear}}
{{Licence WikiPedia CC BY-SA | 1=[http://fr.wikipedia.org/w/index.php?title=Aide:Les_tableaux_pour_les_experts&oldid=61369648 Aide:Les tableaux pour les experts]}}
{{Palette aide}}
[[Catégorie:Aide|{{PAGENAME}}]]