Chargement...

HTML, les tableaux


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 1Cellule 2 de la ligne 1
Cellule 1 de la ligne 2Cellule 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 1Entête 2
Cellule 1 de la ligne 2Cellule 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 1Cellule 2 de la ligne 1
FUSION de celulle
Cellule 1 de la ligne 3Cellule 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 1Cellule 2 de la ligne 1
FUSION celluleCellule 2 de la ligne 2
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 1Cellule 2 de la ligne 1
Cellule 1 de la ligne 2Cellule 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 1Cellule 2 de la ligne 1
Cellule 1 de la ligne 2Cellule 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.
Col1 Col2
c1 c2
c3 c4



UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW