« Aide:Tableau » : différence entre les versions
Contenu supprimé Contenu ajouté
m Robot : Remplacement de texte automatisé (-<\/?source +<syntaxhighlight) |
Annulation des modifications 804696 de Crochet.david.bot (discussion). Balise : Annulation |
||
Ligne 20 :
|}
|
<
{| class="wikitable"
|cellule
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 32 :
</tr>
</table>
</source>
|}
Ligne 48 :
|}
|
<
{| class="wikitable"
|gauche
|droite
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 62 :
</tr>
</table>
</source>
|-
|
Ligne 69 :
|}
|
<
{| class="wikitable"
|gauche || droite
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 82 :
</tr>
</table>
</source>
|}
Ligne 91 :
Dans le langage HTML, l'élément <code>table</code> est l'élément de base pour la création d’un tableau.Ceci donnerait en HTML, l’encodage suivant :
<
<table ''paramètres''>
</table>
</source>
En wiki, pour créer un tableau, nous procédons de la façon suivante :
<
{| ''paramètres''
|}
</source>
On commence toujours un tableau par l’accolade ouvrante '''{''', suivie d’un trait vertical '''|'''. La fin d’un tableau est également composée de deux caractères. Le premier est le trait vertical | et il est suivi du deuxième caractère qui est l’accolade fermante '''}'''.
Ligne 110 :
En HTML, l'élément <code>td</code> représente une cellule dans une ligne du tableau. Ainsi pour un tableau de trois cellules formant trois colonnes, le code en HTML est le suivant :
<
<td>cellule1</td><td>cellule2>/td><td>cellule3>/td>
</source>
Pour créer des cellules en Wiki, deux syntaxes sont possibles :
<
|cellule1
|cellule2
|cellule3
</source>
Ou une autre syntaxe dont le résultat est totalement identique (si, si!) :
<
|cellule1||cellule2||cellule3
</source>
Cette deuxième disposition impose qu'entre deux cellules apparaissent deux traits verticaux '''||''' car un seul trait sera interpreté différemment par le logiciel.
Comme le tableau lui-même, chaque cellule d’un tableau peut contenir des paramètres propres. Pour cela, le contenu d’une cellule sera précédé des paramètres de la façon suivante :
<
|''paramètres''|cellule1
|''paramètres''|cellule2
|''paramètres''|cellule3
</source>
ou encore, suivant l’autre disposition :
<
|''paramètres''|cellule1||''paramètres''|cellule2||''paramètres''|cellule3
</source>
Ces deux dispositions remplacent le code HTML suivant :
<
<td ''paramètres''>cellule1</td><td ''paramètres''>cellule2</td><td ''paramètres''>cellule3</td>
</source>
=== Créer des lignes (HTML:tr) ===
À la place des balises HTML <code>tr</code> qui permettent de passer à une nouvelle ligne dans le tableau, le wiki permet de passer à une nouvelle ligne de façon très simple, il suffit d'écrire :
<
|-
</source>
Le nombre de tirets '''-''' n'a pas de limite maximale, on peut très bien utiliser :
<
|-----------------------------------------------------
</source>
En HTML, il aurait fallu écrire :
<
<tr> … </tr>
</source>
Un grand avantage du codage wiki est qu’il se charge entièrement de la fermeture des balises <code>tr</code> ainsi que de leur ouverture si cette ouverture est nécessaire. Par exemple, si on reprend le tout premier tableau que nous avons créé, celui contenant une seule cellule, nous n'utilisons pas |- dans notre encodage et pourtant le code source HTML contient bien une balise <code>tr</code>.
Là encore, comme pour les autres balises, il est bien sûr possible d’utiliser des paramètres :
<
|- ''paramètres''
</source>
Qui remplace le HTML :
<
<tr ''paramètres''> … </tr>
</source>
=== Créer une cellule de titre (HTML:th) ===
Les balises HTML <code>th</code> ressemblent aux balises <code>td</code>. Leur utilisation est totalement identique, seule la syntaxe change. Cependant il y a une différence notable entre ces deux balises qui intervient au niveau visuel. La balise <code>th</code> est généralement utilisée pour spécifier qu'une cellule représente un titre. Visuellement, cela se voit car le texte de la cellule est en gras.Le code HTML serait:
<
<th ''paramètres''>titre1</th><th ''paramètres''>titre2</th><th ''paramètres''>titre3</th>
</source>
En wiki, la syntaxe est également différente. Là où on utilisait un trait vertical pour les cellules, nous utiliserons un point d'exclamation '''!'''
<
!titre1
!titre2
!titre3
</source>
ou avec l’autre disposition :
<
!titre1!!titre2!!titre3
</source>
par contre, entre les paramètres et le contenu de la cellule, nous utiliserons toujours le trait vertical |
<
!''paramètres''|titre1!!''paramètres''|titre2!!''paramètres''|titre3
</source>
Voyons ce que nous obtenons sur un exemple. Si on souhaite que dans notre tableau, la première ligne soit interpretée comme étant une ligne de titres :
Ligne 204 :
|}
|
<
{| class="wikitable"
! Titre Colonne 1 !! Titre Colonne 2
Ligne 211 :
|cellule2
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 224 :
</tr>
</table>
</source>
|}
Ligne 238 :
|}
|
<
{| class="wikitable"
! Titre Colonne 1 || Colonne 2
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 251 :
</tr>
</table>
</source>
|}
Ligne 266 :
|}
|
<
{| class="wikitable"
! Titre Colonne 1
| Colonne 2
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 280 :
</tr>
</table>
</source>
|}
=== Ajouter une légende (HTML:caption) ===
L'élément <code>caption</code> permet d'ajouter une légende. C’est un petit texte qui est placé au-dessus du tableau et qui permet de préciser ce qui se trouve dans le tableau. Voici comment introduire une légende en Wiki :
<
|+ légende
</source>
qui donnerait en HTML
<
<caption>légende</caption>
</source>
encore une fois, il est possible d’utiliser des paramètres de la façon suivante :
<
|+ ''paramètres''|légende
</source>
qui donnerait alors
<
<caption ''paramètres''>légende</caption>
</source>
On ne peut placer qu'une seule légende par tableau, s'il en existe plusieurs, seule la première sera prise en compte. Voici le résultat que l’on obtient :
Ligne 317 :
|}
|
<
{| class="wikitable"
|+ légende
Ligne 323 :
| Colonne 2
|}
</source>
|
<
<table class="wikitable">
<caption>légende</caption>
Ligne 333 :
</tr>
</table>
</source>
|}
Ligne 354 :
|}
|
<
{| class="wikitable"
|+ légende
Ligne 364 :
| Cellule 2
|}
</source>
|
<
<table class="wikitable">
<caption>légende</caption>
Ligne 380 :
</tr>
</table>
</source>
|}
Ligne 405 :
|}
|
<
{| class="wikitable"
| Gauche
Ligne 419 :
| Cellule 3
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 441 :
</tr>
</table>
</source>
|}
Ligne 454 :
Nous pouvons décider de ne pas placer de bordure en mettant une taille de 0.
<
border="x"
</source>
où x est donc la taille de la bordure.
Ligne 469 :
|}
|
<
{| border="0"
|sans bordure 1
|sans bordure 2
|}
</source>
|
<
<table border="0">
<tr>
Ligne 483 :
</tr>
</table>
</source>
|-
|
Ligne 491 :
|}
|
<
{| border="1"
|bordure normale 1
|bordure normale 2
|}
</source>
|
<
<table border="1">
<tr>
Ligne 505 :
</tr>
</table>
</source>
|-
|
Ligne 513 :
|}
|
<
{| border="10"
|grosse bordure 1
|grosse bordure 2
|}
</source>
|
<
<table border="10">
<tr>
Ligne 527 :
</tr>
</table>
</source>
|}
On peut également définir le style de la bordure :
<
style="border:Xpx Y"
</source>
X est la taille de la bordure (en pixel), et Y son style (dotted, dashed, double…)
Ligne 545 :
|}
|
<
{|style="border:2px dotted;"
|exemple : dotted
|}
</source>
|
<
<table style="border:2px dotted;">
<tr>
Ligne 557 :
</tr>
</table>
</source>
|-
|
Ligne 564 :
|}
|
<
{|style="border:2px dashed;"
|exemple : dashed
|}
</source>
|
<
<table style="border:2px dashed;">
<tr>
Ligne 576 :
</tr>
</table>
</source>
|-
|
Ligne 583 :
|}
|
<
{|style="border:5px double;"
|exemple : double
|}
</source>
|
<
<table style="border:5px double;">
<tr>
Ligne 595 :
</tr>
</table>
</source>
|}
=== La fusion : rowspan et colspan ===
Ces deux paramètres permettent de fusionner des cellules : rowspan fusionne les lignes, colspan fusionne les colonnes. Ils s'utilisent de la façon suivante :
<
colspan="x"
rowspan="x"
</source>
où x représente le nombre de cellule fusionnées.
Ligne 622 :
|}
|
<
{| class="wikitable"
| Simple
Ligne 631 :
| cellule 3
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 645 :
</tr>
</table>
</source>
|}
Ligne 667 :
|}
|
<
{| class="wikitable"
| Première
Ligne 679 :
| Gauche 3
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 698 :
</tr>
</table>
</source>
|}
Ligne 707 :
Pour l’alignement horizontal, il faut utiliser le paramètre <code>align</code> alors que pour l’alignement vertical, il faut utiliser <code>valign</code> :
<
align="left"
align="center"
Ligne 715 :
valign="center"
valign="bottom"
</source>
Voyons maintenant un exemple de positionnement d’un tableau :
Ligne 727 :
|}
|
<
{| align="left" class="wikitable"
|à gauche
|}
</source>
|
<
<table align="left" class="wikitable">
<tr>
Ligne 739 :
</tr>
</table>
</source>
|-
|
Ligne 746 :
|}
|
<
{| align="center" class="wikitable"
|au centre
|}
</source>
|
<
<table align="center" class="wikitable">
<tr>
Ligne 758 :
</tr>
</table>
</source>
|-
|
Ligne 765 :
|}
|
<
{| align="right" class="wikitable"
|à droite
|}
</source>
|
<
<table align="right" class="wikitable">
<tr>
Ligne 777 :
</tr>
</table>
</source>
|}
Ligne 797 :
|}
|
<
{| class="wikitable"
| Positionnement
Ligne 807 :
| align="right" | d
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 824 :
</tr>
</table>
</source>
|}
Ligne 841 :
|}
|
<
{| class="wikitable"
| height="150" | Position
Ligne 848 :
| valign="bottom" | bas
|}
</source>
|
<
<table class="wikitable">
<tr>
Ligne 859 :
</tr>
</table>
</source>
|}
=== L’espacement entre et dans les cellules : cellspacing et cellpadding ===
Il est possible de changer l’espacement entre les cellules du tableau grâce au paramètre <code>cellspacing</code>. Et il est possible de spécifier l’espacement entre le bord d’une cellule et son contenu grâce au paramètre <code>cellpadding</code>. Leur utilisation est la suivante :
<
cellspacing="x"
cellpadding="x"
</source>
Commençons par un exemple avec le paramètre <code>cellspacing</code> :
Ligne 884 :
|}
|
<
{| border="1" cellspacing="5"
|cellule 1
Ligne 892 :
|cellule 4
|}
</source>
|
<
<table border="1" cellspacing="5">
<tr>
Ligne 905 :
</tr>
</table>
</source>
|-
|
Ligne 916 :
|}
|
<
{| border="1" cellspacing="20"
|cellule 1
Ligne 924 :
|cellule 4
|}
</source>
|
<
<table border="1" cellspacing="20">
<tr>
Ligne 937 :
</tr>
</table>
</source>
|}
Ligne 955 :
|}
|
<
{| border="1" cellpadding="5"
|cellule 1
Ligne 963 :
|cellule 4
|}
</source>
|
<
<table border="1" cellpadding="5">
<tr>
Ligne 976 :
</tr>
</table>
</source>
|-
|
Ligne 987 :
|}
|
<
{| border="1" cellpadding="20"
|cellule 1
Ligne 995 :
|cellule 4
|}
</source>
|
<
<table border="1" cellpadding="20">
<tr>
Ligne 1 008 :
</tr>
</table>
</source>
|}
|