Aide:Insérer un tableau

Un article de WikiDoc.

La syntaxe wiki permettant d'insérer des tableaux dans les articles est de prime abord difficile, mais elle est beaucoup plus facile si vous avez déjà une expérience de la création de tableaux en utilisant le code HTML. Dans ce tutoriel, nous allons utiliser le code HTML à côté du code wiki afin de permettre une meilleure compréhension des deux.

A propos du code HTML

Tout au long de cet article, les codes HTML et Wiki sont présentés côte à côte. La raison en est double:

• Ceux qui connaissent le code HTML auront une meilleure idée de ce qui se passe avec le code wiki
• Ceux qui ne connaissent pas le code HTML pourront ainsi apprendre des deux syntaxes!

Syntaxe élémentaire

Les différents éléments d'un tableau

Avec le code HTML, les balises <table> sont utilisées, pour commencer et terminer un tableau. Une idée similaire est présente dans le code wiki, en utilisant en début et en fin de tableau un accolades et un trait vertical encore appelé tube ou pipe en anglais. Notez que ceux-ci doivent être les premiers caractères sur une ligne, faute de quoi ils seront ignorés par le wiki. Par exemple:

• HTML
  • Ouverture du tableau: <table>
  • Fermeture du tableau: </table>
• WIKI
  • Ouverture du tableau: {|
  • Fermeture du tableau: |}

Ceci est la base des tableaux.

Ensuite, on en arrive aux rangées ou lignes. Avec le code HTML , une balise d'ouverture et de fermeture est nécessaire pour chaque ligne. Ceci est différent avec le code wiki, puisqu'un simple jeu de tube et de tiret en début de chaque ligne suffit. Par exemple:

• HTML
  • Début de ligne: <tr>
  • Fin de ligne: </tr>
• WIKI
  • Début de ligne: |-

Les lignes contiennent des cellules.

Les cellules constituent la structure de base des tableaux. Avec le code HTML, une cellule est définie par des balises d'ouverture et de fermeture. Comme pour les rangées, le code wiki est assez différent et utilise un simple tube pour commencer une cellule, et un double tube pour séparer les cellules d'une même ligne. Par exemple:

• HTML
  • Début de cellule: <td>
  • Fin de cellule: </td>
• WIKI
  • Début de cellule: |
  • Séparer les cellules: || (ou appuyer sur Entrée)

Articuler les différents éléments d'un tableau

<table> 

