« 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 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
|cellule
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 32 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 48 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
|gauche
|droite
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 62 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 69 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
|gauche || droite
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 82 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
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 :
 
<syntaxhighlightsource lang="html">
<table ''paramètres''>
</table>
</source>
<syntaxhighlight>
 
En wiki, pour créer un tableau, nous procédons de la façon suivante :
 
<syntaxhighlightsource lang="text">
{| ''paramètres''
|}
</source>
<syntaxhighlight>
 
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 :
 
<syntaxhighlightsource lang="html">
<td>cellule1</td><td>cellule2>/td><td>cellule3>/td>
</source>
<syntaxhighlight>
 
Pour créer des cellules en Wiki, deux syntaxes sont possibles :
<syntaxhighlightsource lang="text">
|cellule1
|cellule2
|cellule3
</source>
<syntaxhighlight>
Ou une autre syntaxe dont le résultat est totalement identique (si, si!) :
<syntaxhighlightsource lang="text">
|cellule1||cellule2||cellule3
</source>
<syntaxhighlight>
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 :
<syntaxhighlightsource lang="text">
|''paramètres''|cellule1
|''paramètres''|cellule2
|''paramètres''|cellule3
</source>
<syntaxhighlight>
ou encore, suivant l’autre disposition :
<syntaxhighlightsource lang="text">
|''paramètres''|cellule1||''paramètres''|cellule2||''paramètres''|cellule3
</source>
<syntaxhighlight>
Ces deux dispositions remplacent le code HTML suivant :
 
<syntaxhighlightsource lang="html">
<td ''paramètres''>cellule1</td><td ''paramètres''>cellule2</td><td ''paramètres''>cellule3</td>
</source>
<syntaxhighlight>
 
=== 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 :
<syntaxhighlightsource lang="text">
|-
</source>
<syntaxhighlight>
Le nombre de tirets '''-''' n'a pas de limite maximale, on peut très bien utiliser :
<syntaxhighlightsource lang="text">
|-----------------------------------------------------
</source>
<syntaxhighlight>
En HTML, il aurait fallu écrire :
 
<syntaxhighlightsource lang="html">
<tr> … </tr>
</source>
<syntaxhighlight>
 
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 :
<syntaxhighlightsource lang="text">
|- ''paramètres''
</source>
<syntaxhighlight>
Qui remplace le HTML :
 
<syntaxhighlightsource lang="html">
<tr ''paramètres''> … </tr>
</source>
<syntaxhighlight>
 
=== 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:
 
<syntaxhighlightsource lang="html">
<th ''paramètres''>titre1</th><th ''paramètres''>titre2</th><th ''paramètres''>titre3</th>
</source>
<syntaxhighlight>
 
