HTML th: the tag for table headers

Qu’est-ce que le tag HTML

?

La balise (ou tag) HTML

(Table Header) est utilisée pour définir des cellules d’en-tête dans les tableaux HTML. Les cellules ainsi formatées servent d’en-têtes pour les colonnes ou lignes concernées du tableau et sont généralement en gras et centrées. Si nécessaire, l’affichage peut être adapté selon les souhaits via CSS. Les en-têtes de tableau HTML doivent être utilisés à l’intérieur d’une balise

(Table Row), la position dans le tableau ne jouant en principe aucun rôle. En règle générale, l’élément est surtout utilisé dans l’en-tête ou la première colonne d’un tableau pour une meilleure lisibilité du code HTML.

Hébergement Web

Hébergement Web de pointe au meilleur prix

• 3x plus rapide, 60 % d'économie
• Haute disponibilité >99,99 %
• Seulement chez IONOS : jusqu'à 500 Go inclus

Voir l'offre

Les en-têtes de tableau HTML vous aident à structurer vos tableaux et à en décrire le contenu. Leur utilisation est utile et recommandée pour différentes raisons :

• Organisation des données : les en-têtes avec le tag HTML aident à présenter les données dans le tableau de manière claire et organisée. Ils donnent aux colonnes ou aux lignes un nom descriptif qui explique le type de données auxquelles on peut s’attendre.

• Amélioration de la lisibilité : HTML permet aux utilisateurs de comprendre plus facilement les données énumérées. Les en-têtes visuellement mis en évidence séparent clairement les différentes catégories ou groupes de données, ce qui facilite la recherche d’informations spécifiques.

• Accessibilité : les en-têtes de tableau sont particulièrement importants pour l’accessibilité. Les lecteurs d’écran utilisent les éléments pour expliquer la structure et le contexte du tableau. Grâce à des attributs supplémentaires tels que scope Or headersyou can make it even clearer which data belongs to which header.

  Advice

  Headers are just one of many ways to format tables in HTML. In our separate article on formatting a table in HTML, we discuss in detail the options you have for visually adapting texts and fields.

  HTML tag syntax

  avec un exemple

  Pour définir un titre de tableau avec la balise HTML

  , il suffit d’une balise d’ouverture

  et d’une balise de fermeture

  . The desired text for the header is inside these two tags. Optionally, you can add attributes to the intro tag to control the behavior and display of the element

  . La syntaxe de base (ici avec des caractères de remplacement pour les attributs) se présente donc comme suit :

  Les attributs les plus importants pour les en-têtes de tableaux HTML sont les suivants :

  • scope : indicates if the header refers to a column (col) or one line (row).
  • colspan : defines the number of columns to which the header cell applies.
  • rowspan : defines the number of lines to which the header cell applies.
  • class : indicates the names of CSS classes that can be used to define the style.
  • style : for inline CSS allowing you to customize the header cell.

  Finally, we illustrate the syntax of HTML

  par un exemple simple. Dans le tableau sont présentés les catégories et les prix pour les trois produits : « Pomme », « Pain » et « Jus ». L’en-tête et la première colonne sont définis en tant qu’en-tête. L’attribut scope allows you to define for each header cell whether it titles a row or a column.

  
  
  
      
      
  
  
  
      
  Liste des produits et leurs catégories
      
  
          
  Produit
          
  Catégorie
          
  Prix
      
      
  
          
  Pomme
          
  Fruit
          
  1,50 €
      
      
  
          
  Pain
          
  Boulangerie
          
  2,00 €
      
      
  
          
  Jus
          
  Boissons
          
  1,00 €
      
  
  
  

  html

  Here's a preview of how the table looks on a website:

  

  

  Close

  Combination with tag

  You can also give an HTML table a header that precedes the entire table. To do this, simply insert an element

  (with an opening and closing tag) after launching the table with

  . Vous déterminez la présentation et le positionnement de cet en-tête à l’aide de CSS. Vous pouvez ainsi placer le texte sous un tableau, par exemple.

  Si nous ajoutons à notre exemple de la section précédente un titre

  

  Close

  Was this article helpful to you?

  vote upvote down

  If not, why?

  • Obsolete
  • Incorrect
  • Incomprehensible

  Go to main menu

  “Example table for products and prices”, the corresponding code looks like this:

      
    



    
Exemple de tableau pour les produits et les prix
    

        
Produit
        
Catégorie
        
Prix
    
    

        
Pomme
        
Fruit
        
1,50 €
    
    

        
Pain
        
Boulangerie
        
2,00 €
    
    

        
Jus
        
Boissons
        
1,00 €
    

  html

  On the website we now see the new caption for our example table:

  the example table is preceded by the desired header (without CSS instructions).

  the example table is preceded by the desired header (without CSS instructions).