Balise <th> HTML

Définition et utilisation

<th> La balise <th> définit la cellule d'en-tête d'un tableau HTML.

Il y a deux types de cellules dans un tableau HTML :

  • Cellule d'en-tête - contient des informations de titre (en utilisant <th> création de l'élément)
  • Cellule de données - contient des données (en utilisant <td> création de l'élément)

Par défaut,<th> Le texte dans l'élément est en gras et centré.

Par défaut, le texte dans l'élément <td> est ordinaire et aligné à gauche.

Veuillez également consulter :

Tutoriel HTML :Tableau HTML

Manuel de référence HTML DOM :Objet TableHeader

Tutoriel CSS :Définir le style du formulaire

Exemple

Exemple 1

Un tableau HTML simple contenant trois lignes, deux cellules d'en-tête et quatre cellules de données :

<table>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 2

Comment aligner <th> du contenu (en utilisant CSS) :

<table style="width:100%">
  <tr>
    <th style="text-align:left">Mois</th>
    <th style="text-align:left">Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 3

Comment ajouter une couleur de fond à la cellule d'en-tête du tableau (en utilisant CSS) :

<table>
  <tr>
    <th style="background-color:#FF0000">Mois</th>
    <th style="background-color:#00FF00">Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
 </table>

Essaye-le toi-même

Exemple 4

Comment configurer la hauteur de la cellule d'en-tête de tableau (en utilisant CSS) :

<table>
  <tr>
    <th style="height:100px">Mois</th>
    <th style="height:100px">Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 5

Comment spécifier que les cellules d'en-tête de tableau ne doivent pas sauter de ligne (en utilisant CSS) :

<table>
  <tr>
    <th>Mois</th>
    <th style="white-space:nowrap">Argent pour le nouveau véhicule</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 6

Comment aligner verticalement : <th> du contenu (en utilisant CSS) :

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Mois</th>
    <th style="vertical-align:bottom">Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 7

Comment définir la largeur des cellules d'en-tête de tableau (en utilisant CSS) :

<table style="width:100%">
  <tr>
    <th style="width:70%">Mois</th>
    <th style="width:30%">Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 8

Comment créer un en-tête de tableau :

<table>
  <tr>
    <th>Nom</th>
    <th> Courriel</th>
    <th>Téléphone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 9

Comment créer un tableau avec des en-têtes :

<table>
  <caption>Épargne mensuelle</caption>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essaye-le toi-même

Exemple 10

Comment définir une cellule de tableau qui couvre plusieurs lignes ou colonnes :

<table>
  <tr>
    <th>Nom</th>
    <th> Courriel</th>
    <th colspan="2">Téléphone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Essaye-le toi-même

Attribut

Attribut Valeur Description
abbr Texte Définit une version abrégée du contenu de la cellule de titre.
colspan Numéro Définit le nombre de colonnes que doit couvrir la cellule de titre.
headers header_id Définit une ou plusieurs cellules de titre associées à la cellule.
rowspan Numéro Définit le nombre de lignes que doit couvrir la cellule de titre.
scope
  • col
  • colgroup
  • row
  • rowgroup
 La cellule d'en-tête est-elle une en-tête de colonne, une en-tête de ligne ou une en-tête d'un ensemble de colonnes ou de lignes ?

Attributs globaux

<th> La balise prend également en charge Attributs globaux dans HTML.

Attributs d'événement

<th> La balise prend également en charge Attributs d'événement dans HTML.

Configuration CSS par défaut

La plupart des navigateurs affichent les valeurs suivantes par défaut <th> Élément :

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Compatibilité des navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support