Aide:Tableau pour expert : Différence entre versions
m (→style) |
m |
||
(30 révisions intermédiaires par le même utilisateur non affichées) | |||
Ligne 6 : | Ligne 6 : | ||
{{Encart|texte=Pour : | {{Encart|texte=Pour : | ||
* Utiliser obligatoirement class="wikitable" dans la déclaration du tableau. | * 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.... | + | * 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''' : | * '''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. | **[[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. | ||
Ligne 25 : | Ligne 25 : | ||
<nowiki>{|</nowiki> | <nowiki>{|</nowiki> | ||
<nowiki>|}</nowiki> | <nowiki>|}</nowiki> | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 44 : | Ligne 44 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <tr> | + | <tr> |
− | <td>cellule</td> | + | <td>cellule</td> |
− | </tr> | + | </tr> |
</table> | </table> | ||
</pre> | </pre> | ||
Ligne 57 : | Ligne 57 : | ||
À l’horizontale, il faut mettre deux barres verticales entre chaque cellule placée sur la même ligne de code : | À l’horizontale, il faut mettre deux barres verticales entre chaque cellule placée sur la même ligne de code : | ||
| cellule1 || cellule2 || cellule3 | | cellule1 || cellule2 || cellule3 | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|-<!-- Exemple 1 --> | |-<!-- Exemple 1 --> | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 78 : | Ligne 78 : | ||
<pre> | <pre> | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
− | <tr> | + | <tr> |
− | <td>gauche</td> | + | <td>gauche</td> |
− | <td>droite</td> | + | <td>droite</td> |
− | </tr> | + | </tr> |
</table> | </table> | ||
</pre> | </pre> | ||
Ligne 98 : | Ligne 98 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <tr> | + | <tr> |
− | <td>gauche</td> | + | <td>gauche</td> |
− | <td>droite</td> | + | <td>droite</td> |
− | </tr> | + | </tr> |
</table> | </table> | ||
</pre> | </pre> | ||
Ligne 129 : | Ligne 129 : | ||
<nowiki>|</nowiki>- ''attributs'' | <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 : | 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 : | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 156 : | Ligne 156 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <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 170 : | Ligne 170 : | ||
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 : | 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>----------------------------------------------------- | <nowiki>|</nowiki>----------------------------------------------------- | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 193 : | Ligne 193 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <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 221 : | Ligne 221 : | ||
<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'' | <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 : | Si la première rangée doit être interprétée comme une rangée d’en-tête : | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 247 : | Ligne 247 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <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> | ||
|} | |} | ||
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é) : | 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é) : | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 278 : | Ligne 278 : | ||
<pre> | <pre> | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
− | <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 300 : | Ligne 300 : | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
<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 313 : | Ligne 313 : | ||
|+''attributs''| Titre de tableau | |+''attributs''| Titre de tableau | ||
Si plusieurs titres sont indiqués, seul le premier est pris en compte. | Si plusieurs titres sont indiqués, seul le premier est pris en compte. | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
− | {|class="wikitable-center | + | {|class="wikitable-center" |
|+ Titre | |+ Titre | ||
|- | |- | ||
Ligne 336 : | Ligne 336 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <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 346 : | Ligne 346 : | ||
=== Exemple récapitulatif === | === Exemple récapitulatif === | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 383 : | Ligne 383 : | ||
<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 399 : | Ligne 399 : | ||
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. | 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 | |colspan="2"| fusion de deux cellules d’une même rangée | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 422 : | Ligne 422 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <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> | ||
|} | |} | ||
|rowspan="3"| fusion de trois cellules d’une même colonne | |rowspan="3"| fusion de trois cellules d’une même colonne | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 463 : | Ligne 463 : | ||
<pre> | <pre> | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
− | <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 483 : | Ligne 483 : | ||
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é. | 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. | 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. | ||
− | {| | + | {| class="wikitable-center" |
− | | | + | |- |
− | !scope="col" | + | !scope="col" style="background:#E0E0FF;" | Résultat affiché |
− | + | !scope="col" style="background:#E0E0FF;" | Codage Wiki | |
− | !scope="col"| Codage HTML | + | !scope="col" style="background:#E0E0FF;" | Codage HTML |
|- | |- | ||
|<!-- Résultat affiché --> | |<!-- Résultat affiché --> | ||
Ligne 497 : | Ligne 497 : | ||
| | | | ||
{|class="wikitable-center" | {|class="wikitable-center" | ||
− | |- | + | |- |
− | !scope="row’| Tableau imbriqué | + | !scope="row’| Tableau imbriqué |
− | | Autre cellule | + | | Autre cellule |
− | |} | + | |} |
| Droite | | Droite | ||
|- | |- | ||
Ligne 514 : | Ligne 514 : | ||
| | | | ||
{|class="wikitable-center" | {|class="wikitable-center" | ||
− | |- | + | |- |
− | !scope="row"| Tableau imbriqué | + | !scope="row"| Tableau imbriqué |
− | | Autre cellule | + | | Autre cellule |
− | |} | + | |} |
| Droite | | Droite | ||
|- | |- | ||
Ligne 526 : | Ligne 526 : | ||
<pre> | <pre> | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
− | <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-center"> | <table class="wikitable-center"> | ||
− | <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 585 : | Ligne 585 : | ||
<nowiki>!</nowiki> Total : 15 !! !! !! Total : 29.55 !! | <nowiki>!</nowiki> Total : 15 !! !! !! Total : 29.55 !! | ||
<nowiki>|}</nowiki> | <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). | + | 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 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). | ||
Ligne 600 : | Ligne 600 : | ||
style="border: x<px> <type> <couleur>" | style="border: x<px> <type> <couleur>" | ||
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 | 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 | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 622 : | Ligne 622 : | ||
<table style="border:0px none"> | <table style="border:0px none"> | ||
<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 635 : | Ligne 635 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| | + | {| style="border:1px solid #000000" |
|bordure normale 1 | |bordure normale 1 | ||
|bordure normale 2 | |bordure normale 2 | ||
Ligne 644 : | Ligne 644 : | ||
<table style="border:1px solid #000000"> | <table style="border:1px solid #000000"> | ||
<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 653 : | Ligne 653 : | ||
<br / > | <br / > | ||
− | {| | + | {| class="wikitable-center" |
− | |- | + | |- |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 673 : | Ligne 673 : | ||
<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 692 : | Ligne 692 : | ||
<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 711 : | Ligne 711 : | ||
<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 730 : | Ligne 730 : | ||
<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 753 : | Ligne 753 : | ||
class="wikitable-right" | class="wikitable-right" | ||
Un exemple de positionnement d'un tableau : | Un exemple de positionnement d'un tableau : | ||
− | {| | + | {| class="wikitable-center" |
− | |- style="background:#E0E0FF | + | |- |
− | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché | |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 771 : | Ligne 771 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table class="wikitable-left" | + | <table class="wikitable-left" |
<tr> | <tr> | ||
− | <td>à gauche</td> | + | <td>à gauche</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 792 : | Ligne 792 : | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
<tr> | <tr> | ||
− | <td>au centre</td> | + | <td>au centre</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 811 : | Ligne 811 : | ||
<table class="wikitable-right" | <table class="wikitable-right" | ||
<tr> | <tr> | ||
− | <td>à droite</td> | + | <td>à droite</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 817 : | Ligne 817 : | ||
|} | |} | ||
Les trois positions sont à gauche, au milieu et à droite : | Les trois positions sont à gauche, au milieu et à droite : | ||
− | {| | + | {| class="wikitable-center" |
− | |- style="background:#E0E0FF | + | |- |
− | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché | |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 849 : | Ligne 849 : | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
<tr> | <tr> | ||
− | <td>Positionnement</td> | + | <td>Positionnement</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td style="align:left">g</td> | + | <td style="align:left">g</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td style="align:center">c</td> | + | <td style="align:center">c</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td style="align:right">r</td> | + | <td style="align:right">r</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 864 : | Ligne 864 : | ||
|} | |} | ||
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. | 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" |
− | |- style="background:#E0E0FF | + | |- |
− | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché | |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 890 : | Ligne 890 : | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
<tr> | <tr> | ||
− | <td style="height:150px">Position</td> | + | <td style="height:150px">Position</td> |
− | <td style="vertical-align:top">haut</td> | + | <td style="vertical-align:top">haut</td> |
− | <td style="vertical-align:middle">milieu</td> | + | <td style="vertical-align:middle">milieu</td> |
− | <td style="vertical-align:bottom">bas</td> | + | <td style="vertical-align:bottom">bas</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 899 : | Ligne 899 : | ||
|} | |} | ||
− | === | + | === border-spacing, padding et margin === |
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:" modifie l'espacement (en pixels uniquement) entre les cellules, ou entre une cellule et la bordure extérieure du tableau. | ||
style="border-spacing: ''n''px;" | style="border-spacing: ''n''px;" | ||
Ligne 909 : | Ligne 909 : | ||
|- | |- | ||
|style="padding:0 36px"| | |style="padding:0 36px"| | ||
− | <div>style=" | + | <div>style="margin: npx;" du tableau<br /><small style="color:#AAAAAA">(style="border: npx;") du tableau</small></div> |
{|border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border:2px solid #AAAAAA;background:#F8F8F8;color:#000000" | {|border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border:2px solid #AAAAAA;background:#F8F8F8;color:#000000" | ||
|- | |- | ||
|style="padding:0 36px"| | |style="padding:0 36px"| | ||
− | <div> | + | <div><small>style="border-spacing: npx;" du tableau</small><br /><small style="color:#AAAAAA">style="border: npx;" de la cellule</small></div> |
{|border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border:2px solid #AAAAAA;background:#FFFFFF;color:#000000" | {|border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border:2px solid #AAAAAA;background:#FFFFFF;color:#000000" | ||
|- | |- | ||
|style="padding:0 36px"| | |style="padding:0 36px"| | ||
− | <div> | + | <div><small>style="padding: npx;" de la cellule</small></div> |
<div style="border:1px dotted #999999"><small>Contenu de la cellule</small></div> | <div style="border:1px dotted #999999"><small>Contenu de la cellule</small></div> | ||
<div> </div> | <div> </div> | ||
Ligne 925 : | Ligne 925 : | ||
<div><small> </small><br /> </div> | <div><small> </small><br /> </div> | ||
|} | |} | ||
− | Avec l'attribut <code> | + | Avec l'attribut <code>border-spacing</code> : |
− | {| | + | {| class="wikitable-center" |
− | |- | + | |- |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
− | {| | + | {| class="wikitable" style="border-spacing:5px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 942 : | Ligne 942 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| | + | {| class="wikitable" style="border-spacing:5px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 952 : | Ligne 952 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table | + | <table class="wikitable" style="border-spacing:5px; border-collapse:separate;"> |
<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 965 : | Ligne 965 : | ||
|- | |- | ||
| | | | ||
− | {| | + | {| class="wikitable" style="border-spacing:15px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 974 : | Ligne 974 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| | + | {| class="wikitable" style="border-spacing:15px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 984 : | Ligne 984 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table | + | <table class="wikitable" style="border-spacing:15px; border-collapse:separate;"> |
<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> | ||
</pre> | </pre> | ||
|} | |} | ||
− | Avec l'attribut <code> | + | |
− | {| | + | |
− | |- | + | |
− | ! scope=col | + | Avec l'attribut <code>padding</code> : |
− | ! scope=col | + | {| class="wikitable-center" |
− | ! scope=col | + | |- |
+ | ! 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" style="padding:5px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 013 : | Ligne 1 016 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| | + | {| class="wikitable" style="padding:5px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 023 : | Ligne 1 026 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table | + | <table class="wikitable" style="padding:5px; border-collapse:separate;"> |
<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 036 : | Ligne 1 039 : | ||
|- | |- | ||
| | | | ||
− | {| | + | {| class="wikitable" style="padding:15px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 045 : | Ligne 1 048 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| | + | {| class="wikitable" style="padding:15px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 055 : | Ligne 1 058 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table | + | <table class="wikitable" style="padding:15px; border-collapse:separate;"> |
<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> | ||
</pre> | </pre> | ||
|} | |} | ||
− | Avec l'attribut <code>margin</code> | + | |
− | {| | + | |
− | |- | + | |
− | ! scope=col | + | |
− | ! scope=col | + | Avec l'attribut <code>margin</code> |
− | ! scope=col | + | {| 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-left" style="margin:0px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 085 : | Ligne 1 092 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| | + | {| class="wikitable-left" style="margin:0px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 095 : | Ligne 1 102 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table | + | <table class="wikitable-left" style="margin:0px; border-collapse:separate;"> |
<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 108 : | Ligne 1 115 : | ||
|- | |- | ||
| | | | ||
− | {| | + | {| class="wikitable-left" style="margin:15px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 118 : | Ligne 1 125 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| | + | {| class="wikitable-left" style="margin:15px; border-collapse:separate;" |
|cellule 1 | |cellule 1 | ||
|cellule 2 | |cellule 2 | ||
Ligne 1 128 : | Ligne 1 135 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table | + | <table class="wikitable-left" style="margin:15px; border-collapse:separate;"> |
<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 144 : | Ligne 1 151 : | ||
'''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. | '''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. | 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 | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 1 162 : | Ligne 1 169 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table | + | <table class="wikitable" style="width:10px"> |
<tr> | <tr> | ||
− | <td>cellule</td> | + | <td>cellule</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 183 : | Ligne 1 190 : | ||
<table class="wikitable" style="width:100px"> | <table class="wikitable" style="width:100px"> | ||
<tr> | <tr> | ||
− | <td>cellule</td> | + | <td>cellule</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 202 : | Ligne 1 209 : | ||
<table class="wikitable" style="width:200"> | <table class="wikitable" style="width:200"> | ||
<tr> | <tr> | ||
− | <td>cellule</td> | + | <td>cellule</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 209 : | Ligne 1 216 : | ||
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. | 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="width:33%" | Résultat affiché | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché |
− | ! scope=col style="width:33%" | Codage Wiki | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col style="width:33%" | Codage HTML | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 1 227 : | Ligne 1 234 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table class="wikitable-center" | + | <table class="wikitable-center" style="width:33%"> |
<tr> | <tr> | ||
− | <td>cellule</td> | + | <td>cellule</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 240 : | Ligne 1 247 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" style="width:50%" |
|cellule | |cellule | ||
|} | |} | ||
Ligne 1 248 : | Ligne 1 255 : | ||
<table class="wikitable-center" style="width:50%"> | <table class="wikitable-center" style="width:50%"> | ||
<tr> | <tr> | ||
− | <td>cellule</td> | + | <td>cellule</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 259 : | Ligne 1 266 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" style="width:100%" |
|cellule | |cellule | ||
|} | |} | ||
Ligne 1 267 : | Ligne 1 274 : | ||
<table class="wikitable-center" style="width:100%"> | <table class="wikitable-center" style="width:100%"> | ||
<tr> | <tr> | ||
− | <td>cellule</td> | + | <td>cellule</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 274 : | Ligne 1 281 : | ||
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 : | 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 : | ||
− | {| | + | {| class="wikitable-center" |
− | |- | + | |- |
− | ! scope=col style="width:33%" | Résultat affiché | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché |
− | ! scope=col style="width:33%" | Codage Wiki | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col style="width:33%" | Codage HTML | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" style="height:200px" |
| colspan="3" | Tableau 1 | | colspan="3" | Tableau 1 | ||
|- | |- | ||
Ligne 1 290 : | Ligne 1 297 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" style="height:200px" |
| colspan="3" | Tableau 1 | | colspan="3" | Tableau 1 | ||
|- | |- | ||
Ligne 1 300 : | Ligne 1 307 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table class="wikitable-center" style=" | + | <table class="wikitable-center" style="height:200px"> |
<tr> | <tr> | ||
− | <td colspan="3">Tableau 1</td> | + | <td colspan="3">Tableau 1</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td style="width:33%">1/3 cellule 1</td> | + | <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 2</td> |
− | <td style="width:33%">1/3 cellule 3</td> | + | <td style="width:33%">1/3 cellule 3</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 313 : | Ligne 1 320 : | ||
|- | |- | ||
| | | | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" style="height:200px" |
| colspan="3" | Tableau 2 | | colspan="3" | Tableau 2 | ||
|- | |- | ||
Ligne 1 322 : | Ligne 1 329 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" style="height:200px" |
| colspan="3" | Tableau 2 | | colspan="3" | Tableau 2 | ||
|- | |- | ||
Ligne 1 332 : | Ligne 1 339 : | ||
| | | | ||
<pre> | <pre> | ||
− | <table class="wikitable-center" style=" | + | <table class="wikitable-center" style="height:200px"> |
<tr> | <tr> | ||
− | <td colspan="3">Tableau 2</td> | + | <td colspan="3">Tableau 2</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td style="width:50%">1/2</td> | + | <td style="width:50%">1/2</td> |
− | <td style="width:25%">1/4</td> | + | <td style="width:25%">1/4</td> |
− | <td style="width:25%">1/4</td> | + | <td style="width:25%">1/4</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 352 : | Ligne 1 359 : | ||
color:#''hex'' | color:#''hex'' | ||
Pour spécifier une couleur, insérer le caractère # suivi du [[Aide:Couleurs|code couleur en hexadécimal]]. | Pour spécifier une couleur, insérer le caractère # suivi du [[Aide:Couleurs|code couleur en hexadécimal]]. | ||
− | {| | + | {| class="wikitable-center" |
− | |- style="background:#E0E0FF | + | |- |
− | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché | |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" |
| style="background:#FF0000; color:#FFFF00;" | jaune / rouge | | style="background:#FF0000; color:#FFFF00;" | jaune / rouge | ||
| style="background:#00FF00" | noir / vert | | style="background:#00FF00" | noir / vert | ||
Ligne 1 366 : | Ligne 1 373 : | ||
| | | | ||
<pre> | <pre> | ||
− | {| class="wikitable-center" | + | {| class="wikitable-center" |
| style="background:#FF0000; color:#FFFF00;" | jaune / rouge | | style="background:#FF0000; color:#FFFF00;" | jaune / rouge | ||
| style="background:#00FF00" | noir / vert | | style="background:#00FF00" | noir / vert | ||
Ligne 1 376 : | Ligne 1 383 : | ||
<table class="wikitable-center" | <table class="wikitable-center" | ||
<tr> | <tr> | ||
− | <td style="background:#FF0000; color:#FFFF00;">jaune / rouge</td> | + | <td style="background:#FF0000; color:#FFFF00;">jaune / rouge</td> |
− | <td style="background:#00FF00">noir / vert</td> | + | <td style="background:#00FF00">noir / vert</td> |
− | <td style="background:#0000FF; color:#FFFFFF;">blanc / bleu</td> | + | <td style="background:#0000FF; color:#FFFFFF;">blanc / bleu</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 387 : | Ligne 1 394 : | ||
La classe odd permet d'alterner les couleurs de ligne pour faciliter leur lecture : | La classe odd permet d'alterner les couleurs de ligne pour faciliter leur lecture : | ||
|- class=odd | |- class=odd | ||
− | {| | + | {| class="wikitable-center" |
− | |- style="background:#E0E0FF | + | |- |
− | + | ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché | |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki |
− | ! scope=col | + | ! scope=col style="background:#E0E0FF; width:33%" | Codage HTML |
|- | |- | ||
| | | | ||
Ligne 1 419 : | Ligne 1 426 : | ||
<table class="wikitable-center"> | <table class="wikitable-center"> | ||
<tr> | <tr> | ||
− | <td>Ligne 1</td> | + | <td>Ligne 1</td> |
− | <td>fond blanc</td> | + | <td>fond blanc</td> |
</tr> | </tr> | ||
<tr class="odd"> | <tr class="odd"> | ||
− | <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 class="odd"> | <tr class="odd"> | ||
− | <td>Ligne 4</td> | + | <td>Ligne 4</td> |
− | <td>fond gris</td> | + | <td>fond gris</td> |
</tr> | </tr> | ||
</table> | </table> | ||
Ligne 1 450 : | Ligne 1 457 : | ||
* [[Aide:Tableau|Tableau]] | * [[Aide:Tableau|Tableau]] | ||
− | |||
− | |||
− | |||
{{clear}} | {{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}} | {{Palette aide}} | ||
[[Catégorie:Aide|{{PAGENAME}}]] | [[Catégorie:Aide|{{PAGENAME}}]] | ||
− | + | {{w3c}} | |
− |
Version actuelle en date du 28 mars 2011 à 14:20
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:Tableau pour débutant et Aide:Tableau pour initiés.
Pour remplacer la syntaxe des tableaux en HTML, 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 |
---|
Pour :
|
Sommaire
La syntaxe des tableaux
Les tableaux et leurs éléments sont délimités principalement par la barre verticale « | » (ou pipe 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 | |
---|---|---|---|
|
{|class="wikitable-center" |- | cellule |} |
<table class="wikitable-center"> <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 | ||
---|---|---|---|---|
|
{| class="wikitable-center" |- | gauche | droite |} |
<table class="wikitable-center" <tr> <td>gauche</td> <td>droite</td> </tr> </table> | ||
|
{| class="wikitable-center" |- | gauche || droite |} |
<table class="wikitable-center"> <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 | ||||||
---|---|---|---|---|---|---|---|---|
|
{|class="wikitable-center" | cellule 1.1 | cellule 1.2 || cellule 1.3 |- | cellule 2.1 || cellule 2.2 | cellule 2.3 |} |
<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> |
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 | ||
---|---|---|---|---|
|
{| class="wikitable-center" |----style="background:#FFFF00" | haut |---- | bas |} |
<table class="wikitable-center"> <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"
). (Voir l'article Scope).
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 | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable-center" |- !scope="col"| Titre 1 !scope="col"| Titre 2 |- | cellule 1 || cellule 2 |} |
<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> |
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 | ||
---|---|---|---|---|
|
{| class="wikitable-center" |- !scope="row"| Titre ligne || Cellule 1 |} |
<table class="wikitable-center" <tr> <th scope="row">Titre ligne</th><th>Cellule 1</th> </tr> </table> | ||
|
{| class="wikitable-center" |- !scope="row"| Titre ligne | Cellule 1 |} |
<table class="wikitable-center" <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 Wikipédia:Atelier accessibilité.
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 | ||
---|---|---|---|---|
|
{| class="wikitable-center"
|+ Titre
|-
!scope="col"| Colonne 1
!scope="col"| Colonne 2
|}
|
<table class="wikitable-center"> <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 | ||||||
---|---|---|---|---|---|---|---|---|
|
{|class="wikitable-center" |+ Titre |- | !scope="col"| Titre 1 !scope="col"| Titre 2 |- !scope="row"| Titre ligne | cellule 1 | cellule 2 |} |
<table class="wikitable-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> |
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 | ||||||
---|---|---|---|---|---|---|---|---|
|
{| class="wikitable-center"
|-
| cellule 1 || cellule 2 || cellule 3
|-
| Simple ||colspan="2"| Fusionnée
|}
|
<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> |
|rowspan="3"| fusion de trois cellules d’une même colonne
Résultat affiché | Codage Wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| class="wikitable-center"
|-
!scope="col"| Cellules simples !!scope="col"| Colonne
|-
| Gauche 1 ||rowspan="3"| Droite
|-
| Gauche 2
|-
| Gauche 3
|}
|
<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> |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
{|class="wikitable-center" |- | Haut 1 || Haut 2 || Haut 3 |- | Gauche | {|class="wikitable-center" |- !scope="row"| Tableau imbriqué | Autre cellule |} | Droite |- | Bas 1 || Bas 2 || Bas 3 |} |
<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> |
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 WikiGenWeb. Une aide supplémentaire, en anglais, se trouve sur Aide:Tri.
- 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"
:
{|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).
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
wikitable
(Voir l'article spécifique à la classe wikitable)
- wikitable ou wikitable-left
- Cadrage à gauche
- wikitable-center
- Cadrage centré
- wikitable-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.
style="border: x<px> <type> <couleur>"
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
Résultat affiché | Codage Wiki | Codage HTML | ||
---|---|---|---|---|
|
{| style="border:0px none" |sans bordure 1 |sans bordure 2 |} |
<table style="border:0px none"> <tr> <td>sans bordure 1</td> <td>sans bordure 2</td> </tr> </table> | ||
|
{| 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> |
Résultat affiché | Codage Wiki | Codage HTML | |
---|---|---|---|
|
{|style="border:2px solid black;" |exemple : solid |} |
<table style="border:2px solid black;"> <tr> <td>exemple : solid</td> </tr> </table> | |
|
{|style="border:2px dotted black;" |exemple : dotted |} |
<table style="border:2px dotted black;"> <tr> <td>exemple : dotted</td> </tr> </table> | |
|
{|style="border:2px dashed black;" |exemple : dashed |} |
<table style="border:2px dashed black;"> <tr> <td>exemple : dashed</td> </tr> </table> | |
|
{|style="border:5px double black;" |exemple : double |} |
<table style="border:5px double black;"> <tr> <td>exemple : double</td> </tr> </table> |
Alignement horizontal et vertical
Syntaxe recommandée |
---|
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 style="text-align:left" style="text-align:center" style="text-align:right" style="vertical-align:top" style="vertical-align:middle" style="vertical-align:bottom" |
Pour aligner le tableau entier, il est conseillé d'utiliser la commande correspondante :
class="wikitable" ou class="wikitable-left" class="wikitable-center" class="wikitable-right"
Un exemple de positionnement d'un tableau :
Résultat affiché | Codage Wiki | Codage HTML | |
---|---|---|---|
|
{| class="wikitable-left" |à gauche |} |
<table class="wikitable-left" <tr> <td>à gauche</td> </tr> </table> | |
|
{| class="wikitable-center" |au centre |} |
<table class="wikitable-center" <tr> <td>au centre</td> </tr> </table> | |
|
{| class="wikitable-right" |à droite |} |
<table class="wikitable-right" <tr> <td>à droite</td> </tr> </table> |
Les trois positions sont à gauche, au milieu et à droite :
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable-center" | Positionnement |- | style="text-align:left" | g |- | style="text-align:center" | c |- | style="text-align:right" | d |} |
<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 taille de 150 pixels.
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable-center" | style="height:150px" | Position | style="vertical-align:top" | haut | style="vertical-align:middle" | milieu | style="vertical-align:bottom" | bas |} |
<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> |
border-spacing, padding et margin
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.
style="border-spacing: npx;"
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).
style="padding: npx;"
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
(style="border: npx;") du tableau
|
Avec l'attribut border-spacing
:
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable" style="border-spacing:5px; border-collapse:separate;" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<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> | ||||
|
{| class="wikitable" style="border-spacing:15px; border-collapse:separate;" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<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 padding
:
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| class="wikitable" style="padding:5px; border-collapse:separate;" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<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> | ||||
|
{| class="wikitable" style="padding:15px; border-collapse:separate;" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<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 margin
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
Texte texte texte |
{| class="wikitable-left" style="margin:0px; border-collapse:separate;" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<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> | ||||
Texte texte texte |
{| class="wikitable-left" style="margin:15px; border-collapse:separate;" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<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> |
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 | |
---|---|---|---|
|
{| class="wikitable" style="width:10px" |cellule |} |
<table class="wikitable" style="width:10px"> <tr> <td>cellule</td> </tr> </table> | |
|
{| class="wikitable" style="width:100px" |cellule |} |
<table class="wikitable" style="width:100px"> <tr> <td>cellule</td> </tr> </table> | |
|
{| class="wikitable" style="width:200px" |cellule |} |
<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.
Résultat affiché | Codage Wiki | Codage HTML | |
---|---|---|---|
|
{| class="wikitable-center" style="width:33%" |cellule |} |
<table class="wikitable-center" style="width:33%"> <tr> <td>cellule</td> </tr> </table> | |
|
{| class="wikitable-center" style="width:50%" |cellule |} |
<table class="wikitable-center" style="width:50%"> <tr> <td>cellule</td> </tr> </table> | |
|
{| class="wikitable-center" style="width:100%" |cellule |} |
<table class="wikitable-center" style="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 | ||||||
---|---|---|---|---|---|---|---|---|
|
{| class="wikitable-center" style="height:200px" | colspan="3" | Tableau 1 |- | style="width:33%" | 1/3 cellule 1 | style="width:33%" | 1/3 cellule 2 | style="width:33%" | 1/3 cellule 3 |} |
<table class="wikitable-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 |- | style="width:50%" | 1/2 | style="width:25%" | 1/4 | style="width:25%" | 1/4 |} |
<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> |
background-color color
La propriété de style CSS "background-color:" ou "background:" permet de changer la couleur de fond d'une cellule.
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 code couleur en hexadécimal.
Résultat affiché | Codage Wiki | Codage HTML | |||
---|---|---|---|---|---|
|
{| class="wikitable-center" | style="background:#FF0000; color:#FFFF00;" | jaune / rouge | style="background:#00FF00" | noir / vert | style="background:#0000FF; color:#FFFFFF;" | blanc / bleu |} |
<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> |
Classe odd
La classe odd permet d'alterner les couleurs de ligne pour faciliter leur lecture :
|- class=odd
Résultat affiché | Codage Wiki | Codage HTML | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
{| class="wikitable-center" |
<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> |
Articles connexes
Voir aussi
- Tableau pour débutant pour découvrir comment on crée un tableau
- Tableau pour initiés pour comprendre comment on crée un tableau
- Feuilles de style
Articles connexes
Sources et crédits | Cet article est largement inspiré et adapté de la page WikiPédia [http://fr.wikipedia.org/w/index.php?title=Aide:Les_tableaux_pour_les_experts&oldid=61369648 Aide:Les tableaux pour les experts], publiée sous licence [http://creativecommons.org/licenses/by-sa/3.0/deed.fr CreativeCommons CC BY-SA 3.0]. |
---|