Maîtriser le corps d'un tableau HTML

Introduction

En HTML, la balise <tbody> est utilisée pour indiquer le corps d'un tableau HTML, composé d'un ensemble de lignes à l'intérieur du tableau. Ce laboratoire vous guidera tout au long des étapes pour créer un tableau HTML simple avec la balise <tbody>.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer 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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TablesGroup(["Tables"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70854{{"Corps d'un tableau HTML"}} html/layout -.-> lab-70854{{"Corps d'un tableau HTML"}} html/doc_flow -.-> lab-70854{{"Corps d'un tableau HTML"}} html/tables -.-> lab-70854{{"Corps d'un tableau HTML"}} html/complex_tbl -.-> lab-70854{{"Corps d'un tableau HTML"}} html/tbl_access -.-> lab-70854{{"Corps d'un tableau HTML"}} end

Créer une balise de tableau

Créez un fichier HTML vide nommé index.html dans votre éditeur de code préféré.

Créez une balise <table> dans la section <body> du fichier HTML.

<body>
  <table></table>
</body>

Ajouter la balise `<thead>` pour l'en-tête du tableau

Dans la balise <table>, créez une balise <thead> et ajoutez une ligne d'en-tête avec des balises <th> à l'intérieur.

<table>
  <thead>
    <tr>
      <th>Prénom</th>
      <th>Nom de famille</th>
    </tr>
  </thead>
</table>

Ajouter la balise `<tbody>` pour le corps du tableau

Dans la balise <table>, créez une balise <tbody> et ajoutez des lignes avec des balises <td> à l'intérieur.

<table>
  <thead>
    <tr>
      <th>Prénom</th>
      <th>Nom de famille</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

Ajouter la balise `<tfoot>` pour le pied de tableau (Facultatif)

Dans la balise <table>, créez une balise <tfoot> et ajoutez une ligne de pied de tableau avec des balises <td> à l'intérieur.

<table>
  <thead>
    <tr>
      <th>Prénom</th>
      <th>Nom de famille</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total: 2 personnes</td>
    </tr>
  </tfoot>
</table>

Styliser le tableau

Utilisez le CSS pour styliser le tableau, y compris <thead>, <tbody> et <tfoot> le cas échéant.

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
    color: #444;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

Sommaire

Dans ce laboratoire, nous avons appris à utiliser la balise <tbody> pour créer un tableau HTML avec des lignes et des colonnes. En suivant les étapes, nous avons créé un tableau simple avec des sections d'en-tête, de corps et de pied de tableau, et avons stylisé le tableau avec le CSS pour le rendre plus professionnel. La balise <tbody> est un outil pratique pour construire des tableaux complexes en HTML et est souvent utilisée en conjonction avec d'autres éléments de tableau pour créer des visualisations de données dynamiques et interactives.

Corps d'un tableau HTML