Créer des tableaux HTML avec des attributs de base

Introduction

Dans ce laboratoire (lab), les étudiants apprendront à créer et à manipuler des tableaux HTML en utilisant les balises et attributs de base des tableaux HTML. Le laboratoire se concentre sur la compréhension de la structure de base des tableaux HTML, y compris les balises essentielles telles que <table>, <tr>, <td> et <th>, qui sont cruciales pour organiser et présenter des données sous forme de grille structurée sur les pages web.

Les participants suivront un parcours d'apprentissage complet qui couvre la création de tableaux de base, l'ajout d'en-têtes et de sections de corps, la fusion de cellules à l'aide des attributs colspan et rowspan, et l'application d'attributs de style de base. À la fin du laboratoire, les étudiants auront acquis des compétences pratiques dans la construction de tableaux HTML bien structurés et comprendront comment représenter efficacement les données à l'aide d'éléments de tableau HTML et de leurs attributs associés.

Comprendre la structure des tableaux HTML et les balises de base

Dans cette étape, vous apprendrez la structure de base et les balises de base utilisées pour créer des tableaux HTML. Les tableaux HTML sont essentiels pour organiser et afficher des données sous forme de grille structurée sur les pages web.

Les tableaux HTML sont créés à l'aide de plusieurs balises clés :

<table> : Le conteneur principal pour l'ensemble du tableau
<tr> : Définit une ligne de tableau
<td> : Définit une cellule standard de tableau (cellule de données)
<th> : Définit une cellule d'en-tête de tableau

Créons un exemple simple pour illustrer ces balises de base de tableau. Ouvrez le WebIDE et créez un nouveau fichier appelé basic_table.html dans le répertoire ~/project.

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

Décortiquons la structure du tableau :

<table border="1"> crée le conteneur du tableau avec une bordure visible. L'attribut border est facultatif.
La première balise <tr> contient des cellules d'en-tête <th> pour les titres de colonne.
Les éléments <tr> suivants contiennent des cellules de données <td> avec le contenu réel.

Notes : En savoir plus sur Comment prévisualiser des fichiers HTML dans le WebIDE.

Points clés à retenir :

Chaque balise <tr> représente une ligne dans le tableau.
<th> est utilisée pour les cellules d'en-tête (généralement en gras et centrées).
<td> est utilisée pour les cellules de données standard.
L'attribut border permet de visualiser la structure du tableau (bien que le CSS soit préféré pour le style dans les applications réelles).

Créer un tableau simple avec des lignes et des colonnes

Dans cette étape, vous apprendrez à créer un tableau plus complexe avec plusieurs lignes et colonnes. En vous appuyant sur l'étape précédente, nous allons explorer comment structurer des tableaux avec un nombre variable de lignes et de colonnes pour afficher efficacement des informations.

Ouvrez le WebIDE et créez un nouveau fichier appelé product_table.html dans le répertoire ~/project. Nous allons créer un tableau d'inventaire de produits pour illustrer la création d'un tableau avec plusieurs lignes et colonnes.

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

Points clés concernant la création de tableaux avec plusieurs lignes et colonnes :

Chaque balise <tr> (ligne de tableau) représente une ligne horizontale dans le tableau.
À l'intérieur de chaque balise <tr>, plusieurs éléments <td> (données de tableau) créent des colonnes.
Le nombre d'éléments <td> dans chaque balise <tr> détermine le nombre de colonnes.
Toutes les lignes doivent avoir le même nombre de colonnes pour un mise en page cohérente.
L'attribut border permet de visualiser la structure du tableau.

Remarquez comment nous avons créé un tableau à 4 colonnes avec :

La première ligne comme en-têtes de colonnes.
Trois lignes supplémentaires avec des informations sur les produits.
Chaque ligne contient quatre cellules correspondant aux colonnes.

La sortie d'exemple dans un navigateur web montrerait une grille 4x4 affichant les détails de l'inventaire des produits.

Exemple de tableau d'inventaire de produits

Ajouter des en-têtes de tableau et des sections de corps

Dans cette étape, vous apprendrez à améliorer la structure des tableaux en utilisant les balises HTML sémantiques <thead>, <tbody> et <tfoot> pour organiser plus efficacement le contenu des tableaux. Ces balises contribuent à améliorer la lisibilité et l'accessibilité de vos tableaux HTML.

