HTML En-têtes de tableau

Les tableaux HTML peuvent avoir des en-têtes pour chaque colonne ou ligne, ou pour plusieurs colonnes et lignes.

EMIL TOBIAS LINUS
8:00
9:00
10:00
11:00
12:00
13:00
LUN MAR MER JEU VEN
8:00
9:00
10:00
11:00
12:00
DÉCEMBRE

En-têtes de tableau HTML

Les en-têtes de tableau sont définis avec des éléments th . Chaque élément th représente une cellule de tableau.

Exemple

<table>
<tr>
<th>Prénom</th>
<th>Nom de famille</th>
<th>Âge</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Essayez-le vous-même »

En-têtes de tableau verticaux

Pour utiliser la première colonne comme en-têtes de tableau, définissez la première cellule de chaque ligne comme un élément <th> :

Exemple

<table>
<tr>
<th>Prénom</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Nom de famille</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Âge</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Essayez-le vous-même »

Aligner les en-têtes de tableau

Par défaut, les en-têtes de tableau sont en gras et centrés :

Prénom Nom de famille Âge
Jill Smith 50
Eve Jackson 94

Pour aligner à gauche les en-têtes de tableau, utilisez la propriété CSS text-align :

Exemple

th {
text-align: left;
}
Essayez-le vous-même »

En-tête pour plusieurs colonnes

Vous pouvez avoir un en-tête qui s'étend sur deux colonnes ou plus.

Nom Âge
Jill Smith 50
Eve Jackson 94

Pour ce faire, utilisez l'attribut colspan sur l'élément <th> :

Exemple

<table>
<tr>
<th colspan="2">Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Essayez-le vous-même »

Vous en apprendrez davantage sur colspan et rowspan dans le chapitre Table colspan & rowspan .

Légende de tableau

Vous pouvez ajouter une légende qui sert de titre pour l'ensemble du tableau.

Économies mensuelles
Mois Économies
Janvier 100 $
Février 50 $

Pour ajouter une légende à un tableau, utilisez la balise <caption> :

Exemple

<table style="width:100%">
<caption>Économies mensuelles</caption>
<tr>
<th>Mois</th>
<th>Économies</th>
</tr>
<tr>
<td>Janvier</td>
<td>100 $</td>
</tr>
<tr>
<td>Février</td>
<td>50 $</td>
</tr>
</table>
Essayez-le vous-même »

Remarque : La balise <caption> doit être insérée immédiatement après la balise <table> .