Introduction

Lorsque nous devons afficher des données, il est souvent utile d'employer un tableau, ensemble d'éléments classés dans des lignes (rows en anglais) et des colonnes (columns).

Un tableau se définit donc en spécifiant le nombre de lignes et le nombre de colonnes.

Dans ce chapitre, nous allons aborder les tableaux en HTML. Nous verront d'abord les balises spécifiques aux tables et les attributs d'un tableau. Nous découvrirons également comment décorer un tableau grâce aux feuilles de style.
Grâce à la fusion de cellules, il est possible d'obtenir une mise en forme plus complexe.

Les tableaux en HTML

En HTML, l'implémentation d'un tableau permet de spécifier différentes parties, comme nous le montre l'exemple suivant.

Le titre du tableau décrit l'objet du tableau, il se place au dessus du tableau, mais il peut aussi être placé en légende, en bas ou sur un des cotés.

Les différents éléments sont définis par ligne, les uns à la suite des autres.

Les cellules d'un tableau sont les cases individuelles qui apparaissent dans le tableau et qui contiennent les données à afficher.

Les en-têtes sont des cellules spéciales qui contiennent la description de la colonne ou de la ligne, elles se placent en début de ligne ou en début de colonne.

Les données sont les valeurs présentes dans les cellules du tableau.

Découvrons ensemble les balises qui permettent de dessiner un tableau dans une page web.

Les balises spécifiques aux tables

• Le tableau est déterminé par les balises <table> ... </table>, tous les éléments constituant le tableau doivent se trouver entre ces 2 balises.

• Le tableau est donné ligne par ligne, une ligne est indiquée par les balises <tr> ... </tr>

• A l'intérieur d'une ligne chaque cellule est délimitée par les balises <td> ... </td>. Il est préférable de donner le même nombre d'éléments dans chaque ligne pour obtenir un tableau bien structuré.

  Une cellule peut contenir n'importe quel type de données, du texte, du code HTML (par exemple une autre table), des liens, des images, .. et même rien du tout pour indiquer une cellule vide.

• Les cases d'en-tête sont délimitées par les balises <th> ... </th>. Ces en-têtes sont facultatives, elles peuvent être placées soit en début de ligne, soit en début de colonne, ou même en début de ligne et de colonne.

• Le titre du tableau est donné par les balises <caption> ... </caption>.

• Les balises <thead>, <tbody> et <tfoot> sont de nouvelles balises qui ont pour but de structurer les données présentes dans l'élément table. La balise <thead> est ainsi censée regrouper les informations concernant l'en-tête du tableau comme le titre et le nom des colonnes par exemple. La balise <tbody> est destinée à contenir l'ensemble des données et la balise <tfoot> des remarques ou une légende.

  Le véritable apport vient du fait que pour une table volumineuse un scroll va permettre de visualiser les données inclues dans la balise <tbody> alors que les données présentent dans thead et tfoot resteront toujours visibles. Cependant aucun navigateur ne supporte encore cet effet.

Nous pouvons maintenant placer ces différents éléments dans le code ci-dessous, pour obtenir le tableau donné en introduction au début de la page.

				
<table>
	<caption>Le titre de la table </caption>
	<thead>
		<tr> <!-- 1ère ligne, entête des colonnes-->
			 <th>  </th>
			 <th>Entête de colonne  </th>
			 <th>Une colonne </th>
			 <th>Une autre colonne </th>
		</tr>
	</thead>
	<tbody>
		 <tr> <!-- 2ème ligne-->
			<th>Entête de ligne </th>
			<td>Une cellule dans la ligne</td>
			<td>Une autre cellule</td>
			<td> X</td>
		 </tr>
		 <tr>
			 <th>Une autre ligne <!-- 3ème ligne--> </th>
			 <td> <!-- Une cellule vide--> </td>
			 <td>Y</td>
			 <td>Z</td>
		 </tr>
	</tbody>
</table>

			

