Tag HTML <caption>
Le tag <caption> spécifie le titre de la table. Le tag <caption> est placée dans l'élément <table> immédiatement après le tag <table> ouvrant.
Syntaxe
Le tag <caption> est apparié, le contenu est écrit entre le tag ouvrant (<caption>) et le tag fermant (</caption>).
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table width="400" border="1">
<caption>Papier d'évaluation</caption>
<thead>
<tr>
<th>Etudiant</th>
<th>1ere exam</th>
<th>2eme exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>
Résultat
Etudiant | 1ere exam | 2eme exam |
---|---|---|
John Johnson | 75 | 65 |
Mary Nicolson | 55 | 80 |
Max Thomson | 60 | 47 |
Attributs
Attribut | Valeur | Description |
---|---|---|
align | Aligne le titre horizontalement.
Non utilisé en HTML5. |
|
right | - L'en-tête est placé en haut et aligné à droite. | |
left | -L’en-tête est placé en haut et aligné à gauche. | |
top | -L’en-tête est placé en haut et aligné à centre. | |
bottom | -L’en-tête est place en bas et aligné à centre. |
Le tag <caption> supporte les Attributs globaux et les Attributs d'événements.
Comment styler le tag HTML <caption> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <caption>:
- 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 <caption>:
- 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 <caption>:
- 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 <caption>:
- 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
Quelle est la fonction de la balise HTML <caption> ?
Correcte!
Incorrecte!