w3docs logo

Tag HTML <th>

Le tag HTML <th> est utilisé pour créer la cellule d'en-tête dans la table HTML. Il est placé dans le tag apparié <tr>, qui, à son tour, se trouve dans le tag <table>.

Le tag <th> peut contenir des images, un texte, des formes, des liens et d’autres éléments HTML, qu’on peut placer dans le corps du document. La taille de la table est automatiquement ajustée en fonction de son contenu.

Le contenu du tag <th> affiche en gras par défaut et s’aligne au centre. Pour modifier l’apparence externe du contenu, on peut utiliser les styles CSS.

Notez que toutes les lignes de la table contiennent le même nombre de cellules, ce qui correspond au nombre de cellules de la plus longue ligne. S'il y a moins de cellules dans une ligne que dans les autres lignes, le navigateur remplit automatiquement la ligne en plaçant des cellules vides à la fin de la même ligne.

Si vous devez souligner qu'il n'y a pas de données dans d'autres cellules, créez une cellule sans contenu à l'emplacement requis.

Les cellules ajoutées par le navigateur n'ont pas de cadres et, si elles se suivent, elles seront affichées sous la forme d'une cellule fusionnée.

Syntaxe

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</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;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Mois</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>Juin</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Date

Dans cet exemple, nos en-têtes sont "Mois" et "Jour". Pour chaque en-tête, nous avons utilisé un tag <th> distincte. Nous mettons les deux tags dans l'élément <tr>.

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;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th colspan="2">Mois et Date</th>
      </tr>
      <tr>
        <td>Juin</td>
        <td>18.07.2014</td>
      </tr>
    </table>
  </body>
</html>

Résultat

th

Dans cet exemple, la valeur de colspan attribut est “2”. Cela signifie que la cellule d'en-tête devrait s'étendre sur deux colonnes.

Attributs

Attribut Valeur Description
abbr text Définit une version abrégée du contenu dans une cellule d’en-tête ou un texte alternatif. (Certains agents utilisateurs, tels que les lecteurs de parole, peuvent présenter cette description avant le contenu lui-même)
Non supporté en HTML 5.
align left
right
center		 Aligne le contenu dans une cellule d'en-tête.
Non supporté en HTML 5.
axis category_name Catégorise les cellules ayant un contenu similaire.
Non supporté en HTML 5.
background background Définit le fond dans une cellule.
Non supporté en HTML 5.
bgcolor rgb(x,x,x)
#xxxxxx
colorname 		Définit la couleur de fond d'une cellule.
Non supporté en HTML 5.
bordercolor bordercolor Définit la couleur de la bordure.
Non supporté en HTML 5.
char character Aligne le contenu d'une cellule d'en-tête sur un caractère. N'est utilisé que si attribut align = "char".
Non supporté en HTML 5.
charoff number Définit le nombre de caractères d’alignement du contenu à partir du caractère spécifié par l’attribut char . Utilisé si l'attribut align = "char"
Non supporté 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 de cellules d'en-tête séparées par des espaces contenant des informations sur cette cellule. La valeur doit correspondre à l'id de la cellule d'en-tête (définie à l'aide de l'attribut id ).
height %
pixels		 Définit la hauteur d'une cellule.
Non supporté en HTML 5.
nowrap nowrap Spécifie que le contenu dans une cellule ne doit pas être renvoyé à la ligne.
Non supporté 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 l'élément <th>) se rapporte. .
Non supporté en HTML 5.
sorted reversed
number
reversed number
number reversed		 Définit le sens du tri d'une colonne.
Non supporté en HTML 5.
valign top
middle
bottom
baseline 		Spécifie l'alignement vertical du contenu à l'intérieur d'une cellule.
Not supported in HTML 5.
width %
pixels		 Définit la largeur d'une cellule.
Non supporté en HTML 5.

Le tag <th> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <th> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <th>:

Coloration du texte dans le tag HTML <th>:

Styles de mise en page du texte pour la tag HTML <th>:

Autres propriétés utiles pour le tag HTML <th>:

Support de Navigateurs

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Pratiquez vos connaissances

Quelles statements sont vraies sur la balise HTML <th>?
Trouvez-vous cela utile?