6/ Insérer un tableau

A quoi cela peut-il servir d'insérer un tableau dans ma page web ? Je n'ai rien à mettre dans un tableau, pouvez vous vous dire.

Les tableaux ne sont pas forcément visibles et peuvent vous aider à structurer vos pages. Je vous fais un petit dessin avec gimp pour vous expliquer. Bien sur l'exemple que je vous ai fait n'est pas le seul usage que vous pouvez faire des tableaux mais il peut vous donner une idée de ce à quoi cela pourrait vous servir. Un tableau est composé de lignes et colonnes, elles-mêmes formées par des successions de cellules. Ces cellules peuvent avoir des tailles, des couleurs et des contenus différents. Un tableau peut même être complétement invisible et vous servir uniquement pour aligner du texte ou des objets sur votre page.
Dans mon exemple j'ai volontairement choisit des couleurs, et tailles de cellules complétements différentes les une par rapport aux autres. Cependant attention à bien choisir des couleurs qui s'harmonisent et qui peuvent êtres affichées par tous les navigateurs (ce que je n'ai pas fait dans mon exemple).

Cliquez ici pour voir le dessin du tableau.

Alors maintenant, que vous avez une meilleure idée sur l'usage que vous pourriez faire d'un tableau voyons comment l'insérer.

Cliquez sur le bouton Tableau (encadré en rouge) :

La boîte de dialogue suivante s'ouvre :

Vous pouvez choisir différents paramètres (que vous pourrez modifier par la suite si vous vous trompez) : le nombre de lignes, le nombre de colonnes et la largeur du tableau (vous avez le choix entre pourcentage de la fenêtre ou taille absolue en pixels). Personnellement je préfére indiquer une taille en pourcentage afin d'avoir une apparence similaire quelque soit la résolution et la taille de l'écran du visiteur.

J'ai indiqué 2 lignes, 2 colonnes, le tableau aura donc 4 cellules. J'ai laissé la bordure à 1, le tableau aura donc une bordure. Pour que le tableau soit invisible (qu'il n'ait pas de bordure), il faut indiquer bordure : 0 pixel.

Modifier les paramètres du tableau :
A l'intérieur du tableau, faîtes un clic droit puis dans le menu contextuel qui s'affiche cliquez sur Propriétés de la cellule ou du tableau. La fenêtre qui s'affiche comporte deux onglets : un pour les propriétés du tableau, un autre pour les propriétés de la cellule.
Nous allons nous intéresser aux propriétés du tableau : vous cliquez donc sur l'onglet Tableau.
Vous pouvez dans les propriétés du tableau indiquer que vous ne voulez plus de bordure, en choisissant la valeur 0 pour la case Largeur de la bordure et en cliquant sur OK.

Pour désélectionner le tableau, cliquez dans un endroit vierge de la page.
Votre tableau est en pointillé rouge, c-a-d il est invisible. Vous le voyez actuellement car vous êtes en mode création de votre page, si vous l'enregistrez et que vous la visualisez dans un navigateur vous ne verrez plus votre tableau.

Exemple d'utilisation de tableau invisible :

Donc comme vous pouvez le voir aucun tableau n'est visible et pourtant il y en a bien un qui comporte plusieurs cellules de taille différentes. Par contre j'ai oublié de préciser que dans une même colonne toutes les cellules auront forcément la même largeur et sur une même ligne la même hauteur. Je vous montre maintenant comment de quoi à l'air mon tableau dans Composer :

Voyons les propriétés de quelques cellules : Pour ceux qui ne connaisent pas par coeur les paramétres de leurs photos (pour ajuster la taille de vos cellules), un double-clic sur celles-ci (quand c'est double clic c'est évidemment avec le bouton gauche de la souris) et la fenêtre des propriétés de votre photo s'ouvre.

Propriétés des cellules :
A l'intérieur du tableau, faîtes un clic droit puis dans le menu contextuel qui s'affiche cliquez sur Propriétés de la cellule ou du tableau. La fenêtre qui s'affiche comporte deux onglets : un pour les propriétés du tableau, un autre pour les propriétés de la cellule.
Nous allons nous intéresser aux propriétés des cellules : vous cliquez donc sur l'onglet cellule

Vous pouvez indiquer une couleur de fond pour vos cellules : cochez la case et cliquez sur le rectangle gris. La fenêtre habituelle de sélection des couleurs va s'ouvrir. Sélectionnez une couleur (ou indiquer son code hexadécimal) et cliquez sur OK)

Si vous cochez la case Reformatage du texte, et que vous choisissez Reformater, le texte ira à la ligne automatiquement en fonction de la taille de la cellule.

Retour au menu Création de pages web