| La leçon quatre poursuit la question de l'affichage des images touchée dans la leçon 3 et aborde l'alignement des images conduisant à la syntaxe des tableaux. |
Voici le code source:
Il est possible de varier la distance entre ces deux images en modifiant la valeur du paramètre HSPACE qui est responsable de l'espace (SPACE) Horizontal entourant cette image.
Voici le code source:
Remarquez l'argument ALT="je suis une image" complétant l'instruction d'affichage de ces deux images, elle est responsable de l'apparition d'une bulle d'information surgissant au moment du passage du pointeur de la souris au-dessus de l'image. C'est une utilisation de la méthode onMouseOver, propriété de la souris.
Les propriétés d'alignement des images prévoient les dispositions suivantes:
ALIGN=LEFT, ALIGN=RIGHT. Ici l'utilisation de l'argument ALIGN=LEFT aligne
l'image à la gauche du texte.
Voici le code source:
Remarquez sur la dernière ligne l'instruction BR qui supporte ici un argument clear=all. C'est le seul argument que peut rencontrer cette balise et il est spécifique à ce genre de situation: prévenir qu'un paragraphe plus court que la hauteur de l'image n'entraîne les paragraphes suivants à s'aligner eux aussi à la droite de l'image.
Il s'agit d'une suite d'instructions car un tableau est un système composé de rangées et de cellules. La première intruction est TABLE pour tableau elle se terminera la dernière avec /TABLE. Ensuite vient la rangée TR (Table Row) dans laquelle sont insérées ici deux cellules ou deux colonnes TD (Table Data). Voici l'affichage de ces lignes.
| cellule 1 | cellule 2 |
L'ordre d'ouverture et de fermeture des paires de balises est très important. La première à ouvrir sera la dernière à fermer. Cet exemple illustre bien l'ordre de fermeture dans une suite de commandes imbriquées.
L'ajout de paramètres WIDTH et HEIGHT permet de contrôler la taille du tableau de l'extérieur pour ainsi dire, en lui imposant une taille fixe. Deux types de valeurs sont permises, le pourcentage ou les pixels. Voici notre même tableau avec une largeur de 400 pixels (WIDTH=400)
| cellule 1 | cellule 2 |
Autres paramètres d'importance et propres à l'affichage des tableaux: les propriétés de marge (CELLPADDING) et d'espacement (CELLSPACING). La marge concerne l'espace entre le texte et le bord du tableau alors que l'espacement concerne la distance entre les cellules.
Voici notre tableau avec l'ajout des propriétés CELLPADDING=10 et CELLSPACING=15.
On pourra finalement centrer le contenu des cellules en ajoutant l'argument ALIGN=CENTER dans l'élément TR si cet effet est voulu pour toutes les cellules de la rangée ou individuellement dans chaque TD ou l'effet est désiré. C'est ici le même argument qui avait été utilisé dans l'élément TABLE pour assurer son alignement au centre de la page.
| cellule 1 | cellule 2 |
Voici le code source de l'exemple complet:
|
|
Voici le code source de cet exemple. Remarquez la suppression du cadre par l'attribution de la valeur 0 à l'argument BORDER.
