[en-tête : HTML pour les pressés]


Nelson OUELLET
Professeur adjoint
Département d'histoire et de géographie
Université de Moncton


Des tableaux pour vos chiffres (et pour votre texte?)

L'une des principales innovations au langage HTML fut l'introduction, à partir de la version 3.2, de marqueurs pour la création de tableaux. Grâce aux marqueurs table, tr, td et th les concepteurs de pages Web ont désormais la possibilité de créer des documents (du point de vue de la mise en page) de très haute qualité. La dernière version du langage HTML (4.0) prévoit cependant la disparition des tableaux comme outils de mise en page; l'objectif est d'encourager l'utilisation des feuilles de style (Cascading Style Sheets).

Même s'il est fortement recommandé de ne pas placer toutes ses énergies de concepteurs dans les tableaux (il est difficile de prévoir la durée de la transition vers les CSS), il y a fort à parier que l'utilisation des tableaux comme stratégie de mise en page sur le Web demeurera une option efficace pour au moins deux ans. Un conseil : pensez plutôt aux marqueurs de tableaux comme des outils de diffusion de données chiffrées et commencez à définir le style de vos documents HTML par le biais des CSS.

Les marqueurs de tableaux

<table> ... </table>
Ce marqueur, et les autres qui le complètent, permet d'insérer des tableaux à l'intérieur de documents HTML. Contrairement à ce que l'on peut croire, les tableaux créés à travers HTML sont rarement utilisés pour présenter des données statistiques. Les concepteurs de pages Web s'en servent plutôt pour raffiner l'allure de leurs documents.

<tr> ... </tr>
Le marqueur « tr » sert à identifier et à définir une rangée du tableau.

<td> ... </td>
Le marqueur « td » sert à identifier et à définir une cellule de données du tableau.

<th> ... </th>
Le marqueur « th » sert à identifier et à définir un en-tête à l'intérieur du tableau.


Les tableaux et leurs attributs


ATTRIBUT DESCRIPTION EXEMPLE
border Permet de tracer une bordure autour du tableau, des rangées et des colonnes. Par défaut, la bordure est de 2 pixels d'épaisseur. Pour supprimer les bordures, il s'agit simplement d'ajouter la valeur « 0 » à l'attribut border. <table border=0>
align Permet de déterminer la position du texte à l'intérieur d'une cellule (td), d'une rangée (tr) ou d'un en-tête (th). Les valeurs acceptées sont : left, right, top et center. Les deux dernières valeurs n'ont pas d'effet à l'intérieur du marqueur table. <table border=0> <tr align=center>
valign Permet de déterminer la position verticale de données à l'intérieur d'une rangée (tr), d'une cellule (td) ou d'un en-tête (th). Les valeurs acceptées sont : top, baseline, center et bottom. La valeur « center » n'est pas toujours requise puisqu'elle est la valeur définie « par défaut ». À l'exception du navigateur Internet Explorer, l'attribut valign n'est pas accepté par les autres logiciels comme Netscape ou Mosaic. <table border=0> <tr valign=top>
width Permet de fixer la largeur du tableau. Il existe deux façons de déterminer la largeur d'un tableau : en pixels (72 pixels représentent « un pouce ») ou en pourcentage (par rapport à la taille de l'écran). <table border=5 width="92%">
cellpadding Permet de déterminer l'espace séparant le contenu d'une cellule de son extrémité. Par défaut, l'espace accordé est de 1 pixel. <table border=5 cellpadding=5>
cellspacing Permet de fixer l'espace entre des cellules de données. La valeur par défaut est de 2 pixels. <table border=0 cellspacing=5>
hspace Permet de modifier (comme pour l'image) l'espace de gauche et de droite qui sépare un tableau du texte adjacent. La valeur par défaut est « 0 ». <table border=5 hspace=10>
vspace Permet de modifier (comme pour l'image) l'espace du haut et du bas qui sépare un tableau du texte adjacent. La valeur par défaut est « 0 ». <table border=5 vspace=10>
bgcolor Permet de modifier la couleur de fond du tableau, des rangées, des cellules ou des en-têtes. Pour connaître la liste des couleurs, consultez la section 4.a du guide. <table border=5 bgcolor=red>
colspan Permet de fournir le nombre de colonnes occupé par un en-tête ou une cellule de données à l'intérieur d'une rangée. <table border=5> <tr><td colspan=3>
rowspan Permet de fournir le nombre de rangées occupé par un en-tête ou une cellule de données à l'intérieur d'une colonne. <table border=5> <tr><th rowspan=3>


Responsable du site: Nelson Ouellet
Courrier électronique: nelson.ouellet@umoncton.ca