Créer des pieds de page de tableau efficaces en HTML

Introduction

En HTML, vous pouvez regrouper le contenu du pied de page d'un tableau à l'aide de la balise <tfoot>. Le pied de page du tableau peut inclure des informations de synthèse, des notes explicatives ou des commentaires. La balise <tfoot> est l'un des enfants de la balise <table> et est utilisée en conjonction avec les balises <thead> et <tbody>. Dans ce laboratoire, vous allez apprendre à créer des pieds de page de tableau en HTML à l'aide de la balise <tfoot>.

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

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/layout -.-> lab-70862{{"Pied de page de tableau HTML"}} html/tables -.-> lab-70862{{"Pied de page de tableau HTML"}} html/complex_tbl -.-> lab-70862{{"Pied de page de tableau HTML"}} html/tbl_access -.-> lab-70862{{"Pied de page de tableau HTML"}} end

Créer une structure de tableau de base

Commencez par créer une structure de tableau de base qui contient des sections d'en-tête de tableau, de corps de tableau et de pied de page de tableau.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Table Footer</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Dans le code ci-dessus, nous avons créé une structure de tableau de base avec trois colonnes : Name, Age et Gender. Nous avons également ajouté trois lignes de données au tableau. La balise <tfoot> contient une seule ligne avec une cellule (<td>) qui s'étend sur trois colonnes (colspan="3").

Ajouter du contenu au pied de page du tableau

Une fois que vous avez créé la structure de tableau de base, vous pouvez ajouter du contenu à la balise <tfoot>.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Dans cet exemple, nous avons ajouté une ligne à la balise <tfoot> qui contient l'âge moyen des personnes dans le tableau. La première cellule de la ligne s'étend sur deux colonnes (colspan="2") et affiche le texte "Average Age:". La deuxième cellule affiche la valeur réelle de l'âge moyen.

Appliquer des styles CSS au pied de page du tableau

Vous pouvez appliquer des styles CSS à la balise <tfoot> et à ses éléments enfants pour ajuster l'apparence du pied de page du tableau.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
    <style>
      tfoot {
        background-color: #ccc;
        font-weight: bold;
        text-align: center;
      }
      tfoot td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Dans cet exemple, nous avons appliqué des styles de couleur d'arrière-plan, de gras et d'alignement du texte à la balise <tfoot> à l'aide du sélecteur CSS tfoot. Nous avons également appliqué un rembourrage aux cellules à l'intérieur de la section du pied de page du tableau à l'aide du sélecteur tfoot td.

Résumé

La balise <tfoot> est utilisée pour regrouper le contenu du pied de page d'un tableau. Elle fonctionne en conjonction avec les balises <thead> et <tbody> pour créer une structure de tableau complète. Vous pouvez ajouter du contenu et des styles à la balise <tfoot> et à ses éléments enfants à l'aide de HTML et CSS.