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

 

&lt;table ''paramètres''&gt;

&lt;/table&gt;

 

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

 

 

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 :

 

&lt;td&gt;cellule1&lt;/td&gt;&lt;td&gt;cellule2&lt;/td&gt;&lt;td&gt;cellule3&lt;/td&gt;

 

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

Ces deux dispositions remplacent le code HTML suivant :

 

&lt;td ''paramètres''&gt;cellule1&lt;/td&gt;&lt;td ''paramètres''&gt;cellule2&lt;/td&gt;&lt;td ''paramètres''&gt;cellule3&lt;/td&gt;

 

=== Créer des lignes (HTML:tr) ===

En HTML, il aurait fallu écrire :

 

&lt;tr&gt; … &lt;/tr&gt;

 

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

Qui remplace le HTML :

 

&lt;tr ''paramètres''&gt; … &lt;/tr&gt;

 

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

 

&lt;th ''paramètres''&gt;titre1&lt;/th&gt;&lt;th ''paramètres''&gt;titre2&lt;/th&gt;&lt;th ''paramètres''&gt;titre3&lt;/th&gt;

 

En wiki, la syntaxe est également différente. Là où on utilisait un trait vertical pour les cellules, nous utiliserons un point d'exclamation '''!'''

|}

|

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

|}

 

qui donnerait en HTML

 

&lt;caption&gt;légende&lt;/caption&gt;

 

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

qui donnerait alors

 

&lt;caption ''paramètres''&gt;légende&lt;/caption&gt;

 

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>

|}

 

|}

|

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

|}

 

|}

|

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

|}