[TUTORIEL] Insérer un tableau

Nous allons voir comment créer et insérer un tableau dans un message. Cette fonction peut paraître rebutante mais c'est un outil de mise en forme qui risque de devenir très vite incontournable...!

Créer un tableau

Cliquer sur l'icône
Une nouvelle fenêtre apparaît
La première case correspond au nombre de ligne, la seconde au nombre de colonne que vous souhaitez insérer dans votre tableau. Les icônes en dessous permettent d'ajouter des lignes et/ ou des colonnes dans un tableau existant. Mettons "3" dans chacune des cases. Nous allons obtenir le code suivant :

Code:

[table border="1"]
[tr]
[td] [/td][td] [/td][td] [/td]
[/tr][tr]
[td] [/td][td] [/td][td] [/td]
[/tr][tr]
[td] [/td][td] [/td][td] [/td]
[/tr]
[/table]
Pour plus de lisibilité, remettons certaines balises à la ligne ( à l'aide de la touche "entrée") :

Code:

[table border="1"]

[tr]
[td] [/td]
[td] [/td]
[td] [/td]
[/tr]

[tr]
[td] [/td]
[td] [/td]
[td] [/td]
[/tr]

[tr]
[td] [/td]
[td] [/td]
[td] [/td]
[/tr]

[/table]

Il y a donc 3 couples de balises [tr][/tr] et 3x3 couples de balises [td][/td].
[tr][/tr] = code pour une ligne
[td][/td] = code pour une case. Quand ce code est inséré entre les balises [tr][/tr], cela correspond à une colonne.
Important : le contenu du tableau (texte, image, etc.) se place toujours entre les balises [td][/td]

Ajouter du contenu

A cette étape, le tableau ressemble à ceci :
Pour ajouter du contenu, il suffit simplement de le mettre entre les balises [td][/td] ! Ouf !
Pour ajouter du contenu sur la deuxième ligne de la deuxième colonne, il faut repérer la deuxième balise [tr] (=début de la deuxième ligne) et placer le contenu entre le deuxième couple de balises [td][/td] :

CONTENU
Important : il est possible de mettre en forme le contenu (gras, italique, centré, etc.). Le plus pratique, c'est de mettre en forme le contenu AVANT de le positionner (soit en copier-coller, soit en sélectionner-glisser) dans le tableau.

Exemple :

Orange Cyan Blanc
Rouge italique gras
~~barré~~ souligné
centré

Mise en forme du tableau

Il est possible de modifier certains éléments d'un tableau :

La bordure = le plus simple à modifier.
Lorsque vous créez un tableau, vous avez l'information par défaut qui apparaît dans la première balise : [table border="1"]. Pour épaissir la bordure, il faut modifier sa taille (en pixel). Dans l'exemple suivant, [table border="50"]

Orange Cyan Blanc
Rouge italique gras
~~barré~~ souligné
centré
L'espacement entre les cellules
C'est le même principe que pour la bordure, à la différence qu'il est nécessaire d'ajouter le code dans la première balise cellspacing="0" = [table border="1" cellspacing="10"]. Ce qui donne avec une valeur à 10 :

Orange Cyan Blanc
Rouge italique gras
~~barré~~ souligné
centré
Le centrage
Comme pour l'espacement entre les cellules, le code spécifique doit être ajouté dans la première balise style="margin:auto" = [table border="1" style="margin"]. Ce qui donne :

Orange Cyan Blanc
Rouge italique gras
~~barré~~ souligné
centré
Important : il n'est pas possible de coloriser le tableau ou de modifier la taille des cases parce que cela ne peut passer que par la feuille de style (CSS) du forum. La taille des cases s'ajuste à la taille du contenu. Pour insérer des images de façon homogène, il faut que ces images aient les mêmes dimensions.
En revanche, il est possible de combiner les différents éléments de mise en forme dans la première balise : [table border="20" cellspacing="10" style="margin"]. Ce qui donne :

Orange Cyan Blanc
Rouge italique gras
~~barré~~ souligné
centré

_________________

» [TUTORIEL] Insérer une image
» [TUTORIEL] Création d'une liste