Pour la lisibilité du code de la page, il est vivement conseiller d'user et d'abuser de l'indentation (attention l'excès nuit en tout). Cette mise en page du code n'a pas d'influence sur le rendu de la page lors de l'affichage dans un navigateur.

Résumons les principales balises permettant la création de table en HTML:

La déco avec les feuilles de style

La mise en forme d'un tableau, même si elle peut être réalisée grâce aux attributs des balises HTML, bénéficie de la souplesse et de la puissance des feuilles de style (CSS). Une table, une cellule, est considérée comme une boîte au sens CSS et leurs attributs peuvent donc s'appliquer aux tableaux.

Voici quelques propriétés applicables aux tableaux.

La position de la légende peut être spécifiée par la propriété caption-side qui accepte les valeurs

top

légende en haut (valeur pas défaut)

bottom

légende en bas

left

légende à gauche

right

légende à droite

La fusion des bordures des cellules est possible grâce à l'attribut border-collapse qui prend les valeurs collapse ou separate.

La propriété border-spacing spécifie l'écartement entre les cellules (en px).

Voici trois exemples :

1er exemple (même écartement des cellules de 10px de tous les cotés)

<html>
 <head>
 <style type="text/css">
table.one { 
		border-collapse : separate;
		border-spacing : 10px;
}

</style>
 </head>
 <body>
 <table class="one">
	 <tr>
		 <td>Alpha</td>
		 <td>Beta</td>
	 </tr>
	 <tr>
		 <td>Gamma</td>
		 <td>delta</td>
	 </tr>
 </table>
 </body>
 </html>
				
			

Affichage :

2ème exemple (écartement différent en vertical 30px et en horizontal 10px)

<html>
 <head>
 <style type="text/css">
table.two {
		border-collapse: separate;
		border-spacing: 10px 30px;
}
</style>
 </head>
 <body>
 <table class="two">
	 <tr>
		 <td>Rouge</td>
		 <td>Orange</td>
	 </tr>
	 <tr>
		 <td>Vert</td>
		 <td>Jaune</td>
	 </tr>
 </table>
 </body>
 </html>
				
			

Affichage :

3ème exemple (pas d'écartement border-collapse: collapse)

				
<html>
 <head>
 <style type="text/css">
table.three {
		border-collapse: collapse;
}
</style>
 </head>
 <body>
 <table class="three">
	 <tr>
		 <td>Rouge</td>
		 <td>Orange</td>
	 </tr>
	 <tr>
		 <td>Vert</td>
		 <td>Jaune</td>
	 </tr>
 </table>
 </body>
 </html>
				
			

Affichage :

Les cellules peuvent s'apparenter au modèle de boîte que vous avez déjà rencontré lors de l'introduction des CSS. Mais la gestion des marges est cependant toute différente. Elle se réalise au niveau de la table (!! il n'est pas possible de traiter séparément chaque cellule).

La mise en forme plus complexe d'un tableau

HTML permet de fusionner des cellules pour une organisation plus souple des données.

L'attribut rowspan (colspan) des balises <td> ou <th> permet de spécifier le nombre lignes (colonnes) que l'on désire fusionner.

Ce premier exemple montre la fusion de 2 cellules dans une même ligne

En HTML :

				
<table >
	<tbody>
		<tr >
			<th>Figure</th>
			<th colspan = "2">dimension(s)</th>
		</tr>
		<tr>
			<td>rectangle</td>
			<td>6</td>
			<td >4</td>
		</tr>
		<tr>
			<td>carré</td>
			<td colspan = "2">2</td>			
		</tr>
	</tbody>
</table>



			

Cet autre exemple fusionne des cellules dans la colonne

En HTML :

<table>
	<tbody>
		<tr >
			<th></th><th></th>
			<th>Rectangle</th>
			<th>Carré</th>
		</tr>
		<tr>
			<th rowspan = "2">dimension</th>
			<td>Longueur</td>
			<td>10</td>
			<td rowspan = "2">6</td>
		</tr>
		<tr>
			<td>largeur</td>
			<td>5</td>
		</tr>
	</tbody>
</table>