En wiki, la syntaxe est également différente. Là où on utilisait un trait vertical pour les cellules, nous utiliserons un point d'exclamation '''!'''
<syntaxhighlightsource lang="text">
!titre1
!titre2
!titre3
</source>
<syntaxhighlight>
ou avec l’autre disposition :
<syntaxhighlightsource lang="text">
!titre1!!titre2!!titre3
</source>
<syntaxhighlight>
par contre, entre les paramètres et le contenu de la cellule, nous utiliserons toujours le trait vertical |
<syntaxhighlightsource lang="text">
!''paramètres''|titre1!!''paramètres''|titre2!!''paramètres''|titre3
</source>
<syntaxhighlight>
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 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
! Titre Colonne 1 !! Titre Colonne 2
Ligne 211 :
|cellule2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 224 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 238 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
! Titre Colonne 1 || Colonne 2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 251 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 266 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
! Titre Colonne 1
| Colonne 2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 280 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
=== 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 :
<syntaxhighlightsource lang="text">
|+ légende
</source>
<syntaxhighlight>
qui donnerait en HTML
 
<syntaxhighlightsource lang="html">
<caption>légende</caption>
</source>
<syntaxhighlight>
 
encore une fois, il est possible d’utiliser des paramètres de la façon suivante :
<syntaxhighlightsource lang="text">
|+ ''paramètres''|légende
</source>
<syntaxhighlight>
qui donnerait alors
 
<syntaxhighlightsource lang="html">
<caption ''paramètres''>légende</caption>
</source>
<syntaxhighlight>
 
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 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
|+ légende
Ligne 323 :
| Colonne 2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<caption>légende</caption>
Ligne 333 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 354 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
|+ légende
Ligne 364 :
| Cellule 2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<caption>légende</caption>
Ligne 380 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 405 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
| Gauche
Ligne 419 :
| Cellule 3
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 441 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 454 :
 
Nous pouvons décider de ne pas placer de bordure en mettant une taille de 0.
<syntaxhighlightsource lang="text">
border="x"
</source>
<syntaxhighlight>
où x est donc la taille de la bordure.
 
Ligne 469 :
|}
|
<syntaxhighlightsource lang="text">
{| border="0"
|sans bordure 1
|sans bordure 2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table border="0">
<tr>
Ligne 483 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 491 :
|}
|
<syntaxhighlightsource lang="text">
{| border="1"
|bordure normale 1
|bordure normale 2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table border="1">
<tr>
Ligne 505 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 513 :
|}
|
<syntaxhighlightsource lang="text">
{| border="10"
|grosse bordure 1
|grosse bordure 2
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table border="10">
<tr>
Ligne 527 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
On peut également définir le style de la bordure :
<syntaxhighlightsource lang="text">
style="border:Xpx Y"
</source>
<syntaxhighlight>
X est la taille de la bordure (en pixel), et Y son style (dotted, dashed, double…)
 
Ligne 545 :
|}
|
<syntaxhighlightsource lang="text">
{|style="border:2px dotted;"
|exemple : dotted
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table style="border:2px dotted;">
<tr>
Ligne 557 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 564 :
|}
|
<syntaxhighlightsource lang="text">
{|style="border:2px dashed;"
|exemple : dashed
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table style="border:2px dashed;">
<tr>
Ligne 576 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 583 :
|}
|
<syntaxhighlightsource lang="text">
{|style="border:5px double;"
|exemple : double
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table style="border:5px double;">
<tr>
Ligne 595 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
=== 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 :
<syntaxhighlightsource lang="text">
colspan="x"
rowspan="x"
</source>
<syntaxhighlight>
où x représente le nombre de cellule fusionnées.
 
Ligne 622 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
| Simple
Ligne 631 :
| cellule 3
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 645 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 667 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
| Première
Ligne 679 :
| Gauche 3
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 698 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
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> :
<syntaxhighlightsource lang="text">
align="left"
align="center"
Ligne 715 :
valign="center"
valign="bottom"
</source>
<syntaxhighlight>
Voyons maintenant un exemple de positionnement d’un tableau :
 
Ligne 727 :
|}
|
<syntaxhighlightsource lang="text">
{| align="left" class="wikitable"
|à gauche
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table align="left" class="wikitable">
<tr>
Ligne 739 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 746 :
|}
|
<syntaxhighlightsource lang="text">
{| align="center" class="wikitable"
|au centre
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table align="center" class="wikitable">
<tr>
Ligne 758 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 765 :
|}
|
<syntaxhighlightsource lang="text">
{| align="right" class="wikitable"
|à droite
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table align="right" class="wikitable">
<tr>
Ligne 777 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 797 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
| Positionnement
Ligne 807 :
| align="right" | d
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 824 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 841 :
|}
|
<syntaxhighlightsource lang="text">
{| class="wikitable"
| height="150" | Position
Ligne 848 :
| valign="bottom" | bas
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table class="wikitable">
<tr>
Ligne 859 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
=== 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 :
<syntaxhighlightsource lang="text">
cellspacing="x"
 
cellpadding="x"
</source>
<syntaxhighlight>
Commençons par un exemple avec le paramètre <code>cellspacing</code> :
 
Ligne 884 :
|}
|
<syntaxhighlightsource lang="text">
{| border="1" cellspacing="5"
|cellule 1
Ligne 892 :
|cellule 4
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table border="1" cellspacing="5">
<tr>
Ligne 905 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 916 :
|}
|
<syntaxhighlightsource lang="text">
{| border="1" cellspacing="20"
|cellule 1
Ligne 924 :
|cellule 4
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table border="1" cellspacing="20">
<tr>
Ligne 937 :
</tr>
</table>
</source>
<syntaxhighlight>
|}
 
Ligne 955 :
|}
|
<syntaxhighlightsource lang="text">
{| border="1" cellpadding="5"
|cellule 1
Ligne 963 :
|cellule 4
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table border="1" cellpadding="5">
<tr>
Ligne 976 :
</tr>
</table>
</source>
<syntaxhighlight>
|-
|
Ligne 987 :
|}
|
<syntaxhighlightsource lang="text">
{| border="1" cellpadding="20"
|cellule 1
Ligne 995 :
|cellule 4
|}
</source>
<syntaxhighlight>
|
<syntaxhighlightsource lang="html">
<table border="1" cellpadding="20">
<tr>
Ligne 1 008 :
</tr>
</table>
</source>
<syntaxhighlight>
|}