Les tableaux

Les tableaux (ou tables) dans HTML ressemblent aux tableaux de données que permettent de créer les tableurs (et n'ont rien à voir avec les tables d'une base de données relationnelles).

Si au moment de leur invention par Netscape, les tableaux étaient effectivement prévus pour représenter des données tabulaires, cette utilisation initiale à été rapidement détournée par les concepteurs de site pour effectuer la mise en page des documents.

Cette technique est héritée de la mise en page papier qui se fait à partir d'une grille : une série de lignes horizontales et de colonnes verticales, qui partagent la page de manière harmonieuse. On peut ainsi donner de l'importance à certaines zones (ligne, colonne ou jonction des deux) et guider le chemin d'exploration et de lecture. La grille et ses éléments peuvent être directement visibles et clairement marqués par des cadres, filets ou colonnages, mais ils peuvent aussi être agencés d'une façon plus subtile qui ne se remarque que si l'on recherche l'architecture sous-jacente de la mise en page.
Dans les années 1995-2000, les tableaux permettaient d'agencer les blocs d'informations et les images des pages car les feuilles de style CSS en étaient à leur début et n'étaient pas implémentées de façon satisfaisante par les navigateurs. Les tableaux étaient alors les seules constructions HTML qui permettaient d'avoir des couleurs de fond et/ou des images de fond différentes suivant les blocs et d'avoir des élements positionnés en vis à vis les uns à côté des autres.
Jusque vers 2007, 2008, les tableaux dans HTML étaient donc essentiellement utilisés pour mettre au point des grilles d'affichage et de mise en page. Le formatage qu'ils permettent est extrêmement puissant et toutes les pages HTML professionnelles étaient construites avec des tableaux imbriqués.

Aujourd'hui, cette utilisation des tableaux est totalement abandonnée au profit des feuilles de style CSS qui offrent des possibilités démultipliées dans le positionnement et la mise en forme des éléments, et qui sont bien prises en compte et implémentées par les navigateurs.
On est donc revenu à l'utilisation qui était prévue originellement pour les tableaux : la présentation de données tabulaires.

Structure minimum

Un tableau est constitué de lignes qui contiennent des cellules. La structure est composée au minimum avec trois éléments :

table est l'élément principal qui marque le début et la fin du tableau. Par défaut une table prend la place maximum pour afficher son contenu.
tr définit une ligne de cellules (row),
td définit une cellule (cell) dans une ligne. Par défaut, le contenu d'une cellule est centré verticalement.

Comme on peut le constater à l'affichage de l'exemple, la mise en forme par défaut est pratiquement inexistante. Il faut donc utiliser des règles de style CSS pour rendre un tableau "présentable".

Exemple : tableau avec structure minimum

On a ici un exemple minimum de mise en forme. Voir dans le tutoriel CSS la partie consacrée aux tableaux.

Structure avec sémantique

Aux 3 éléments de base on peut en ajouter d'autres si on veut que la définition du tableau soit sémantiquement correcte :

