Wgw
5 307
modifications
Modifications
m
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.
<pre>
<table class="wikitable-center">
<tr> <td>cellule</td> </tr>
</table>
</pre>
<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>
<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>
<pre>
<table class="wikitable-center">
<tr style="background:#FFFF00"> <td>haut</td> </tr> <tr> <td>bas</td> </tr>
</table>
</pre>
<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>
<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>
<pre>
<table class="wikitable-center">
<caption>Titre</caption> <tr> <th scope="col">Colonne 1</th> <th scope="col">Colonne 2</th> </tr>
</table>
</pre>
<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>
<pre>
<table class="wikitable-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>
<pre>
<table class="wikitable-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>
|
{|class="wikitable-center"
|- !scope="row’| Tableau imbriqué | Autre cellule |}
| Droite
|-
|
{|class="wikitable-center"
|- !scope="row"| Tableau imbriqué | Autre cellule |}
| Droite
|-
<pre>
<table class="wikitable-center"
<tr> <td>Haut 1</td><td>Haut 2</td><td>Haut 3</td> </tr> <tr> <td>Gauche</td> <td>
<table class="wikitable-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).
où x est donc la taille de la bordure (la taille 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
{| class="wikitable-center"
|- ! 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
|-
|
<table style="border:0px none">
<tr>
<td>sans bordure 1</td> <td>sans bordure 2</td>
</tr>
</table>
|
<pre>
{| style="border:1px solid #000000"
|bordure normale 1
|bordure normale 2
<table style="border: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>
Un exemple de positionnement d'un tableau :
{| class="wikitable-center"
|- ! 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
|-
|
|
<pre>
<table class="wikitable-left"
<tr>
<td>à gauche</td>
</tr>
</table>
<table class="wikitable-center"
<tr>
<td>au centre</td>
</tr>
</table>
<table class="wikitable-right"
<tr>
<td>à droite</td>
</tr>
</table>
Les trois positions sont à gauche, au milieu et à droite :
{| class="wikitable-center"
|- ! 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
|-
|
<table class="wikitable-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.
{| class="wikitable-center"
|- ! 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
|-
|
<table class="wikitable-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>
Avec l'attribut <code>border-spacing</code> :
{| class="wikitable-center"
|- ! 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
|-
|
<table class="wikitable" style="border-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>
<table class="wikitable" style="border-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>
Avec l'attribut <code>padding</code> :
{| class="wikitable-center"
|- ! 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
|-
|
<table class="wikitable" style="padding: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>
<table class="wikitable" style="padding: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>
Avec l'attribut <code>margin</code>
{| class="wikitable-center"
|- ! 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
|-
|
<table class="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>
<table class="wikitable-left" style="margin: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>
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.
{| class="wikitable-center"
|- ! 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
|-
|
<table class="wikitable" 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.
{| class="wikitable-center"
|-
! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché
! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki
|
<pre>
<table class="wikitable-center" style="width:33%">
<tr>
<td>cellule</td>
</tr>
</table>
|
<pre>
{| class="wikitable-center" style="width:50%"
|cellule
|}
<table class="wikitable-center" style="width:50%">
<tr>
<td>cellule</td>
</tr>
</table>
|
<pre>
{| class="wikitable-center" style="width:100%"
|cellule
|}
<table class="wikitable-center" style="width:100%">
<tr>
<td>cellule</td>
</tr>
</table>
{| class="wikitable-center"
|- ! 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-center" style="height:200px"
| colspan="3" | Tableau 1
|-
|
<pre>
{| class="wikitable-center" style="height:200px"
| colspan="3" | Tableau 1
|-
<table class="wikitable-center" style="height: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-center" style="height:200px"
| colspan="3" | Tableau 2
|-
|
<pre>
{| class="wikitable-center" style="height:200px"
| colspan="3" | Tableau 2
|-
<table class="wikitable-center" style="height: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>
Pour spécifier une couleur, insérer le caractère # suivi du [[Aide:Couleurs|code couleur en hexadécimal]].
{| class="wikitable-center"
|- ! 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-center"
| style="background:#FF0000; color:#FFFF00;" | jaune / rouge
| style="background:#00FF00" | noir / vert
|
<pre>
{| class="wikitable-center"
| style="background:#FF0000; color:#FFFF00;" | jaune / rouge
| style="background:#00FF00" | noir / vert
<table class="wikitable-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>
|- class=odd
{| class="wikitable-center"
|- ! 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
|-
|
<table class="wikitable-center">
<tr>
<td>Ligne 1</td> <td>fond blanc</td>
</tr>
<tr class="odd">
<td>Ligne 2</td> <td>fond gris</td>
</tr>
<tr>
<td>Ligne 3</td> <td>fond blanc</td>
</tr>
<tr class="odd">
<td>Ligne 4</td> <td>fond gris</td>
</tr>
</table>
