« Aide:Tableau » : différence entre les versions

|}

|

{| class="wikitable"

|cellule

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

|gauche

|droite

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|-

|

|}

|

{| class="wikitable"

|gauche || droite

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

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>

 

En wiki, pour créer un tableau, nous procédons de la façon suivante :

 

{| ''paramètres''

|}

 

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 '''}'''.

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>

 

Pour créer des cellules en Wiki, deux syntaxes sont possibles :

|cellule1

|cellule2

|cellule3

Ou une autre syntaxe dont le résultat est totalement identique (si, si!) :

|cellule1||cellule2||cellule3

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

ou encore, suivant l’autre disposition :

|''paramètres''|cellule1||''paramètres''|cellule2||''paramètres''|cellule3

Ces deux dispositions remplacent le code HTML suivant :

 

<td ''paramètres''>cellule1</td><td ''paramètres''>cellule2</td><td ''paramètres''>cellule3</td>

 

=== 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 :

|-

Le nombre de tirets '''-''' n'a pas de limite maximale, on peut très bien utiliser :

|-----------------------------------------------------

En HTML, il aurait fallu écrire :

 

<tr> … </tr>

 

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''

Qui remplace le HTML :

 

<tr ''paramètres''> … </tr>

 

=== 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>

 

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

ou avec l’autre disposition :

!titre1!!titre2!!titre3

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

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 :

 

|}

|

{| class="wikitable"

! Titre Colonne 1 !! Titre Colonne 2

|cellule2

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

! Titre Colonne 1 || Colonne 2

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

! Titre Colonne 1

| Colonne 2

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

=== 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

qui donnerait en HTML

 

<caption>légende</caption>

 

encore une fois, il est possible d’utiliser des paramètres de la façon suivante :

|+ ''paramètres''|légende

qui donnerait alors

 

<caption ''paramètres''>légende</caption>

 

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 :

|}

|

{| class="wikitable"

|+ légende

| Colonne 2

|}

|

<table class="wikitable">

<caption>légende</caption>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

|+ légende

| Cellule 2

|}

|

<table class="wikitable">

<caption>légende</caption>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

| Gauche

| Cellule 3

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

 

Nous pouvons décider de ne pas placer de bordure en mettant une taille de 0.

border="x"

où x est donc la taille de la bordure.

 

|}

|

{| border="0"

|sans bordure 1

|sans bordure 2

|}

|

<table border="0">

<tr>

</tr>

</table>

|-

|

|}

|

{| border="1"

|bordure normale 1

|bordure normale 2

|}

|

<table border="1">

<tr>

</tr>

</table>

|-

|

|}

|

{| border="10"

|grosse bordure 1

|grosse bordure 2

|}

|

<table border="10">

<tr>

</tr>

</table>

|}

 

On peut également définir le style de la bordure :

style="border:Xpx Y"

X est la taille de la bordure (en pixel), et Y son style (dotted, dashed, double…)

 

|}

|

{|style="border:2px dotted;"

|exemple : dotted

|}

|

<table style="border:2px dotted;">

<tr>

</tr>

</table>

|-

|

|}

|

{|style="border:2px dashed;"

|exemple : dashed

|}

|

<table style="border:2px dashed;">

<tr>

</tr>

</table>

|-

|

|}

|

{|style="border:5px double;"

|exemple : double

|}

|

<table style="border:5px double;">

<tr>

</tr>

</table>

|}

 

=== 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"

où x représente le nombre de cellule fusionnées.

 

|}

|

{| class="wikitable"

| Simple

| cellule 3

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

| Première

| Gauche 3

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

 

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"

valign="center"

valign="bottom"

Voyons maintenant un exemple de positionnement d’un tableau :

 

|}

|

{| align="left" class="wikitable"

|à gauche

|}

|

<table align="left" class="wikitable">

<tr>

</tr>

</table>

|-

|

|}

|

{| align="center" class="wikitable"

|au centre

|}

|

<table align="center" class="wikitable">

<tr>

</tr>

</table>

|-

|

|}

|

{| align="right" class="wikitable"

|à droite

|}

|

<table align="right" class="wikitable">

<tr>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

| Positionnement

| align="right" | d

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

|}

|

{| class="wikitable"

| height="150" | Position

| valign="bottom" | bas

|}

|

<table class="wikitable">

<tr>

</tr>

</table>

|}

 

=== 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"

Commençons par un exemple avec le paramètre <code>cellspacing</code> :

 

|}

|

{| border="1" cellspacing="5"

|cellule 1

|cellule 4

|}

|

<table border="1" cellspacing="5">

<tr>

</tr>

</table>

|-

|

|}

|

{| border="1" cellspacing="20"

|cellule 1

|cellule 4

|}

|

<table border="1" cellspacing="20">

<tr>

</tr>

</table>

|}

 

|}

|

{| border="1" cellpadding="5"

|cellule 1

|cellule 4

|}

|

<table border="1" cellpadding="5">

<tr>

</tr>

</table>

|-

|

|}

|

{| border="1" cellpadding="20"

|cellule 1

|cellule 4

|}

|

<table border="1" cellpadding="20">

<tr>

</tr>

</table>

|}