Leçon 10 : Les tables

Les tables servent pour l'affichage de « données tabulaires », c'est-à-dire des informations présentées logiquement en rangées et en colonnes.

Est-ce difficile ?

Dresser des tables en HTML peut sembler compliqué au premier abord mais en restant calme et en regardant où on met les pieds, c'est en réalité strictement une affaire de logique, comme toute chose en HTML.

Exemple 1 :

	
	<table>
	  <tr>
		<td>Cellule 1</td>
		<td>Cellule 2</td>
	  </tr>
	  <tr>
		<td>Cellule 3</td>
		<td>Cellule 4</td>
	  </tr>
	</table>
	
	

Ce qui donne dans le navigateur :

Quelle est la différence entre <tr> et <td> ?

Comme vous pouvez le voir dans l'exemple précédent, il s'agit probablement de l'exemple HTML le plus compliqué fourni jusqu'ici. Décomposons-le et expliquons les différentes balises :

On utilise 3 éléments différents pour insérer des tables :

• La balise ouvrante <table> et la balise fermante </table> marquent le début et la fin de la table. Logique.
• La balise <tr> tient pour « table row » (N.d.T. rangée de table), et commence et termine les rangées dans le sens horizontal. Encore logique.
• La balise <td> est l'abréviation de « table data » (N.d.T. données de table). Elle marque le début et la fin de chaque cellule dans les rangées de la table. Tout simple et logique.

Voici l'explication de l'exemple 1 : la table commence avec la balise <table>, suivie d'une balise <tr> indiquant le début d'une nouvelle rangée. Dans cette rangée, deux cellules sont insérées : <td>Cellule 1</td> et <td>Cellule 2</td>. La rangée se termine par une balise</tr>, et une nouvelle rangée <tr> commence juste après. Cette nouvelle rangée contient également deux cellules. La table se termine par une balise </table>.

Pour que les choses soient claires, les rangées sont des lignes horizontales de cellules et les colonnes des lignes verticales de cellules :

Cellule 1 et Cellule 2 forment une rangée, Cellule 1 et Cellule 3 une colonne.

Dans l'exemple précédent, la table a deux rangées et deux colonnes. Toutefois, une table peut avoir un nombre illimité de rangées et colonnes.

Exemple 2 :

	
	<table>
	  <tr>
		<td>Cellule 1</td>
		<td>Cellule 2</td>
		<td>Cellule 3</td>
		<td>Cellule 4</td>
	  </tr>
	  <tr>
		<td>Cellule 5</td>
		<td>Cellule 6</td>
		<td>Cellule 7</td>
		<td>Cellule 8</td>
	  </tr>
	  <tr>
		<td>Cellule 9</td>
		<td>Cellule 10</td>
		<td>Cellule 11</td>
		<td>Cellule 12</td>
	  </tr>
	</table>
	
	

Dans le navigateur, cela donne :

Y a t-il des attributs ?

Bien sûr qu'il y en a. Par exemple, l'attribut border sert à indiquer l'épaisseur de la bordure autour de la table :

Exemple 3 :

	
	<table border="1">
	  <tr>
		<td>Cellule 1</td>
		<td>Cellule 2</td>
	  </tr>
	  <tr>
		<td>Cellule 3</td>
		<td>Cellule 4</td>
	  </tr>
	</table>
	
	

Ce qui donne dans le navigateur :

L'épaisseur de la bordure s'exprime en pixels (cf. leçon 9).

Comme pour les images, on peut également fixer la largeur d'une table en pixels, ou autrement en pourcentage de l'écran :

Exemple 4 :

	
	<table border="1" width="30%">
	
	

Cet exemple affichera une table dont la largeur est 30 % celle de l'écran dans le navigateur. Essayez par vous-même.

Plus d'attributs ?

Il y a des tas d'attributs pour les tables. En voici deux :

• align : indique l'alignement horizontal du contenu dans toute la table, dans une rangée ou dans une seule cellule. Par exemple, les valeurs "left" (à gauche), "center" (au centre) ou "right" (à droite).
• valign : indique l'alignement vertical du contenu dans une cellule. Par exemple, les valeurs "top" (en haut), "middle" (au milieu) ou "bottom" (en bas).

Exemple 5 :

	
	<td align="right" valign="top">Cellule 1</td>
	
	

Que puis-je insérer dans mes tables ?

En théorie, on peut insérer n'importe quoi dans les tables : du texte, des liens et des images ... TOUJOURS EST-IL que les tables sont faites pour présenter des données tabulaires (c'est-à-dire, des données dont la présentation en rangées et en colonnes revêt un sens), donc abstenez-vous d'y placer des choses simplement au motif que vous voulez les mettre l'une à côté de l'autre.

Aux premiers temps d'Internet, c'est-à-dire quelques années en arrière, les tables servaient souvent pour la mise en page. Mais si vous voulez contrôler la présentation du texte et des images, il existe une solution beaucoup plus fûtée pour y parvenir (indice : CSS). Plus à ce sujet tout à l'heure.

Maintenant, mettez en pratique ce que vous venez d'apprendre et créez plusieurs tables de dimensions différentes, avec des attributs et du contenu différents. Ça devrait vous occuper pour quelques heures.