Cellule d'en-tête de tableau HTML

Introduction

En HTML, la balise <th> est utilisée pour définir une cellule comme en-tête d'un groupe de cellules. Il existe deux types de cellules de tableau HTML : la cellule d'en-tête et la cellule standard. La cellule d'en-tête est utilisée comme en-tête pour le groupe de cellules et les cellules standard contiennent les données d'un tableau.

Ce tutoriel étape par étape vous guidera tout au long de la création d'une cellule d'en-tête dans un tableau HTML à l'aide de la balise <th>, avec des explications brèves et des extraits de code.

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.

Skills Graph

Création d'un tableau HTML de base

Tout d'abord, nous devons créer un tableau à l'aide d'HTML.

Pour créer un tableau, vous devez utiliser la balise <table>, chaque ligne étant représentée par la balise <tr> et chaque cellule étant représentée par la balise <td>.

Par exemple, le code suivant créera un tableau HTML simple avec deux lignes et deux colonnes :

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Création d'une cellule d'en-tête

Pour créer une cellule d'en-tête, nous devons remplacer la balise <td> par la balise <th> dans la ligne de tableau où nous voulons ajouter une cellule d'en-tête.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Ajout d'attributs à la balise <th>

La balise <th> prend en charge divers attributs pour aider à formater et structurer la cellule d'en-tête.

• Abbr : Utilisé pour définir l'abréviation courte du contenu de la cellule.
• Colspan : Spécifie le nombre de colonnes que la cellule doit couvrir.
• Rowspan : Spécifie le nombre de lignes que la cellule doit couvrir.
• Scope : Spécifie les cellules auxquelles la balise d'en-tête est liée.
• Header : Utilisé pour spécifier une ou plusieurs cellules d'en-tête liées à une cellule.

Par exemple, le code suivant créera une cellule d'en-tête avec les attributs "abbr" et "colspan" :

<table>
  <tr>
    <th abbr="Header 1" colspan="2">Header 1 &amp; Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Récapitulatif

Dans ce tutoriel étape par étape, vous avez appris à créer une cellule d'en-tête dans un tableau HTML à l'aide de la balise <th>. Les en-têtes de tableau HTML sont importants pour organiser les données de manière structurée. En utilisant la balise th, vous pouvez créer une cellule d'en-tête et gérer sa mise en forme et ses attributs.