Base de connaissances

 Langage HTML

  Problème :

Comment insérer dans une page HTML une image à côté (ou à la suite) d’un texte : soit à gauche, soit à droite ???

  Solution :

Faire un tableau (avec ou sans bordures) de deux colonnes, une pour le texte et une pour l’image.

  Les Tableaux :

La balise <TABLE> indique au navigateur la création d’un tableau.
L’attribut TH définit l’en-tête de chaque colonne.
L’attribut TR définit une ligne.
L’attribut TD définit une cellule.

Aligner les éléments du tableau :

• ALIGN=LEFT : Les données sont alignées à gauche de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
• ALIGN=RIGHT : Les données sont alignées à droite de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
• ALIGN=CENTER : Les données sont centrées à l’intérieur de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
• VALIGN=MIDDLE : (défaut) Les données sont centrées verticalement à l’intérieur de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
• VALIGN=TOP : Les données sont en haut de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
• VALIGN=BOTTOM : Les données sont en bas de la cellule (pour TD) ou de toutes les cellules (pour TH ou TR).
• VALIGN=BASELINE : Toutes les données des cellules sont alignées sur une ligne commune (uniquement pour TH ou TR).

Attributs de mise en page et d’espacement :

• WIDTH : spécifie la largeur du tableau ou d’une cellule, en pixels ou pourcentage de la fenêtre du navigateur.
• HEIGHT : spécifie la hauteur du tableau ou d’une cellule, en pixels ou pourcentage de la fenêtre du navigateur.
• BORDER : spécifie la taille en pixels (par défaut 1) de la bordure du tableau.
• CELLPADDING : spécifie l’espace en pixels entre la bordure et le contenu de la cellule du tableau.
• CELLSPACING : spécifie l’espace en pixels entre les cellules du tableau.
• BGCOLOR : spécifie la couleur d’une cellule.
• BORDERCOLOR : spécifie la couleur de la bordure du tableau.
• BORDERCOLORLIGHT : spécifie la couleur aux points culminants de la bordure du tableau (effet 3d).
• BORDERCOLORDARK : spécifie la couleur de l’ombre de la bordure du tableau (effet 3d).
• BACKGROUND : spécifie l’URL de l’image à afficher comme image d’arrière plan du tableau.

Exemple d’un Tableau avec certains de ses attributs:

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=300 HEIGHT=150>
<TR>
<TD BGCOLOR= »BLUE »>Cellule 1
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Cellule 4
<TD ALIGN=RIGHT BGCOLOR= »YELLOW »>Cellule 5
<TD ALIGN=RIGHT>Cellule 6
</TR>
<TR>
<TD ALIGN=CENTER >Cellule 7
<TD ALIGN=CENTER >Cellule 8
<TD ALIGN=CENTER BGCOLOR= »RED »>Cellule 9
<TR>
</TABLE> </CENTER>

Ce qui donne sans bordures (BORDER = 0 ) :
Cellules 1, 2 et 3 à gauche (ALIGN=LEFT par défaut si rien n’est spécifiée;).
Cellules 4, 5 et 6 à droite (ALIGN=RIGHT).
Cellules 7, 8 et 9 centrées (ALIGN=CENTER).

Cellule 4Cellule 5Cellule 6