Balise HTML <th>
La balise <th> spécifie une cellule d'en-tête dans un tableau HTML. Elle doit être utilisée comme élément enfant de <tr>, qui, à son tour, est placé à l'intérieur de la balise <table>. Pour définir une cellule de données standard, la balise <td> est utilisée.
La balise <th> peut contenir du texte, des images, des formulaires, des liens ou tout autre élément HTML pouvant être utilisé dans le corps d'un document HTML. La taille du tableau est automatiquement ajustée en fonction de la taille de son contenu.
Dans les tableaux HTML, les données sont disposées verticalement en colonnes. Si vous souhaitez afficher la première ligne du tableau comme étiquettes ou titres, vous devez utiliser des éléments <th> au lieu des éléments <td> pour cette ligne. Par défaut, le contenu de la balise <th> est en gras et centré. Pour modifier son apparence, vous pouvez utiliser des styles CSS. Les en-têtes de tableau peuvent également être facilement stylisés indépendamment du reste du contenu du tableau.
Notez que toutes les lignes d'un tableau doivent avoir le même nombre de cellules. Si une ligne possède moins de cellules, le navigateur rend implicitement les cellules manquantes. Ces cellules implicites héritent des styles de bordure du tableau. Si vous devez indiquer que d'autres cellules ne contiennent aucune donnée, créez des cellules vides si nécessaire. Si des cellules implicites apparaissent consécutivement, elles peuvent être rendues comme une seule cellule fusionnée.
Syntaxe
La balise <th> s'utilise par paires. Le contenu est écrit entre les balises d'ouverture (<th>) et de fermeture (<​/th>).
Balise HTML <th>
<table>
<tr>
<th>...</th>
</tr>
</table>Exemple de la balise HTML <th> :
Mois et Date — Exemple de la balise HTML <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Résultat
Dans cet exemple, nos en-têtes sont « Mois » et « Date », que nous définissons à l'aide des balises <th>. Nous plaçons les deux balises à l'intérieur d'un élément <tr>.
L'attribut colspan est généralement utilisé avec la balise <th> pour permettre au contenu de s'étendre sur plusieurs colonnes. Voyons cela en action.
Exemple de la balise HTML <th> avec l'attribut colspan :
Exemple avec un attribut colspan — Balise HTML <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>Jun</td>
<td>18.07.2014</td>
</tr>
</table>
</body>
</html>Dans cet exemple, la valeur de l'attribut colspan est « 2 ». Cela signifie qu'une cellule d'en-tête doit s'étendre sur deux colonnes.
Attributs
Remarque : Les attributs tels que align, bgcolor, valign, width, height, et d'autres sont dépréciés en HTML5. Utilisez CSS pour le style à la place.
| Attribut | Valeur | Description |
|---|---|---|
| abbr | text | Définit une version abrégée du contenu d'une cellule d'en-tête, ou un texte alternatif. Certains agents utilisateur, comme les lecteurs d'écran, peuvent afficher cette description avant le contenu lui-même. |
| align | left right center | Aligne le contenu d'une cellule d'en-tête. Non pris en charge en HTML 5. |
| axis | category_name | Catégorise les cellules ayant un contenu similaire. Non pris en charge en HTML 5. |
| background | background | Définit l'arrière-plan d'une cellule. Non pris en charge en HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Définit la couleur d'arrière-plan d'une cellule. Non pris en charge en HTML 5. |
| bordercolor | bordercolor | Définit la couleur d'une bordure. Non pris en charge en HTML 5. |
| char | character | Aligne le contenu d'une cellule d'en-tête sur un caractère. Il est utilisé uniquement si l'attribut est align="char". Non pris en charge en HTML 5. |
| charoff | number | Définit le nombre de caractères dont le contenu sera aligné par rapport au caractère spécifié par l'attribut char. Utilisé uniquement si l'attribut align="char". Non pris en charge en HTML 5. |
| colspan | number | Définit le nombre de colonnes qu'une cellule doit couvrir. La valeur de l'attribut doit être un entier positif. La valeur par défaut est 1. |
| headers | header_id | Spécifie une liste séparée par des espaces de cellules d'en-tête contenant des informations sur cette cellule. La valeur doit correspondre à l'id de la cellule d'en-tête (défini à l'aide de l'attribut id). |
| height | % pixels | Définit la hauteur d'une cellule. Non pris en charge en HTML 5. |
| nowrap | nowrap | Spécifie que le contenu à l'intérieur d'une cellule ne doit pas revenir à la ligne. Non pris en charge en HTML 5. |
| rowspan | number | Spécifie le nombre de lignes qu'une cellule doit couvrir. La valeur de l'attribut doit être un entier positif. La valeur par défaut est 1. Il n'est pas recommandé d'utiliser des valeurs supérieures à 65534, car elles seront réduites à 65534. |
| scope | col colgroup row rowgroup auto | Définit les cellules auxquelles l'élément d'en-tête (défini dans <th>) se rapporte. Essentiel pour l'accessibilité des tableaux. |
| sorted | reversed number reversed number number reversed | Définit le sens de tri d'une colonne. Non pris en charge en HTML 5. |
| valign | top middle bottom baseline | Spécifie l'alignement vertical du contenu à l'intérieur d'une cellule. Non pris en charge en HTML 5. |
| width | % pixels | Définit la largeur d'une cellule. Non pris en charge en HTML 5. |
La balise <th> prend également en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <th>
th {
background-color: #f2f2f2;
color: #333;
padding: 8px;
border: 1px solid #ccc;
}Pratique
Quel est l'objectif de la balise HTML <th> ?