HTML : Insérer une image dans une page HTML.

Base de connaissances

html Langage HTML

punaize  Problème :

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

punaize  Solution :

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

punaize  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

Cellule 1 Cellule 2 Cellule 3
Cellule 4 Cellule 5 Cellule 6
Cellule 7 Cellule 8 Cellule 9

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Une souris et des hommes… partageons une même passion !