UNS
DSI
Nephi

11. Les tableaux - H.T.M.L.HTML3

Date de mise à jour : 3 janvier 2002

HTML 3 permet la fabrication de tableaux très visuels.
On utilise les commandes suivantes :


Déclare le début et la fin d'un tableau
<TABLE BORDER= CELLPADDING= CELLSPACING= WIDTH= HEIGHT= BGCOLOR=>
</TABLE>

    BORDER=
  • BORDER=0 le tableau n'a pas de contour
  • BORDER=n le tableau a un contour d'épaisseur "n"
    CELLPADDING=
  • Définit l'espace entre l'objet et le contour d'une cellule
    CELLSPACING=
  • Définit l'épaisseur du trait entre les cellules
    WIDTH=
  • Fixe la largeur du tableau
    HEIGHT=
  • Fixe la hauteur du tableau
    BGCOLOR=
  • BGCOLOR="#RRGGBB"

    Définit la couleur de fond de tout le tableau. RR, GG et BB sont les valeurs hexadécimales du Rouge(RR), Vert(GG) et Bleu(BB).


Définit le début et la fin d'une ligne
<TR ALIGN= BGCOLOR=>
</TR>

    ALIGN=
  • ALIGN=LEFT (par défaut) toutes les cellules de la ligne sont cadrées à gauche
  • ALIGN=CENTER toutes les cellules de la ligne sont centrées
  • ALIGN=RIGHT toutes les cellules de la ligne sont cadrées à droite
    BGCOLOR=
  • BGCOLOR="#RRGGBB"

    Définit la couleur de fond des cellules de cette ligne. RR, GG et BB sont les valeurs hexadécimales du Rouge(RR), Vert(GG) et Bleu(BB).


Définit chaque élément de la ligne titre
<TH COLSPAN= ROWSPAN= ALIGN= VALIGN= WIDTH= BGCOLOR=>
</TH>

Décrit chaque élément du tableau
<TD COLSPAN= ROWSPAN= ALIGN= VALIGN= WIDTH= BGCOLOR=>
</TD>

    COLSPAN=
  • COLSPAN=n (par défaut n=1) la cellule occupe n colonnes.
    ROWSPAN=
  • ROWSPAN=n (par défaut n=1) la cellule occupe n lignes.
    ALIGN=
  • ALIGN= alignement horizontal du contenu de la cellule.
  • ALIGN=LEFT (valeur par défaut) alignement à gauche de la cellule.
  • ALIGN=RIGHT alignement à droite de la cellule.
  • ALIGN=CENTER centrage dans la cellule.
    VALIGN=
  • VALIGN= alignement vertical du contenu de la cellule.
  • VALIGN=BOTTOM (valeur par défaut) alignement au bas de la cellule.
  • VALIGN=TOP alignement au sommet de la cellule.
  • VALIGN=CENTER centrage dans la cellule.
    WIDTH=
  • WIDTH= largeur de la cellule en pourcentage ou en pixel.
    BGCOLOR=
  • BGCOLOR="#RRGGBB"

    Définit la couleur de fond de la cellule. RR, GG et BB sont les valeurs hexadécimales du Rouge(RR), Vert(GG) et Bleu(BB).

Décrit le titre du tableau
<CAPTION ALIGN=>
</CAPTION>

    ALIGN=
  • ALIGN=TOP (par défaut) la légende du tableau est en haut
  • ALIGN=BOTTOM la légende du tableau est en bas


exemple :

HTML=

<CENTER>
<TABLE BORDER BGCOLOR="#ccffaa">
<CAPTION>Comparatif modèle économique</CAPTION>
<TR>
 <TH COLSPAN=3>Modèle
 <TH ROWSPAN=2>Vitesse<BR>en km/heure
 <TH ROWSPAN=2>Consommation<BR>en litre/100 km
</TR>
<TR>
 <TH>Marque</TH>
 <TH>Type</TH>
 <TH>Numero de série</TH>
</TR>
<TR>
 <TD>Peugeot 106</TD>
 <TD>B2</TD>
 <TD ALIGN=MIDDLE>234.34</TD>
 <TD>132</TD>
 <TD>5,7</TD>
</TR>
<TR>
 <TD>Citroën AX</TD>
 <TD>AT67B8</TD>
 <TD ALIGN=MIDDLE>6789</TD>
 <TD>126</TD>
 <TD>5,5</TD>
</TR>
</TABLE>
</CENTER>

Browser=

Comparatif modèle économique
Modèle Vitesse
en km/heure
Consommation
en litre/100 km
Marque Type Numero de série
Peugeot 106 B2 234.34 132 5,7
Citroën AX AT67B8 6789 126 5,5


Accueil

Cours HTML

Menu
Introduction à HTML
Les en-têtes
Les délimiteurs
Les styles
Les listes
Les caractères spéciaux
et lettres accentués

Les images
Les images réactives
Les liens
Les formulaires
Les tableaux
Les cellules (frames)
Divers

Index

Sécurité

Pointeurs utiles

Version 1.7 : 8 avril 2002