Les tableaux dans une page Web

Contenu du cours

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 :

Un tableau est un conteneur <table>
Un tableau est constitué de lignes <tr> (pour table row)
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 :

<caption>
<col> ou <colgroup>
<thead>
<tfoot>
<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".

<col> permet à plusieurs colonnes de partager les mêmes attributs. C'est un élément vide.
<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...

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

>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 en `HTML` 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.01` strict.	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.

>Retour à la TdM

Cours de HTML - Les tableaux dans une page Web

Table des matières (TdM)

Contenu du cours

I. Généralités

1. Introduction

2. Structure d'un tableau

a. Introduction

II. Les éléments d'un tableau

1. La balise <table>

2. La balise <caption>

3. Les balises <col> et <colgroup>

a. Introduction

b. Attributs

c. Exemples

4. Structure du contenu

a. Les balises <thead> et <tfoot>

b. La balise <tbody>

5. Les lignes: la balise <tr>

a. Généralités

b. Balises <td> et <th>

III. Remarques

1. Cellules vides

2. Tableaux imbriqués

3. Des tableaux pour la présentation

Exercice 1. Formatages de cellules

Énoncé

Historique de ce document

Conditions d'utilisation et licence