Listes et tableaux en HTML 

Pour la présentation structurée de données, le HTML connaît :

• Les listes de définition

• Les listes à puces

• Les listes numérotées

• Les tableaux

Les Listes de définitions

Les listes de définition sont construites entre deux balises <DL> et </DL> à, l'aide des balises <DT> pour délimiter les titres et <DD> pour marquer les définitions placées en retrait. Toute cette page en est un exemple. Sa structure est la suivante :

<DL>

<DT> PREMIER TITRE </DT>
<DD> PREMIÈRE DÉFINITION </DD>

<DT> DEUXIÈME TITRE </DT>

<DD> DEUXIÈME DÉFINITION </DD>

<DT> TROISIÈME TITRE </DT>

<DD> TROISIÈME DÉFINITION </DD>

</DL>

Les listes à puces

Construites entre les balises <UL> et </UL>, chaque entrée de la liste est signalée par une balise <LI> qui n'a pas besoin de marqueur de fin. En voici un exemple :

• Premier terme d'une liste à puce

• Deuxième terme d'une liste à puce

• Troisième terme d'une liste à puce

En HTML :

<UL>

<LI> Première entrée
<LI> Deuxième entrée
<LI> ...

</UL >

Les listes numérotées

Identiques aux listes à puces mais construites entre les balises <OL> et </OL>. Chaque entrée y est marquée par une balise <LI> qui n'a pas besoin d'être fermée. En voici un exemple :

1. Premier terme d'une liste numérotée

2. Deuxième terme d'une liste numérotée

3. Troisième terme d'une liste numérotée

Une liste numérotée peut ne pas commencer avec le chiffre 1. Exemple, on joint l'attribut START= 7 à la balise <OL>soit en HTML <OL START=7>

7. Premier terme d'une liste numérotée débutant à 7

8. Deuxième terme d'une liste numérotée

9. Troisième terme d'une liste numérotée

Les tableaux

Outils puissants mais difficiles à mettre en œuvre, ils sont construits entre les balises <TABLE> et </TABLE>. Les tableaux exigent une déclaration de chacune de leurs lignes et, à l'intérieur de celles-ci de chacune de leurs cellules à, l'aide de balises appropriées.
Voici un exemple de tableau simple :

En HTML, on commence par la balise <TABLE BORDER=1> où l'attribut BORDER=... permet d'indiquer en pixels l'épaisseur des bordures éventuelles. Pour fixer les dimensions d'un tableau (par défaut, la largeur des cellules dépend de leur contenu), on utilise l'attribut WIDTH= qui accepte une valeur en pixels (valeur absolue) ou en pourcentage (valeur relative à la largeur de la fenêtre). Puis vient la définition de la première ligne du tableau à l'aide des balises <TR> et </TR>.. Il convient alors, à l'intérieur de la première ligne ainsi délimitée de déclarer chaque cellule en encadrant son intitulé avec <TD> et </TD> :

<TABLE BORDER=1 WIDTH=300>

<TR>

<TD>Contenu 1ère cellule, 1ère ligne (vide)</TD>
<TD>Contenu 2ème cellule, 1ère ligne(JUIN)</TD>
<TD>Contenu 3ème cellule, 1ère ligne</TD>
<TD>Contenu 4ème cellule, 1ère ligne</TD>

</TR>
<TR>

 

<TD>Contenu 1ère cellule, 2ème ligne</TD>
<TD>Contenu 2ème cellule, 2ème ligne</TD>
<TD>Contenu 3ème cellule, 2ème ligne</TD>
<TD>Contenu 4ème cellule, 2ème ligne</TD>

</TR>

<TR>

<TD>Contenu 1ère cellule, 3ème ligne</TD>
<TD>Contenu 2ème cellule, 3ème ligne</TD>
<TD>Contenu 3ème cellule, 3ème ligne</TD>
<TD>Contenu 4ème cellule, 3ème ligne</TD>

</TR>

</TABLE>

