HTML - Tableaux

  »   HTML  »   Tutoriel HTML - Tableaux, les créer et les utiliser

Les tableaux peut être difficiles au début, mais avec un peu de patience et de pratique vous verrez que les choses ne sont pas toujours comme elles paraissent. La balise <table> est utilisée pour ouvrir un tableau. A l'intérieur de cette balise vous trouverez deux autres balises typiques, <tr> (les lignes du tableau) et <td> (les colonnes du tableau). Mais la meilleure explication est toujours un exemple:

html<table border="1">
	<tr>
		<td>Rangée 1 Cellule 1</td>
		<td>Rangée 1 Cellule 2</td>
	</tr>
	<tr>
		<td>Rangée 2 Cellule 1</td>
		<td>Rangée 2 Cellule 2</td>
	</tr>
</table>

Demo

Rangée 1 Cellule 1Rangée 1 Cellule 2
Rangée 2 Cellule 1Rangée 2 Cellule 2

Le contenu sera placé a l'intérieur des rangées du tableau. Une rangée représente ce qu'il y a entre <td> et </td>. L'attribut border établit la longueur du coin de la table.

HTML - Tableaux asymétriques

Pour créer des tableaux asymétriques nous utiliserons 'rowspan' pour croiser plus qu'une ligne et 'colspan' pour croiser plus d'une colonne. Aussi, si nous voulons que la première ligne serve comme ligne de titres pour toutes les colonnes nous utiliserons la balise <th>. Celles-ci seront écrites en caractères gras comme nous pouvons voir dans l'exemple suivant:

html<table border="1"> 
	<tr>
		<th>Colonne 1</th> 
		<th>Colonne 2</th>
		<th>Colonne 3</th>
	</tr>
	<tr>
		<td rowspan="2">Rangée 1 Cellule 1</td> 
		<td>Rangée 1 Cellule 2</td>
		<td>Rangée 1 Cellule 3</td>
	</tr>
	<tr>
		<td>Rangée 2 Cellule 2</td>
		<td>Rangée 2 Cellule 3</td>
	</tr> 
	<tr>
		<td colspan="3">Rangée 3 Cellule 1</td>
	</tr>
</table>

Demo

Colonne 1Colonne 2Colonne 3
Rangée 1 Cellule 1Rangée 1 Cellule 2Rangée 1 Cellule 3
Rangée 2 Cellule 2Rangée 2 Cellule 3
Rangée 3 Cellule 1

HTML - Espacer les cellules

Avec l'aide des attributs 'cellpadding' et 'cellspacing' nous établirons la distance entre les cellules. 'Cellspacing' établit la taille du coin, et 'cellpadding' la distance entre le coin et le contenu. Dans l'exemple suivant un peu de couleur a également été ajouté.

html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> 
	<tr> 
		<th>Colonne 1</th>
		<th>Colonne 2</th> 
	</tr> 
	<tr>
		<td>Rangée 1 Cellule 1</td>
		<td>Rangée 1 Cellule 2</td>
	</tr>
	<tr>
		<td>Rangée 2 Cellule 1</td>
		<td>Rangée 2 Cellule 2</td>
	</tr> 
</table>

Pour accentuer la différence vous pouvez effacer le coin de l'exemple précédent.

La distance entre les cellules et la taille du coin sera interprétée en pixels par la navigateur. En utilisant cette 'regle' une value de 10 signifie 10 pixels. Cet attribut n'est pas le seul qui utilise comme unitée de mesure le pixels, mais nous apprendrons les autres lorsque nous progresserons à travers les prochains tutoriels.