Légende de tableau HTML : Guide étape par étape

Introduction

En HTML, la balise <caption> est utilisée pour ajouter une légende ou un titre à un tableau. Ce laboratoire étape par étape vous guidera tout au long du processus de création d'un tableau en HTML et d'ajout d'une légende à celui-ci.

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 actualiser l'onglet Web 8080 pour prévisualiser la page web.

Créer un tableau de base

Dans la première étape, créez un tableau de base avec quelques données en utilisant la balise table. Voici un exemple :

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Ajouter une légende au tableau

Pour ajouter une légende au tableau, il suffit d'insérer la balise <caption> après la balise d'ouverture <table> et avant les lignes du tableau. Voici un exemple :

<table>
  <caption>
    Informations sur les employés
  </caption>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Styler la légende

Pour styliser la légende, utilisez l'attribut style à l'intérieur de la balise <caption>. Voici un exemple :

<table>
  <caption style="color: blue; font-size: 20px;">
    Informations sur les employés
  </caption>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Résumé

En HTML, la balise <caption> est utilisée pour ajouter une légende ou un titre à un tableau. La balise <caption> est utilisée à l'intérieur de la balise <table>, juste après la balise d'ouverture <table>. Une légende est une courte description qui fournit une brève explication sur le tableau. Elle vous aide à comprendre son but. Pour ajouter une légende au tableau, il suffit d'insérer la balise <caption> après la balise d'ouverture <table> et avant les lignes du tableau. En utilisant l'attribut style à l'intérieur de la balise <caption>, nous pouvons styliser la légende.