Certaines cellules, situées en-tête de ligne ou de colonne peuvent être déclarées comme telles de façon à recevoir un format particulier.(en général gras). On utilise alors pour ces cellules les balises <TH> et </TH> en lieu et place de <TD>. Située après la balise d'ouverture <TABLE>, <CAPTION ALIGN=TOP>...</CAPTION> ou <CAPTION ALIGN=BOTTOM>...</CAPTION> permet de doter le tableau d'un surtitre ou d'une légende :

Il est possible de choisir des couleurs ou de réaliser des alignement différents pour chacune des lignes ou encore, pour chaque cellule d'un tableau. Les balises de déclaration de ces éléments doivent alors se voir dotées de l'attribut BGCOLOR=... pour la couleur (exemple : <TD BGCOLOR="teal">) et, pour les alignements, ALIGN=..., VALIGN=... dans le cas d'un alignement vertical.
Les valeurs possibles de l'attribut ALIGN sont les suivantes (exemple donné sur un marqueur de cellule):

<TD ALIGN=CENTER>
<TD ALIGN=LEFT>
<TD ALIGN=RIGHT>
<TD ALIGN=DECIMAL> (alignement sur le séparateur décimal
<TD ALIGN=CHAR> (alignement sur un caractère à indiquer)

Les valeurs possibles de l'attribut VALIGN sont les suivantes (exemple donné sur un marqueur de ligne):
<TR ALIGN=TOP>
<TR ALIGN=MIDDLE>
<TR ALIGN=BOTTOM>
<TR ALIGN=BASELINE> (alignement sur la ligne de base)

La fusion des cellules (CELLSPANNING) est possibles grâce aux deux attributs COLSPAN=... et ROWSPAN=... qui, joints aux balises <TH> et <TD>, permettent respectivement la fusion à l'horizontale et à la verticale des cellules :

En HTML, lors de la déclaration de la première, on définit trois cellules en une seule :

<TABLE BORDER=1 WIDTH=300>

  <TR>

<TH COLSPAN=3 ALIGN=CENTER>VENTES DE CRAPOS</TH>
</TR>

<TR ALIGN=CENTER>

On définit maintenant pour la deuxième ligne :

<TD>MAI</TD>
<TD>JUIN</TD>
<TD BGCOLOR="green">
<FONT COLOR="white">JUILLET</FONT></TD>

</TR>

<TR ALIGN=CENTER>

<TD>65</TD>
<TD>460</TD>
<TD>589</TD>

</TR>

</TABLE>

Si l'on veut fusionner des cellules en hauteur maintenant, on utilise la balise TD avec l'attribut ROWSPAN=... pour déclarer une cellule de hauteur spécifique :

De ce fait, les cellules 4 et 7 n'ont plus à être déclarées :

<TABLE BORDER=1 WIDTH=300>

<TR ALIGN=CENTER>

<TD ROWSPAN=3 WIDTH=33% > FUSION EN LIGNE</TD>
<TD>2</TD>
<TD>3</TD>

</TR>
<TR ALIGN=CENTER>

<TD>5</TD>
<TD>6</TD>

</TR>
<TR ALIGN=CENTER>

<TD>8</TD>
<TD>9</TD>

</TR>

 

</TABLE>

Joints à la balise <TABLE>, les attributs CELLSPACING=... et CELLPADDING=... définissent respectivement pour CELLSPACING=... la distance de chaque cellule aux autres ainsi qu'au tableau, pour CELLPADDING=... l'espace tournant éloignant le texte des bords de la cellule :

Enfin, l'attribut NOWRAP empêche le navigateur d'insérer des sauts de lignes automatiquement dans le texte des cellules lors du redimensionnement de la fenêtre. NOWRAP peut être attribué aux balises <TABLE>,<TR>,<TD> ou <TH>

Les tableaux sont un outil puissants de mise en page. Comme toutes les balises HTML, les tableaux peuvent être imbriqués. Ils constituent aussi un bon moyen de placer des images.

< Sommaire