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

Si vous êtes déjà familier des codes [[w:HTML|HTML]] permettant de créer des tableaux, vous pouvez insérer le code directement dans l’article que vous êtes en train d'éditer. Cependant, les balises de tableaux sont difficiles à éditer pour quelqu’un qui n’est pas à l’aise avec le langage HTML. Pour cela, des nouvelles balises ont été développées par [[w:en:User:Magnus Manske|Magnus Manske]]. Ces balises remplacent les traditionnelles balises HTML <nowiki><table>, <tr>, <td>, <th> et <caption></nowiki>. Il est donc demandé de ne pas utiliser des balises HTML pour créer des tableaux.

 

Voici deux exemples simples pour avoir un premier contact avec le codage Wiki.

 

Le premier exemple montre le tableau le plus minimaliste qui soit, c'est-à-dire celui qui ne contiendrait qu'une seule cellule.

 

|}

 

Le deuxième exemple contient deux cellules. Comme vous pouvez le constater, il est possible d'encoder les cellules de deux façons différentes : une ligne par cellule, ou plusieurs cellules sur la même ligne. Nous y reviendrons plus en détail par la suite.

 

|}

 

Nous verrons ici les différentes balises utiles à la création d’un tableau.

 

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 :

 

Le champ ''paramètres'' doit bien entendu être remplacé par les paramètres utilisés du tableau comme la couleur de fond, la taille, s'il faut faire apparaître une bordure, etc. L’utilisation des paramètres n’est pas obligatoire et on peut donc sans problème ne rien placer à cet endroit.

 

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 :

 

</source>

 

À 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 lang="text">

</source>

 

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:

 

|}

 

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 :

<source lang="text">

|}

 

Maintenant que nous avons vu les différentes balises qui sont supportées par le codage Wiki, nous allons vous montrer un exemple récapitulatif dans lequel tout ce que nous venons de voir apparaîtra.

 

|}

 

Lorsque vous créez un tableau, il est possible d'y imbriquer un autre tableau. Au lieu de placer du texte dans une cellule, il suffit d'y placer un tableau comme le montre l’exemple suivant :

 

|}

 

Jusqu'à présent, nous avons vu la syntaxe pour créer des tableaux. Pour chacune des balises, nous avons précisé que l’on pouvait lui ajouter des paramètres. Ces différents paramètres sont étudiés dans cette section. Ils permettent par exemple de spécifier le positionnement du tableau (gauche, milieu, droit), les couleurs à utiliser et bien d’autres choses encore.

 

Ce paramètre que nous avons déjà utilisé dans les exemples précédents permet d'appliquer le style ''"wikitable"'' au tableau. Plus élégant qu'un tableau classique, il impose par défaut certains paramètres (comme la taille de la bordure) et définit des couleurs.

 

Ce paramètre qui peut être utilisé dans les tableaux permet de spécifier la taille de la bordure du tableau. La classe « wikitable » impose sa taille de bordure et ces deux tags ne devraient donc pas être utilisés en même temps.

 

|}

 

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 :

<source lang="text">

On voit avec cet exemple que l’on peut aisément fusionner des cellules que ce soit au niveau des colonnes ou au niveau des lignes. Le nombre de cellules fusionnées n’est pas limité. Il est tout à fait possible de mélanger ces deux paramètres.

 

Jusqu'à présent, tous nos tableaux étaient positionnés à gauche et le contenu de chacune des cellules était également positionné à gauche. Nous allons maintenant voir comment positionner aussi bien le tableau que le contenu des cellules. Un tableau ne peut-être aligné que suivant l’axe horizontal, c'est-à-dire à gauche, à droite ou au milieu. Alors que pour le contenu d’une cellule, on peut aussi décider de le positionner en haut, en bas ou au milieu de la cellule.

 

|}

 

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 :

<source lang="text">

|}

 

Grâce aux paramètres <code>width</code> et <code>height</code>, on peut spécifier la largeur et la hauteur aussi bien du tableau en lui-même que pour chacune des cellules du tableau. Lorsque l’on précise la taille, on peut préciser une valeur absolue en pixels ou bien ou peut également préciser une taille en pourcentage. Dans les deux cas, cela représente une taille minimale, cependant si le contenu du tableau est trop gros, ce tableau adaptera sa taille au contenu.

 

|}

 

Il est possible de changer la couleur de fond d’une cellule. Pour cela, il faut utiliser le paramètre <code>bgcolor</code> de la façon suivante :

 

|}

 

Nous arrivons au dernier des paramètres que l’on peut utiliser dans des tableaux : <code>style</code>. Ce paramètre permet de changer tout l’aspect graphique. Il peut aussi bien être utilisé pour le tableau que pour une cellule unique. Le paramètre ''style'' est un paramètre qui permet de spécifier la mise en forme comme la couleur, la police de caractère, la couleur de fond pour une cellule, etc. Pour savoir ce que vous pouvez y placer et comment l’utiliser, reportez-vous vers un tutorial sur le [[w:Feuilles de style en cascade|CSS]]. Voici un exemple d’utilisation du paramètre style, nous allons changer la couleur de fond du tableau et choisir la couleur verte :

 

|}

 

=== Quand les tableaux sont-ils appropriés ? ===

Les tableaux sont parfaits pour organiser toute information qui sera plus clairement présentée dans un format lignes/colonnes. Ce qui inclut :

Très souvent, une liste est plus lisible laissée en tant que liste. Certains articles comportent des listes excessivement longues très difficiles à éditer si elles se retrouvent sous forme de tableaux. Avant de transformer une liste en tableau, essayez de vous figurer l’aspect sous forme de tableau (lignes et colonnes) afin d’être sûr de son utilité. Si c’est le cas, alors l’option du tableau est certainement le meilleur choix.

 

Les tableaux ne doivent pas être utilisés uniquement pour la présentation. Si l’information que vous éditez n’est pas de nature tabulaire, elle ne devra alors pas être mise en tableau. Évitez d’utiliser les tableaux pour mettre une légende sous une illustration, ordonner un groupe de liens ou autres cas strictement visuels. Cela rend l’article trop difficile à éditer pour d’autres wikiversitaires et les tableaux ne sont pas vraiment faits pour cela.

 

Si une liste est vraiment très longue ou au contraire très simple, préférez l’usage des formats de listes standards de Wikiversité. Les listes longues seront difficiles à maintenir si elles se retrouvent à l’intérieur de tableaux et les listes courtes sont réellement trop simples pour nécessiter un formatage en tableau. Voici un petit exemple à ne pas suivre :

 

</blockquote>

 

Souvent, les illustrations d’un article sont placées dans un semblant de tableau. Du fait que le tableau peut être flottant et placé à gauche ou à droite de l'écran, il paraît facile et pratique d’utiliser un tableau unicellulaire pour placer l’image à un endroit précis de l'écran. Cette solution était nécessaire pour les anciens navigateurs, particulièrement ceux qui ne reconnaissaient pas les [[w:feuilles de style en cascade|feuilles de style en cascade]] pour l’affichage de telles images. Aujourd'hui, la plupart des navigateurs fonctionnent parfaitement avec ces feuilles de style. Aussi, la façon recommandée d'afficher les images est d’utiliser les balises nommées <code>div</code>.

 

</blockquote>

 

Les tableaux peuvent provoquer d’autres difficultés, surtout lorsqu’ils ne sont pas correctement utilisés. Voici quelques cas que vous pourrez rencontrer lors de l’usage de tableaux dans vos articles :

 

 

 

 

{| cellspacing="0" cellpadding="3" width="100%" border="3" style = "background:#ffeedd;"