Les tableaux dans une page Web

I. Généralités

1. Introduction

Usuellement un tableau est constitué de lignes et de colonnes. Ce n'est pas tout à fait le cas en HTML :

1. Un tableau est un conteneur <table>
2. Un tableau est constitué de lignes <tr> (pour table row)
3. Un tableau est constitué de cellules<td> (pour table data)

Il est également possible de fournir une légende au tableau. Tous ces éléments se structurent globalement dans un entête, un pied de tableau, et un corps de tableau.

>Retour à la TdM

2. Structure d'un tableau

a. Introduction

Un tableau se déclare grâce à la balise <table>. Cette balise peut avoir plusieurs balises-enfants. La plupart sont facultatives, mais si elles sont présentes, elles doivent être utilisées dans cet ordre :

1. <caption>
2. <col> ou <colgroup>
3. <thead>
4. <tfoot>
5. <tbody>

>Retour à la TdM

II. Les éléments d'un tableau

1. La balise <table>

La notion de table étant complexe, le nombre d'attributs de cette balise est important.

Attribut	Effet	Valeur
summary	donne un rapide résumé du contenu du tableau. Cela améliore l'accessbilité de la page.	une chaîne de caractères
width	largeur du tableau	une longueur, qui peut s'exprimer en nombre de pixels ou en pourcentage de la largeur de la fenêtre du navigateur
border	épaisseur de la bordure extérieure	en pixel (par défaut, 0, sans bordure)
frame	(rien à voir avec la balise <frame>, que l'on verra dans le cours sur les cadres). Présence de l'encadrement extérieur	void : aucune above : haut seulement below : bas seulement hsides : haut et bas vsides : gauche et droite lhs : gauche seulement rhs : droite seulement box : sur les 4 côtés border : sur les 4 côtés aussi
rules	comme l'attribut frame, mais pour l'encadrement intérieur	none : aucun groups : seulement entre les groupes de lignes (<thead>, <tbody> et <tfoot>) et les groupes de colonnes (<colgroup> et <col>) rows : entre les lignes cols : entre les colonnes all : partout (valeur par défaut)
cellspacing	marge entre cellules consécutives	en pixels
cellpadding	marge entre le bord et le contenu de la cellule	en pixels
align	position du tableau dans la fenêtre. Cet attribut est obsolète en HTML 4.01 strict.	center left right
bgcolor	couleur de fond du tableau. Cet attribut estobsolète en HTML 4.01 strict.	nom de couleur ou triplet RGB

Table 1. Attributs de la balise <table>.

Certains de ces attributs sont liés ; ainsi si border="0", alors frame="void" et rules="none".

Par défaut la taille du tableau s'ajuste à son contenu. C'est cette gestion particulière de la taille qui fait du tableau un moyen très utile de présentation.

>Retour à la TdM

2. La balise <caption>

Cette balise est facultative, et ne peut être présente qu'une seule fois dans le tableau. Son rôle est de lui donner une légende, plus complète que le court résumé de l'attribut summary.

Elle possède un attribut align, qui gère son alignement relativement au tableau. Cet attribut est obsolète en HTML 4.01 strict.

Exemple d'utilisation :

<caption>Légende du tableau.</caption>

>Retour à la TdM

3. Les balises <col> et <colgroup>

a. Introduction

Le rôle fondamental de ces balises est de définir des groupements de colonnes. <colgroup> le fait de manière plus "structurelle".

1. <col> permet à plusieurs colonnes de partager les mêmes attributs. C'est un élément vide.
2. <colgroup> permet de regrouper un ensemble de colonnes en une seule unité logique, et d'appliquer par exemple un style à cet ensemble de colonnes.

>Retour à la TdM

b. Attributs

Attribut	Effet	Valeur(s)
span	Nombre de colonnes à regrouper	un nombre
width	Largeur de chaque colonne	une longueur, qui peut s'exprimer en nombre de pixels, en pourcentage, ou bien par exemple width="0.5*", en proportion relative
valign	alignement vertical	top : alignement en haut de la cellule middle : alignement au milieu de la cellule (valeur par défaut) bottom : alignement en bas de la cellule baseline : alignement sur la ligne du bas dela cellule
align	alignement horizontal	left (valeur par défaut) right center justify char : l'alignement se fait sur un caractère particulier
char	spécifie quel caractère doit servir de base pour l'alignement	un caractère. La valeur par défaut est celle du séparateur décimal défini par l'attribut de langage lang, à savoir le "." pour la langue par défaut, et le "," si l'attribut définit le français comme langue (lang="fr"). Il n'est pas demandé aux navigateurs de supporter cet attribut.
charoff	spécifie le décalage en position horizontale imposé aucaractère d'alignement.	un nombre.

Table 2. Attributs communs à <col> et <colgroup>.

>Retour à la TdM

c. Exemples

Par exemple, si on doit spécifier que quarante colonnes dans un tableau doivent être alignés à droite, au lieu d'écrire...

<colgroup>
  <col width="20">
  <col width="20">
... 40 éléments au total... </colgroup>

... on peut se contenter d'écrire...

<colgroup span="40" width="20"></colgroup>

Quand il est nécessaire d'identifier une unique colonne sur ces quarante, par exemple la dernière, on peut regrouper sous la forme...

<colgroup width="20">
  <col span="39"></col>
  <col valign="top"></col>
</colgroup>

>Retour à la TdM

4. Structure du contenu

a. Les balises <thead> et <tfoot>

Le rôle de ces balises est de contenir les informations nécessaires à l'entête et au bas du tableau. Il s'agit essentiellement des titres de colonnes. Ces balises contiennent des lignes (voir le paragraphe consacré à la balise <tr> pour plus de détails). Il est possible, pour peu que l'on ait déclaré la balise <thead> (respectivement <tfoot>), de dupliquer l'entête (respectivement le bas) d'un tableau en cas de saut de page.

Les attributs de ces balises sont les attributs d'alignement des cellules (valign, align, char et charoff).

>Retour à la TdM

b. La balise <tbody>

Son rôle est de définir le corps même d'un tableau. En dupliquant plusieurs <tbody> au sein d'un même tableau, on peut définir plusieurs composantes structurelles d'apparences et de formats différents.

Les attributs de cette balise sont les attributs d'alignement des cellules (valign, align, char et charoff).

>Retour à la TdM

5. Les lignes: la balise <tr>

a. Généralités

Les attributs de cette balise sont les attributs d'alignement des cellules (valign, align, char et charoff), ainsi que l'attribut bgcolor, dont la fonction est de spécifier la couleur de fond de la ligne. Mais ce dernier attribut est obsolète en HTML 4.01 Strict.

Cette balise permet de définir une ligne dans le tableau. Elle peut contenir une ou plusieurs balises <th> ou <td>.

>Retour à la TdM

b. Balises <td> et <th>

Ces balises acceptent les mêmes contenus, ainsi que les mêmes attributs. Cependant, <th> doit être utilisé pour indiquer des cellules destinées à être des entêtes de colonnes (Table Header).

Ces balises peuvent contenir à peu près tous les types d'éléments, y compris les <div> et les <p>.

Attribut	Effet	Valeur(s)
abbr	fournit un abrégé du contenu de la cellule	une chaîne de caractères
axis	indique à quelle catégorie appartient la cellule (voir sur le site du W3C pour plus d'informations sur l'utilisation de cet attribut dans la structuration du contenu d'un tableau).	une chaîne de caractères
headers	renvoi à(aux) l'identifiant(s) de la cellule "header" associée. Cela permet à un agent vocal de présenter le type de contenu de la cellule avant le contenu proprement dit.	une liste d'indentifiants (séparés par des espaces)
scope	indique quel est le jeu de cellules auquel la cellule "header" courante s'applique	row : s'applique à la ligne courante col : s'applique à la colonne courante rowgroup : s'applique à l'ensemble du <thead>, <tfoot> ou <tbody> courant colgroup : s'applique au groupe de colonnes courant (spécifié par les balises <colgroup> ou <col>)
rowspan	nombre de lignes concernées par la balise courante.	un nombre. La valeur par défaut est 1. Si rowspan="0", la cellule s'applique à l'ensemble des lignes, depuis la ligne courante jusqu'à la dernière dans le <thead>, <tfoot> ou <tbody> courant.
colspan	nombre de colonnes concernées par la cellule courante.	un nombre. La valeur par défaut est 1. Si rowspan="0", la cellule s'applique à l'ensemble des colonnes, depuis la ligne courante jusqu'à la dernière du <colgroup>.
align	alignement horizontal	left (valeur par défaut) right center justify char : l'alignement se fait sur un caractère particulier
char	spécifie quel caractère doit servir de base pour l'alignement	un caractère. La valeur par défaut est celle du séparateur décimal défini par l'attribut de langage attr, à savoir le "." pour la langue par défaut, et le "," si l'attribut définit le français comme langue (attr="fr"). Il n'est pas demandé aux navigateurs de supporter cet attribut.
charoff	spécifie le décalage en position horizontale imposé au caractère d'alignement.	un nombre.
valign	alignement vertical	top : alignement en haut de la cellule middle : alignement au milieu de la cellule (valeur par défaut) bottom : alignement en bas de la cellule baseline : alignement sur la ligne du bas de la cellule
nowrap	empêche le retour à la ligne automatique dans les cellules quand le bord de la fenêtre du navigateur est atteint. Obsolète en HTML 4.01 strict.	valeur unique : nowrap
bgcolor	couleur de fond de la cellule. Cet attribut est obsolète enHTML 4.01 strict.	nom de couleur ou triplet RGB
width	largeur de la cellule. Cet attribut est obsolète en HTML 4.01 strict.	nombre de pixels ou pourcentage
height	hauteur de la cellule. Cet attribut est obsolète en HTML 4.01strict.	nombre de pixels ou pourcentage

Table 3. Attributs des balises <th> et <td>.

>Retour à la TdM

III. Remarques

1. Cellules vides

Si le nombre de cellules est différent d'une ligne à l'autre, les derniers emplacements sont vides. Par ailleurs, un conteneur vide <td></td> crée un emplacement vide alors qu'un conteneur contenant un espace insécable   crée une cellule vide.

>Retour à la TdM

2. Tableaux imbriqués

Un tableau peut en contenir un autre qui peut en contenir un autre qui... Il n'y a pas de limitation.

>Retour à la TdM

3. Des tableaux pour la présentation

Créés au départ pour présenter des tables de données, les tableaux sont très vite devenus un moyen efficace de présentation claire et ordonnée. Ils permettent, par exemple, de faire de manière souple du multicolonne. De nombreux sites les utilisent, comme...

• ... le site du Monde : http://www.lemonde.fr.
• ... le site de Yahoo : http://www.yahoo.fr.
• ... le site de l'Université Pierre et Marie Curie : http://www.upmc.fr.

Néanmoins, les performances des navigateurs les plus récents dans le support des feuilles de style rendent cette utilisation des tableaux obsolète ; il vaut mieux maintenant lui préférer ue mise en page à base d'éléments div.