Apprendre Création et structuration de tableaux en HTML | Travail avec les Médias et les Tableaux

Glissez pour afficher le menu

Les tableaux permettent de présenter des données structurées telles que des emplois du temps, des calendriers, des registres financiers, des menus et des listes de prix. HTML propose plusieurs éléments pour construire des tableaux.

Principaux éléments de tableau :

<table> : conteneur du tableau ;
<tr> : une ligne ;
<th> : une cellule d’en-tête (en gras, centrée) ;
<td> : une cellule de données classique.

Ci-dessous, création étape par étape d’un tableau de menu simple.

Étape 1 : Mettre en place la structure HTML

Commencer par créer la structure HTML de base pour votre page :

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Étape 2 : Définir le tableau

À l'intérieur de l'élément <body>, ajouter la balise <table> pour définir le tableau :

<table>
  <!-- Table content will go here -->
</table>

Étape 3 : Ajouter une légende au tableau (optionnel)

Pour fournir un titre au tableau, utiliser la balise <caption> :

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Étape 4 : Créer les en-têtes de tableau

Ensuite, ajoutez les en-têtes du tableau à l'intérieur de l'élément <thead>. Chaque en-tête est défini à l'aide de la balise <th> :

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Étape 5 : Remplir le tableau avec des données

Utilisez l'élément <tbody> pour englober les lignes du tableau et les balises <td> pour définir les cellules contenant les données :

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Code complet

Veuillez prendre un moment pour examiner attentivement tous les éléments afin de bien comprendre leur relation.

index.html

index.css

Remarque

Par défaut, les tableaux HTML n'ont pas de style visuel particulier. Pour personnaliser l'apparence du tableau, ajouter des styles CSS dans un fichier CSS séparé ou dans une balise <style> située dans la section <head> du fichier HTML.

Cependant, il n'est pas nécessaire d'aborder le CSS à ce stade, car l'objectif actuel porte uniquement sur le HTML. Pour voir l'apparence du tableau sans aucun style CSS, il est possible de supprimer la ligne 4 : <link rel="stylesheet" href="index.css" />, qui importe les styles CSS.