Tableaux HTML : Créer et Structurer des Données

Introduction

Les tableaux HTML sont utilisés pour afficher des données dans un format structuré et tabulaire, composé de lignes et de colonnes. Ceci est essentiel pour présenter des informations telles que des comparaisons de produits, des rapports financiers ou des calendriers de manière claire et organisée.

Dans ce laboratoire, vous apprendrez les éléments fondamentaux d'un tableau HTML. Vous commencerez par créer la structure de base du tableau et ajouterez progressivement des lignes, des en-têtes et des cellules de données pour construire un tableau complet et fonctionnel.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 99%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Créer la balise table pour la structure du tableau

Dans cette étape, vous allez créer le conteneur principal de votre tableau. La balise <table> est l'élément racine de tout tableau HTML et englobe tous les autres éléments liés au tableau.

Tout d'abord, mettons en place la structure de base du document HTML. Dans l'explorateur de fichiers à gauche, trouvez et ouvrez le fichier index.html situé dans le répertoire ~/project.

Ajoutez le code de base suivant à index.html. Ce code définit un document HTML5 standard et inclut un élément <table> vide dans le <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Après avoir ajouté le code, vous pouvez cliquer sur l'onglet Web 8080 en haut de l'interface pour prévisualiser votre page. Vous ne verrez encore rien, car le tableau est vide, mais cela confirme que le fichier est correctement servi.

Ajouter des balises tr pour les lignes du tableau

Dans cette étape, vous allez ajouter des lignes à votre tableau. Chaque ligne horizontale dans un tableau est définie par la balise <tr>, qui signifie "table row" (ligne de tableau). Tout le contenu d'une ligne, tel que les en-têtes ou les cellules de données, doit être placé à l'intérieur d'un élément <tr>.

Ajoutons deux lignes à notre tableau. La première ligne contiendra à terme les en-têtes de colonnes, et la seconde contiendra les données.

Modifiez votre fichier index.html pour inclure deux éléments <tr> à l'intérieur de la balise <table>, comme ceci :

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr></tr>
      <tr></tr>
    </table>
  </body>
</html>

Enregistrez le fichier. Si vous vérifiez l'onglet Web 8080, vous ne verrez toujours aucun changement visible car les lignes ne contiennent pas encore de contenu ni de bordures.

Insérer des balises th pour les cellules d'en-tête

Dans cette étape, vous allez définir les cellules d'en-tête de votre tableau. Les cellules d'en-tête sont créées à l'aide de la balise <th>, qui signifie "table header" (en-tête de tableau). Ces balises sont placées à l'intérieur d'un élément <tr> et sont généralement rendues sous forme de texte en gras et centré, les distinguant des cellules de données ordinaires.

Ajoutons deux en-têtes à la première ligne de notre tableau : "Name" et "Age".

Mettez à jour votre fichier index.html en ajoutant deux éléments <th> à l'intérieur de la première balise <tr> :

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

Maintenant, si vous basculez vers l'onglet Web 8080, vous verrez les en-têtes "Name" et "Age" s'afficher.

Utiliser des balises td pour les cellules de données

Dans cette étape, vous allez ajouter les données réelles à votre tableau. Les cellules de données standard sont créées avec la balise <td>, qui signifie "table data" (données de tableau). Ces balises sont placées à l'intérieur d'un élément <tr> et contiennent les informations correspondant aux en-têtes de colonnes.

Ajoutons une ligne de données pour une personne nommée "Alice" qui a "30" ans. Ces données iront dans la deuxième ligne de notre tableau.

Mettez à jour votre fichier index.html en ajoutant deux éléments <td> à l'intérieur de la deuxième balise <tr> :

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Enregistrez le fichier et vérifiez l'onglet Web 8080. Vous verrez maintenant les données "Alice" et "30" affichées dans la deuxième ligne, alignées sous leurs en-têtes respectifs.

Ajouter l'attribut border à la table pour la visibilité

Dans cette étape, vous allez rendre la structure du tableau visible. Par défaut, les tableaux HTML sont rendus sans bordures. Pour ajouter rapidement une bordure à des fins de visualisation, vous pouvez utiliser l'attribut border sur la balise <table>.

Ajoutons une bordure de 1 pixel à notre tableau. Modifiez la balise <table> ouvrante dans index.html pour inclure border="1".

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Après avoir enregistré le fichier, actualisez l'onglet Web 8080. Vous verrez maintenant un tableau complet avec des bordures visibles autour du tableau et de chaque cellule, montrant clairement la structure des lignes et des colonnes. Bien que l'attribut border soit simple, la conception web moderne utilise CSS pour le style, ce qui offre beaucoup plus de contrôle et de flexibilité.

Résumé

Félicitations ! Vous avez créé avec succès un tableau HTML de base.

Dans ce laboratoire, vous avez appris à :

Utiliser la balise <table> pour créer un conteneur de tableau.
Utiliser la balise <tr> pour définir les lignes du tableau.
Utiliser la balise <th> pour créer des cellules d'en-tête pour les colonnes.
Utiliser la balise <td> pour ajouter des cellules de données.
Ajouter un attribut border pour rendre la structure du tableau visible.

Ce sont les éléments essentiels pour afficher tout type de données tabulaires sur une page web. Vous pouvez maintenant vous appuyer sur cette base pour créer des tableaux plus complexes et stylisés.