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 :

Cellule 1 Cellule 2
Cellule 3 Cellule 4

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 :

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 Cellule 2
Cellule 3 Cellule 4

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 :

Cellule 1 Cellule 2 Cellule 3 Cellule 4
Cellule 5 Cellule 6 Cellule 7 Cellule 8
Cellule 9 Cellule 10 Cellule 11 Cellule 12

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 :

Cellule 1 Cellule 2
Cellule 3 Cellule 4

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 :

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.


 
Affichages : 4919