Tag HTML <thead>
Le tag HTML <thead> est utilisé avec les éléments <tbody> et <tfoot> pour séparer le contenu de la table en blocs logiques - en-tête, corps et pied de page, respectivement.
Dans une table, l'utilisation d'un tag <thead> est autorisée. Dans le code, il doit être situé immédiatement après le tag <table> s'il y a des éléments <caption> et <colgroup> après eux, mais avant les éléments <tbody>, <tfoot> et <tr>.
L’élément <thead> doit contenir au moins un élément <tr>.
Par défaut, les éléments <thead>, <tbody> et <tfoot> n’affectent pas l’apparence externe de la table, mais il peut être personnalisé en utilisant des styles CSS.
Syntaxe
<table>
<thead>
<tr>
<td> ... </td>
</tr>
</thead>
<tfoot> ... </tfoot>
<tbody> ... </tbody>
</table>
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%; margin:30px auto; border-collapse:collapse;">
<thead style="background-color:#1c87c9; color:#fff;">
<tr>
<th>Mois</th>
<th>Des économies</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Janvier</td>
<td>500</td>
</tr>
<tr>
<td>Février</td>
<td>1000</td>
</tr>
</tbody>
</table>
</body>
</html>
Résultat
Attributs
Attribut | Valeur | Description |
---|---|---|
align |
right
left center justify char |
Aligne le contenu de l’élément <thead>. Non supporté en HTML5. |
bgcolor | bgcolor | Définit la couleur d'arrière-plan des cellules d'un élément <thead>. Non supporté en HTML5. |
char | character | Aligne le contenu de la cellule avec le caractère spécifié.
Utilisé uniquement si l'attribut align = "char".
Non supporté en HTML5. |
charoff | number | L’attribut vous permet d'aligner dans la cellule de données le symbole spécifié dans l’attribut à droite ou à gauche.
Utilisé uniquement si l'attribut align = "char". Non supporté en HTML5. |
valign |
top
bottom middle baseline |
Spécifie l'alignement vertical du contenu de l'élément. Non supporté en HTML5. |
Le tag <thead> supporte également les Attributs globaux et les Attributs d'événements.
Comment styler le tag HTML <thead> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <thead>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <thead>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <thead>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <thead>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
Quel est le rôle de la balise HTML 'thead'?
Correcte!
Incorrecte!