Ouvrez le WebIDE et créez un nouveau fichier appelé student_grades.html dans le répertoire ~/project. Nous allons créer un tableau de notes d'étudiants pour illustrer l'utilisation des balises de sections de tableau.

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Points clés concernant les sections de tableau :

<thead> : Contient les lignes d'en-tête avec les titres de colonnes.
<tbody> : Contient les lignes de données principales.
<tfoot> : Contient les lignes de résumé ou de pied de page.
Utilisez <th> pour les cellules d'en-tête au lieu de <td>.
Ces balises sémantiques contribuent à améliorer la structure et l'accessibilité des tableaux.

L'exemple montre :

Une ligne d'en-tête avec les titres de colonnes utilisant <th>.
Plusieurs lignes de données dans le <tbody>.
Une ligne de pied de page avec les moyennes de classe dans le <tfoot>.

La sortie d'exemple dans un navigateur web montrerait un tableau structuré avec des sections claires pour les en-têtes, le corps et le pied de page.

Fusionner des cellules de tableau en utilisant colspan et rowspan

Dans cette étape, vous apprendrez à fusionner des cellules de tableau horizontalement et verticalement en utilisant les attributs colspan et rowspan. Ces attributs vous permettent de créer des mises en page de tableau plus complexes et flexibles en combinant plusieurs cellules.

Ouvrez le WebIDE et créez un nouveau fichier appelé event_schedule.html dans le répertoire ~/project. Nous allons créer un tableau d'horaire d'événement pour illustrer la fusion de cellules.

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Points clés concernant colspan et rowspan :

colspan : Fusionne des cellules horizontalement sur plusieurs colonnes.
- Exemple : <td colspan="2"> étend la cellule sur 2 colonnes.
rowspan : Fusionne des cellules verticalement sur plusieurs lignes.
- Exemple : <td rowspan="2"> étend la cellule sur 2 lignes.
Lorsque vous utilisez ces attributs, supprimez les cellules correspondantes dans les autres lignes.

Dans cet exemple :

Le "Keynote Speech" s'étend sur 2 lignes dans la salle A.
Le "Lunch Break" s'étend sur 2 colonnes dans les deux salles.
Les autres cellules conservent leur mise en page standard d'une seule cellule.

La sortie d'exemple dans un navigateur web montrerait un tableau avec des cellules fusionnées créant un horaire plus compact et organisé.

Exemple de tableau HTML avec des cellules fusionnées

Styler et personnaliser les attributs des tableaux

Dans cette étape, vous apprendrez à styliser et personnaliser les tableaux HTML en utilisant le CSS en ligne et les attributs HTML. Un bon style peut améliorer la lisibilité et l'attrait visuel de vos tableaux.

Ouvrez le WebIDE et créez un nouveau fichier appelé styled_table.html dans le répertoire ~/project. Nous allons créer un tableau en utilisant diverses techniques de style.

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Techniques de style principales démontrées :

border-collapse : Supprime l'espacement entre les cellules de tableau.
Police et typographie personnalisées.
Ligne d'en-tête colorée.
Couleurs de lignes alternées en utilisant :nth-child(even).
Effet de survol sur les lignes de tableau.
Style de marge intérieure (padding) et de bordure pour les cellules.

Options de style incluses :

CSS en ligne dans la balise <style>.
Fichier CSS séparé (recommandé pour les projets plus importants).
Styles en ligne en utilisant l'attribut style.
Propriétés CSS pour la mise en page, les couleurs et l'interactivité.

La sortie d'exemple dans un navigateur web montrerait un tableau stylisé professionnellement et facile à lire avec des effets de survol et de couleur.

Résumé

Dans ce laboratoire (lab), les participants ont appris les bases de la création de tableaux HTML en utilisant des balises HTML essentielles telles que <table>, <tr>, <td> et <th>. Le laboratoire a guidé les apprenants dans la compréhension de la structure des tableaux, la création de tableaux de base avec des lignes et des colonnes, et l'exploration de techniques pour ajouter des en-têtes, fusionner des cellules et personnaliser les attributs des tableaux.

Les exercices pratiques ont montré comment construire des présentations de données structurées en grille dans les pages web, couvrant des concepts clés tels que la définition des lignes de tableau, la création de cellules d'en-tête et de données, et l'utilisation d'attributs comme border pour améliorer la visualisation des tableaux. Les participants ont acquis une expérience pratique dans la construction de tableaux HTML sémantiques et bien organisés qui peuvent afficher efficacement des informations dans diverses situations de conception web.