LES TABLEAUX INSERTION - ÉDITION

Transcription

1 LES TABLEAUX INSERTION - ÉDITION 34 Les tableaux sont très utiles lors de la conception de sites Web : que ce soit pour la présentation de données ou carrément pour la mise en page. Insérer un tableau Modifier les propriétés d un tableau (taille, nombre de lignes ou de colonnes, largeur et hauteur du tableau, épaisseur de la bordure, remplissage et espacement des cellules, marges, couleurs de fond et de bordure, légende) Modifier les propriétés d une cellule (taille, alignement, style, retour à la ligne, couleur de fond) Insérer un tableau, une ligne, une colonne, une cellule Joindre, fusionner des cellules Effacer un tableau, une ligne, une colonne, une cellule Modifier les couleurs de fond d un tableau ou d une de ses cellules Insérer un tableau 1. Placez le point d insertion à l endroit où vous voulez placer le tableau. 2. Cliquez sur le bouton Tableau. ML - C.R.I. Annecy III Le BA-Ba de Mozilla

2 3. Dans la fenêtre qui s ouvre, choisissez le nombre de lignes, de colonnes ainsi que la largeur du tableau (en pourcentage de la fenêtre ou en pixels) et l épaisseur de la bordure. Vous pouvez ensuite cliquer sur Edition avancée... pour régler encore d autres paramètres. 4. Les paramètres avancés :. Cellpadding (remplissage) correspond à la distance séparant le texte de la bordure,. Cellspacing (espacement) correspond à la distance entre les cellules,. Border correspond à l épaisseur des bordures en pixels,. Width correspond à la largeur du tableau (en pourcentage de la fenêtre ou en pixels).. Vspace correspond aux marges basse et haute qui séparent le tableau de ce qui le précède ou le suit.. Hspace correspond aux marges droite et gauche.. Height correspond à la hauteur du tableau.. Bgcolor correspond à la couleur de fond du tableau exprimée par un nombre écrit en base 16 (hexadécimal), ex : #AA1245, le dièse indique l hexadécimal ; les deux premiers chiffres (codés de 00 à FF, 255 en base 16) le rouge ; les deux suivants, le vert ; les deux derniers, le bleu.. Bordercolor correspond à la couleur de la bordure du tableau.. Bordercolorlight correspond à la couleur des bordures éclairées (en bas et à droite) du tableau.. Bordercolordark correspond à la couleur des brodures sombres (en haut et à gauche) du tableau. 5. Lorsque vous avez terminé, cliquez sur le bouton OK. Pour ajouter un attribut non proposé, cliquez dans le champ Nom, saisissez-le, puis renseignez sa Valeur. ML - C.R.I. Annecy III Le BA-Ba de Mozilla

3 Modifier les propriétés d un tableau 1. Placez le pointeur de la souris sur un tableau. 2. Cliquez à l aide du bouton droit de la souris. 3. Dans le menu contextuel qui se déroule, cliquez sur la commande Cellule de tableau Propriétés. 4. Cliquez sur l onglet Tableau.. Vous avez ainsi accès au réglage du nombre de lignes, de colonnes, de la largeur du tableau, de la bordure, de l espacement 1, du remplissage 2.. Vous pouvez également modifier l alignement par défaut du texte et des images contenus par le tableau, légende vous permet de choisir l emplacement du titre du tableau 3, couleur du fond règle la teinte de fond du tableau.. Le bouton Edition avancée renvoie à la fenêtre déjà vue en 34-1 et Terminez en cliquant sur OK. 1 Balise Cellspacing (34-2). 2 Balise Cellpadding (34-2). 3 Balise Caption (pour la voir, cliquez en bas de la fenêtre sur les onglets Montrer toutes les balises ou Source). ML - C.R.I. Annecy III Le BA-Ba de Mozilla

4 Modifier les propriétés d une cellule (case d un tableau) 1. Placez le pointeur de la souris dans la cellule concerné ou effectuez une sélection (s il y en a plusieurs). 2. Cliquez à l aide du bouton droit de la souris. 3. Dans le menu contextuel qui se déroule, cliquez sur la commande Cellule de tableau Propriétés. 4. Cliquez sur l onglet Cellules.. Sélection permet de choisir les cellules à modifier.. Taille permet de modifier la taille des cellules (pensez à cocher la case).. Alignement pemet de régler l alignement du texte et des images.. Style de la cellule peut remplacer la balise TD par TH (style En-tête, texte écrit en gras).. Reformatage du texte permet (reformater) ou ne permet pas les retours à la ligne automatiques si le texte est trop long.. Couleur du fond règle la teinte de fond de la cellule. 5. Terminez en cliquant sur OK. Insérer un tableau, une ligne, une colonne, une cellule. 1. Cliquez avec le bouton droit de la souris sur la zone ou la cellule concernée. 2. Cliquez sur Insérer un tableau. 3. Cliquez enfin sur la commande désirée (Tableau, ligne, colonne, cellule). ML - C.R.I. Annecy III Le BA-Ba de Mozilla

5 Fusionner des cellules Le fusion de cellules peut permettre d améliorer l esthétique de la mise en page. Comme dans l exemple ci-dessous : Les deux lignes de la première colonne ont été fusionnées pour contenir l image. Les six colonnes de la première ligne ont été fusionnées pour contenir le titre. 1. Sélectionnez à l aide de la souris les cellules à fusionner (deux dans mon exemple). 2. Cliquez dans la sélection avec le bouton droit de la souris. 3. Dans le menu contextuel, choisissez Joindre les cellules sélectionnées. Effacer un tableau ou une de ses parties. 1. Cliquez avec le bouton droit de la souris sur la zone ou la cellule concernée. 2. Cliquez sur Effacer le tableau. 3. Cliquez enfin sur la commande désirée (tableau, ligne(s), colonne(s), cellule(s)... ). ML - C.R.I. Annecy III Le BA-Ba de Mozilla

6 Modifier les couleurs de fond d un tableau ou d une de ses cellules. 1. Cliquez avec le bouton droit de la souris sur la zone ou la cellule concernée. 2. Cliquez sur Couleur de fond du tableau ou des cellules. 3. Choisissez les éléments concernés en cochant Table ou Cellule(s). 4. Sélectionnez la couleur. 5. Terminez en cliquant sur OK. ML - C.R.I. Annecy III Le BA-Ba de Mozilla