HTML, les tableaux

Les attributs Les listes

Aujourd'hui les tableaux HTML ne sont utilisés que pour des tableaux de données. Il est plutôt conseillé de faire la mise en page en CSS. Plus souple, plus précis, plus facile et surtout plus évolutif, misez tout ce qui est visuel sur le CSS. Un tableau HTML ne doit servir que de base d'un tableau.

Créer un tableau avec la balise <table>

	<table>
	<tr>
	<td>Cellule 1 de la ligne 1</td>
	<td>Cellule 2 de la ligne 2</td>
	</tr>
	<tr>
	<td>Cellule 1 de la ligne 2</td>
	<td>Cellule 2 de la ligne 2</td>
	</tr>
	</table>

Résultat:

Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Les entêtes

	<table>
	<tr>
	<th>Entete 1</th>
	<th>Entete 2</th>
	</tr>
	<tr>
	<td>Cellule 1 de la ligne 2</td>
	<td>Cellule 2 de la ligne 2</td>
	</tr>
	</table>

En tête 1	Entête 2
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Colspan, fusionner des cellules horizontalement

Vous pouvez fusionner des cellules horizontalement avec l'attribut colspan.

	<table>
	<tr>
	<td>Cellule 1 de la ligne 1</td>
	<td>Cellule 2 de la ligne 1</td>
	</tr>
	<tr>
	<td colspan="2">
	FUSION de celulle
	</td>
	</tr>
	<tr>
	<td>Cellule 1 de la ligne 3</td>
	<td>Cellule 2 de la ligne 3</td>
	</tr>
	</table>

Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
FUSION de celulle
Cellule 1 de la ligne 3	Cellule 2 de la ligne 3

Rowspan, fusionner des cellules verticalement

	<table>
	<tr>
	<td>Cellule 1 de la ligne 1</td>
	<td>Cellule 2 de la ligne 1</td>
	</tr>
	<tr>
	<td rowspan="2">
	FUSION cellule
	</td>
	<td>Cellule 2 de la ligne 2</td>
	</tr>
	<tr>
	<td>Cellule 2 de la ligne 3</td>
	</tr>
	</table>

Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
FUSION cellule	Cellule 2 de la ligne 2
FUSION cellule	Cellule 2 de la ligne 3

Légende en haut des tableaux HTML

	<table>
	<caption>Legende en haut</caption>
	<tr>
	<td>Cellule 1 de la ligne 1</td>
	<td>Cellule 2 de la ligne 1</td>
	</tr>
	<tr>
	<td>Cellule 1 de la ligne 2</td>
	<td>Cellule 2 de la ligne 2</td>
	</tr>
	</table>

Légende en haut
Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Légende en bas des tableaux HTML

	<table>
	<caption align="bottom">Legende en bas</caption>
	<tr>
	<td>Cellule 1 de la ligne 1</td>
	<td>Cellule 2 de la ligne 1</td>
	</tr>
	<tr>
	<td>Cellule 1 de la ligne 2</td>
	<td>Cellule 2 de la ligne 2</td>
	</tr>
	</table>

Légende en bas
Cellule 1 de la ligne 1	Cellule 2 de la ligne 1
Cellule 1 de la ligne 2	Cellule 2 de la ligne 2

Mise en forme du tableau HTML

Il est possible de faire de la mise en forme en HTML pour les tableaux, mais je vous conseille plutot de le faire en CSS. Vous pouvez donc définir la taille d'une cellule ou la taille de la bordure. Cette information est purement informative, ne l'utilisez pas.

	<table border="10">
	<tr>
	<td width="10">10px</td>
	<td>Cellule 2 de la ligne 1</td>
	</tr>
	<tr>
	<td height="200">200px</td>
	<td>Cellule 2 de la ligne 2</td>
	</tr>
	</table>

10px	Cellule 2 de la ligne 1
200px	Cellule 2 de la ligne 2

Les balises <thead>, <tbody> et <tfoot>

Si on voulait faire les choses proprement un tableau devrait se contruire comme ceci:

	<table>
	<thead>
	<tr>
	<th>Col1</th>
	<th>Col2</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>c1</td>
	<td>c2</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<th>c3</th>
	<th>c4</th>
	</tr>
	</tfoot>
	</table>

Ce qui ne changerait pas grand chose visuellement mais le code est plus précis, on sait maintenant quelle partie du tableau est l'entête, le corps et le bas de tableau. Alors concrètement à quoi sert tout cela ? Essentiellement à styliser un tableau de données. On va créer un tableau avec un entête de couleur rouge en haut en vert en bas. Il sera plus aisé de définir ce genre de style par la suite en CSS.