En-tête de tableau HTML

Introduction

En HTML, les tableaux sont utilisés pour afficher des données en lignes et en colonnes. La balise <thead> est utilisée pour définir la ligne d'en-tête d'un tableau. La ligne d'en-tête est généralement utilisée pour étiqueter le contenu dans les colonnes suivantes et contenir des étiquettes descriptives.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Créer un tableau

Créez un fichier index.html et ouvrez-le dans votre éditeur de texte. C'est là que vous écrirez votre code HTML.

Créez un tableau à l'aide de la balise <table>.

<table>
  <!-- contenu ici -->
</table>

Ajouter un en-tête de tableau

Ajoutez une balise <thead> pour définir la ligne d'en-tête du tableau. À l'intérieur de la balise <thead>, ajoutez vos lignes d'en-tête de tableau à l'aide de la balise <th>.

<table>
  <thead>
    <tr>
      <th>En-tête 1</th>
      <th>En-tête 2</th>
      <th>En-tête 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- contenu du tableau ici -->
  </tbody>
</table>

Insérer du contenu dans le tableau

Ajoutez du contenu au tableau en utilisant la balise <tbody> et les balises imbriquées <tr> et <td>.

<table>
  <thead>
    <tr>
      <th>En-tête 1</th>
      <th>En-tête 2</th>
      <th>En-tête 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Contenu 1</td>
      <td>Contenu 2</td>
      <td>Contenu 3</td>
    </tr>
    <tr>
      <td>Contenu 4</td>
      <td>Contenu 5</td>
      <td>Contenu 6</td>
    </tr>
  </tbody>
</table>

Styler l'en-tête du tableau

Utilisez le CSS pour styliser la balise <thead>. Voici un exemple de changement de couleur de fond de l'en-tête en gris :

<style>
  thead {
    background-color: gray;
  }
</style>

Résumé

La balise <thead> est utilisée pour définir la ligne d'en-tête d'un tableau. C'est un autre élément enfant de la balise <table> et vient avant les balises <tbody> et <tfoot>. En utilisant le CSS, vous pouvez styliser l'en-tête du tableau pour le rendre plus visuellement attrayant.