caption ajoute un titre au tableau,
thead groupe une ou plusieurs lignes servant d'en-tête au tableau,
th définit une cellule servant de titre pour une colonne ou une ligne,
tbody groupe une ou plusieurs lignes représentant le corps au tableau (de données qui ne sont ni dans l'en-tête ni dans le pied),
tfoot groupe une ou plusieurs lignes servant de pied au tableau.

Si il y a un pied au tableau, cet élément tfoot doit être placé dans le code HTML directement après l'élément d'en-tête thead et avant l'élément tbody. Le navigateur le placera visuellement en bonne position à la fin du tableau. Cette particularité existe pour des raisons d'accessibilité : les outils de lecture de page peuvent donner immédiatement les informations pertinentes (comme les totaux par exemple) sans que la totalité du tableau doivent être parcourue.

Exemple : tableau avec sémantique

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Tableau</title>
		<style>
			table { border-collapse: collapse; }
			td, th { border: 1px solid; padding: 4px 10px; }
			td { text-align: right; }
			th, tfoot { background: lightgrey; }
			caption { margin: 0.5em 0; font-style: italic; }
		</style>
	</head>
	<body>
		<table>
			<caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption>
			<thead>
				<tr>
					<th>Film</th>
					<th>France</th>
					<th>Belgique</th>
					<th>Suisse</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>Totaux</th>
					<td>20 815 883</td>
					<td>1 967 235</td>
					<td>2 722 757</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>La communauté de l'anneau</td>
					<td>6 822 407</td>
					<td>541 274</td>
					<td>903 015</td>
				</tr>
				<tr>
					<td>Les deux tours</td>
					<td>7 063 746</td>
					<td>664 070</td>
					<td>901 053</td>
				</tr>
				<tr>
					<td>Le retour du roi</td>
					<td>6 930 000</td>
					<td>761 891</td>
					<td>915 689</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Catalogue Lego Junior

Ecrivez le code HTML du tableau permettant d'obtenir le résultat ci-dessous.

Code à compléter

Une solution possible

Exercice : catalogue Lego Junior

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Catalogue Lego Junior</title>
		<style>
			table { border-collapse: collapse; }
			td, th { border: 1px solid; padding: 4px 10px; }
			td:nth-of-type(3),
			td:nth-of-type(4) { text-align: right; }
			th, tfoot { background: lightgrey; }
			caption { margin: 0.5em 0; font-style: italic; }
		</style>
	</head>
	<body>
		<table>			
			<caption>Catalogue LEGO® Juniors (extrait)</caption>
			<thead>
				<tr>
					<th>Réf.</th>
					<th>Nom</th>
					<th>Prix</th>
					<th>Pièces</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
                    <td></td>
                    <td>6 références</td>
                    <td></td>
                    <td>1263</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>10667</td>
					<td>Boîte de construction du chantier</td>
					<td>17.99 €</td>
					<td>160</td>
				</tr>
				<tr>
					<td>10668</td>
					<td>Boîte de construction du château</td>
					<td>17.99 €</td>
					<td>150</td>
				</tr>
				<tr>
					<td>10673</td>
					<td>Grande boîte du rallye automobile</td>
					<td>29.99 €</td>
					<td>350</td>
				</tr>
				<tr>
					<td>10674</td>
					<td>Grande boîte du centre équestre</td>
					<td>29.99 €</td>
					<td>306</td>
				</tr>
				<tr>
					<td>10659</td>
					<td>La valise de construction garçon</td>
					<td>24.99 €</td>
					<td>146</td>
				</tr>	
				<tr>
					<td>10660</td>
					<td>La valise de construction fille</td>
					<td>24.99 €</td>
					<td>151</td>
				</tr>				
			</tbody>
		</table>
	</body>
</html>

Contenu des cellules

Le contenu d'une cellule peut être bien sûr du texte, mais également n'importe quel autre élément HTML, en particulier des éléments embarqués comme des images.

Exemple : images comme contenu de cellule

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Tableau</title>
		<style>
			table { border-collapse: collapse; }
			td, th { border: 1px solid; padding: 4px 10px; }
			td { text-align: right; }
			th, tfoot { background: lightgrey; }
			caption { margin: 0.5em 0; font-style: italic; }
		</style>
	</head>
	<body>
		<table>
			<caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption>
			<thead>
				<tr>
					<th>Film</th>
					<th><img src="../exemples/images/france.png"></th>
					<th><img src="../exemples/images/belgique.png"></th>
					<th><img src="../exemples/images/suisse.png"></th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th><img src="../exemples/images/logo_sda.png"></th>
					<td>20 815 883</td>
					<td>1 967 235</td>
					<td>2 722 757</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<th>La communauté de l'anneau</th>
					<td>6 822 407</td>
					<td>541 274</td>
					<td>903 015</td>
				</tr>
				<tr>
					<th>Les deux tours</th>
					<td>7 063 746</td>
					<td>664 070</td>
					<td>901 053</td>
				</tr>
				<tr>
					<th>Le retour du roi</th>
					<td>6 930 000</td>
					<td>761 891</td>
					<td>915 689</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Le positionnement de zones de formulaire peut également être facilement réalisée avec un tableau.

Exemple : éléments de formulaire comme contenu de cellule

Catalogue avec images et liens

Ecrivez le code HTML du tableau permettant d'obtenir le résultat ci-contre.

Les noms des boîtes sont des liens qui doivent s'ouvrir dans un nouvel onglet. Les liens pointent respectivement sur :

http://shop.lego.com/fr-FR/Bo%C3%AEte-de-construction-du-chantier-10667
http://shop.lego.com/fr-FR/Bo%C3%AEte-de-construction-du-ch%C3%A2teau-de-la-princesse-10668
http://shop.lego.com/fr-FR/Grande-bo%C3%AEte-du-rallye-automobile-10673
http://shop.lego.com/fr-FR/Grande-bo%C3%AEte-du-centre-%C3%A9questre-10674
http://shop.lego.com/fr-FR/Valise-de-construction-gar%C3%A7on-LEGO-10659
http://shop.lego.com/fr-FR/La-valise-de-construction-fille-10660

Les image se trouvent dans le dossier ../exemples/lego. Leur nom est la référence de la boîte et elles sont au format jpg. Par exemple l'image pour la référence 12345 aura comme nom 12345.jpg.

Code à compléter

Une solution possible

Exercice : catalogue avec images et liens

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Catalogue avec images et liens</title>
		<style>
			table { border-collapse: collapse; }
			td, th { border: 1px solid; padding: 4px 10px; }
			td:nth-of-type(3){ text-align: right; }
			th, tfoot { background: lightgrey; }
			caption { margin: 0.5em 0; font-style: italic; }
		</style>
	</head>
	<body>
		<table>			
			<caption>Catalogue LEGO® Juniors (extrait)</caption>
			<thead>
				<tr>
					<th>Réf.</th>
					<th>Nom</th>
					<th>Prix</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>10667</td>
					<td><a href="http://shop.lego.com/fr-FR/Bo%C3%AEte-de-construction-du-chantier-10667" target="_blank">Boîte de construction du chantier</a></td>
					<td>17.99 €</td>
					<td><img src="../exemples/lego/10667.jpg"></td>
				</tr>
				<tr>
					<td>10668</td>					
					<td><a href="http://shop.lego.com/fr-FR/Bo%C3%AEte-de-construction-du-ch%C3%A2teau-de-la-princesse-10668" target="_blank">Boîte de construction du château</a></td>
					<td>17.99 €</td>
					<td><img src="../exemples/lego/10668.jpg"></td>
				</tr>
				<tr>
					<td>10673</td>
					<td><a href="http://shop.lego.com/fr-FR/Grande-bo%C3%AEte-du-rallye-automobile-10673" target="_blank">Grande boîte du rallye automobile</a></td>
					<td>29.99 €</td>
					<td><img src="../exemples/lego/10673.jpg"></td>
				</tr>
				<tr>
					<td>10674</td>
					<td><a href="http://shop.lego.com/fr-FR/Grande-bo%C3%AEte-du-centre-%C3%A9questre-10674" target="_blank">Grande boîte du centre équestre</a></td>
					<td>29.99 €</td>
					<td><img src="../exemples/lego/10674.jpg"></td>
				</tr>
				<tr>
					<td>10659</td>
					<td><a href="http://shop.lego.com/fr-FR/Valise-de-construction-gar%C3%A7on-LEGO-10659" target="_blank">La valise de construction garçon</a></td>
					<td>24.99 €</td>
					<td><img src="../exemples/lego/10659.jpg"></td>
				</tr>	
				<tr>
					<td>10660</td>
					<td><a href="http://shop.lego.com/fr-FR/La-valise-de-construction-fille-10660" target="_blank">La valise de construction fille</a></td>
					<td>24.99 €</td>
					<td><img src="../exemples/lego/10660.jpg"></td>
				</tr>				
			</tbody>
		</table>		
	</body>
</html>

Fusion de cellules

Fusion horizontale avec colspan

Il est possible de fusionner des cellules horizontales contigües (td ou th) avec l'attribut colspan. La valeur de l'attribut est le nombre de cellules qui sont fusionnées sur la ligne.

Exemple : fusion horizontale avec colspan

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Tableau</title>
		<style>
			table { border-collapse: collapse; }
			td, th { border: 1px solid; padding: 4px 10px; }
			td { text-align: right; }
			td[colspan] {text-align: center;}
			th, tfoot { background: lightgrey; }
			caption { margin: 0.5em 0; font-style: italic; }
		</style>
	</head>
	<body>
		<table>
			<caption>Nombre d'entrées pour les films de la Guerre des Etoiles</caption>
			<thead>
				<tr>
					<th>Epoque</th>
					
					<th colspan="3">Prélogie</th>
					
					<th colspan="3">Trilogie</th>
				</tr>
				<tr>
					<th>Episode</th>
					<th>I</th>
					<th>II</th>
					<th>III</th>
					<th>IV</th>
					<th>V</th>
					<th>VI</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>France</th>
					<td>7 830 052</td>
					<td>5 609 538</td>
					<td>7 230 417</td>
					<td>6 459 530</td>
					<td>4 051 599</td>
					<td>4 243 984</td>
				</tr>
				<tr>
					<th>Monde</th>
					<td>162 827 328</td>
					<td>95 078 587</td>
					<td>92 994 057</td>
					<td>85 187 512</td>
					
					<td colspan="2">112 530 533</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Fusion verticale avec rowspan

La fusion de cellules verticales (td ou th) est possible avec l'attribut rowspan. La valeur de l'attribut est le nombre de cellules qui sont fusionnées dans la colonne.

Exemple : fusion verticale avec rowspan

Fusion lignes et colonnes

Ecrivez le code HTML du tableau permettant d'obtenir le résultat ci-dessous.

Code à compléter

Une solution possible