{|

<table>
 <tr> 

{|
|-

<table>
 <tr>
  <td>Ceci est le contenu</td> 

{|
|-
| Ceci est le contenu

<table>
 <tr>
  <td>Ceci est le contenu</td>
  <td>Encore du contenu</td> 

{|
|-
| Ceci est le contenu
| Encore du contenu||La deuxième méthode

<table>
 <tr>
  <td>Ceci est le contenu</td>
  <td>Encore du contenu</td>
 </tr> 

{|
|-
| Ceci est le contenu
| Encore du contenu
 

<table>
 <tr>
  <td>Ceci est le contenu</td>
  <td>Encore du contenu</td>
 </tr>
 <tr>
  <td>Encore plus de contenu</td>
  <td>Encore PLUS de contenu</td>
 </tr>  

{|
|-
| Ceci est le contenu
| Encore du contenu
|-
| Encore plus de contenu
| Encore PLUS de contenu

<table>
 <tr>
  <td>Ceci est le contenu</td>
  <td>Encore du contenu</td>
 </tr>
 <tr>
  <td>Encore plus de contenu</td>
  <td>Encore PLUS de contenu</td>
 </tr>
</table>  

{|
|-
| Ceci est le contenu
| Encore du contenu
|-
| Encore plus de contenu
| Encore PLUS de contenu
|}

Mise en forme élaborée

En règle générale, les mêmes attributs peuvent être ajoutés à la fois dans le code HTML et dans le code Wiki pour produire des résultats similaires.

Couleur de fond

Le paramètre bgcolor est opérationnel avec la syntaxe HTML et la syntaxe Wiki:

bgcolor="#00ff00"

bgcolor="green"

L'attribut style peut également être utilisé avec la syntaxe HTML et la syntaxe Wiki:

style="background:#00ff00"

style="background:green"

Ces deux paramètres peuvent changer la couleur de fond de tout le tableau, de certaines rangées ou de certaines cellules, en fonction de leur emplacement dans le texte. Notez que soit le code Hexadecimal des couleurs soit les noms de couleurs peuvent être utilisés. L'utilisation du nom est vivement recommandée. La couleur de fond des rangées l'emporte sur celle du tableau, et celle des cellules l'emporte sur celle des rangées. Pour donner une couleur de fond à une colonne, il faut agir sur toutes les cellules de cette colonne individuellement.

Exemple:

<table>
 <tr bgcolor="#bbbbbb">
  <td>Les cellules dans cette rangée</td>
  <td>sont en gris</td>
 </tr>
 <tr style="background:grey">
  <td>Les cellules dans cette rangée</td>
  <td>sont en blanc</td>
 </tr>
</table>

{| 
|-bgcolor="#bbbbbb" 
| Les cellules dans cette rangée
| sont en gris
|-style="background:grey"
| Les cellules dans cette rangée
| sont en blanc
|}

<table style="background:yellow">
 <tr>
  <td>Ce tableau est en jaune</td>
  <td bgcolor="green" >Mais cette cellule est en vert</td>
 </tr>
 <tr bgcolor="blue">
  <td>Cette rangée est en bleu</td>
  <td style="background:red">Mais cette cellule est en rouge</td>
 </tr>
</table>

{| style="background:yellow"
|-
| Ce tableau est en jaune
| bgcolor="green" | Mais cette cellule est en vert
|- bgcolor="blue"
| Cette rangée est en bleu
| style="background:red" | Mais cette cellule est en rouge
|}

Largeur et hauteur

Vous pouvez définir la largeur et la hauteur de l'ensemble du tableau, la largeur d'une colonne et la hauteur d'une ligne. Pour définir la largeur d'une colonne, il suffit de spécifier la largeur d'une seule cellule de cette colonne.

La syntaxe est la suivante:

width="80%" height="100px"

style="width:80%; height:100px"

La largeur du tableau occupera 80% de l'écran et la hauteur sera exactement de 100 pixels.

Exemple utilisant la syntaxe "style":

{| style="width:80%; height:100px" border="1"
|-  
| Ce tableau occupe 80% de la largeur disponible,
| et a 100 pixels de hauteur
|- style="height:50px" 
| style="width:75%" |Cette colonne occupe 75% du tableau
| et cette rangée a 50 pixels de haut
|-
| Je suis vraiment à court 
| de choses à dire
|}

L'espacement entre les cellules et à l'intérieur des cellules

ce sont deux caractéristiques souvent négligées dans les tableaux. Pour placer une marge à l'intérieur des cellules et ainsi régler l'espace entre le bord d'une cellule et son contenu ont utilise le paramètre cellpadding. Le paramètre cellspacing permet d'espacer les cellules les unes des autres. Observez ce qui suit:

{| border="1px" cellspacing="10"
|-
|Cellule X
|Cellule Y
|-
|Cellule Z
|Cellule Q
|}

{| border="1px" cellpadding="10"
|-
|Cellule X
|Cellule Y
|-
|Cellule Z
|Cellule Q
|}

<table border="1px" cellspacing="10">
 <tr>
  <td>Cellule X</td>
  <td>Cellule Y</td>
 </tr>
 <tr>
  <td>Cellule Z</td>
  <td>Cellule Q</td>
 </tr>
</table>

<table border="1px" cellpadding="10">
 <tr>
  <td>Cellule X</td>
  <td>Cellule Y</td>
 </tr>
 <tr>
  <td>Cellule Z</td>
  <td>Cellule Q</td>
 </tr>
</table>

Positionnement

Vous pouvez déterminer la position de l'ensemble du tableau, d'une seule ligne ou d'une seule cellule. Vous pouvez définir le positionnement horizontal ou vertical.

Alignement

Le paramètre align contrôle l'alignement horizontal. Normalement, tout est placé à gauche. La paramètre align peut prendre deux valeurs: right (à droite) et center (centré). Voici plusieurs exemples pour une clarification:

Tout le tableau, à droite

{| border="1" align="right"
|-
|texte||texte||texte
|-
|texte long||texte plus long||texte encore plus long
|-
|medium||large||extra large
|}

Résultat:

Notez que l'alignement à droite peut provoquer des résultats inattendus avec certains navigateurs. Dans certains cas le tableau chevauchera d'autres éléments de la page.

Tout le tableau, centré

{| border="1" align="center"
|-
|texte||texte||texte
|-
|texte long||texte plus long||texte encore plus long
|-
|medium||large||extra large
|}

Résultat:

Rangée, avec texte à droite:

{| border="1" 
|- align="right"
|texte||texte||texte
|-
|texte long||texte plus long||texte encore plus long
|-
|medium||large||extra large
|}

Résultat:

Rangée, avec texte centré:

{| border="1" 
|- align="center"
|texte||texte||texte
|-
|texte long||texte plus long||texte encore plus long
|-
|medium||large||extra large
|}

Résultat:

Remarquez que dans ces deux exemples, c'est seulement la première rangée qui est affectée. Pour aligner les textes des autres rangées selon vos souhaits, il faut placer le paramètre align à chaque rangée, ou alors utiliser: text-align avec style:

Text-align:

{| border="1" style="text-align:center"
|-
|texte||texte||texte
|-
|texte long||texte plus long||texte encore plus long
|-
|medium||large||extra large
|}

Résultat:

Les cellules suivent le même principe, le paramètre align n'affecte qu'une cellule.

valign

La paramètre valign, or vertical align, contrôle le positionnement vertical du texte dans les cellules. valign peut avoir deux valeurs, top (en haut) ou bottom (en bas).

Comparez ces deux exemples. A gauche aucun paramètre valign n'est utilisé. A droite, les deux options sont utilisées, top pour la rangée du milieu et bottom pour la rangée du bas. Comme vous pouvez le constater sur la gauche, la valeur par défaut pour l'alignement vertical est au milieu.

{| border="1" 
|- 
|texte||texte||texte
|-
|min||max||un texte<br>vraiment<br>long
|-
|medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large
|}

{| border="1" 
|- 
|texte||texte||texte
|- valign="top"
|min||max||un texte<br>vraiment<br>long
|- valign="bottom"
|medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large
|}

Fusion de cellules et fusion de rangées

Il y a deux attributs, rowspan et colspan, qui permettent de fusionner les rangées ou les cellules respectivement Exemple de syntaxe:

rowspan="3"

colspan="5"

Ceux-ci sont placés comme tous les attributs de cellule. Par exemple:

<table border="1">
 <tr>
  <td>Rangée 1, Colonne 1</td>
  <td>Rangée 1, Colonne 2</td>
  <td>Rangée 1, Colonne 3</td>
  <td>Rangée 1, Colonne 3</td>
 </tr>
 <tr>
  <td colspan="3">Rangée 2, Colonne 1-3</td>
  <td>Rangée 2, Colonne 4</td>
 </tr>
</table>

{| border="1"
|- 
| Rangée 1, Colonne 1
| Rangée 1, Colonne 2
| Rangée 1, Colonne 3
| Rangée 1, Colonne 4
|- 
| colspan="3" |Rangée 2, Colonne 1-3
| Rangée 2, Colonne 4
|}

<table border="1">
 <tr>
  <td rowspan="2">Rangée 1-2, Colonne 1</td>
  <td>Rangée 1, Colonne 2</td>
  <td>Rangée 1, Colonne 3</td>
  <td>Rangée 1, Colonne 3</td>
 </tr>
 <tr>
  <td>Rangée 2, Colonne 2</td>
  <td>Rangée 2, Colonne 3</td>
  <td>Rangée 2, Colonne 3</td>
 </tr>
</table>

{| border="1"
|- 
| rowspan="2" |Rangée 1-2, Colonne 1
| Rangée 1, Colonne 2
| Rangée 1, Colonne 3
| Rangée 1, Colonne 4
|- 
| Rangée 2, Colonne 2
| Rangée 2, Colonne 3
| Rangée 2, Colonne 4
|

<table border="1">
 <tr>
  <td>Rangée 1, Colonne 1</td>
  <td>Rangée 1, Colonne 2</td>
  <td>Rangée 1, Colonne 3</td>
  <td>Rangée 1, Colonne 4</td>
 </tr>
 <tr>
  <td rowspan="2" colspan="2">Rangée 2-3, Colonne 1-2</td>
  <td>Rangée 2, Colonne 3</td>
  <td>Rangée 2, Colonne 3</td>
 </tr>
 <tr>
  <td>Rangée 3, Colonne 3</td>
  <td>Rangée 3, Colonne 3</td>
 </tr>
</table>

{| border="1"
|- 
| Rangée 1, Colonne 1
| Rangée 1, Colonne 2
| Rangée 1, Colonne 3
| Rangée 1, Colonne 4
|- 
| rowspan="2" colspan="2" |Row 2-3, Colonne 1-2
| Rangée 2, Colonne 3
| Rangée 2, Colonne 4
|- 
| Rangée 3, Colonne 3
| Rangée 3, Colonne 4
|
|}

Voir aussi

• Des explications détaillées sur les tableaux dans le Manuel de MediaWiki dont cet article s'est largement inspiré.