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

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> : le 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 la 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 du tableau

Ensuite, ajouter 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

Utiliser 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 garantir que leur relation soit évidente.

index.html

index.css

Remarque

Par défaut, les tableaux HTML n'ont pas de style visuel particulier. Pour personnaliser l'apparence du tableau, ajoutez 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. Si vous souhaitez voir à quoi ressemble le tableau sans aucun style CSS, vous pouvez supprimer la ligne 4 : <link rel="stylesheet" href="index.css" />, qui importe les styles CSS.

Si vous souhaitez en savoir plus sur le CSS, envisagez de suivre le cours Fondamentaux du CSS.

1. Quel est l'élément HTML utilisé pour définir un tableau sur une page web ?

2. Quel élément HTML est utilisé pour définir une ligne dans un tableau ?

3. Quel est le but de l’élément `<th>` dans un tableau HTML ?

Tout était clair ?

Merci pour vos commentaires !

Section 4. Chapitre 8

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Glissez pour afficher le menu

Principaux éléments de tableau :

<table> : le 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 la 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 du tableau

Ensuite, ajouter 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

Utiliser 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 garantir que leur relation soit évidente.

index.html

index.css

Remarque

Si vous souhaitez en savoir plus sur le CSS, envisagez de suivre le cours Fondamentaux du CSS.

1. Quel est l'élément HTML utilisé pour définir un tableau sur une page web ?

2. Quel élément HTML est utilisé pour définir une ligne dans un tableau ?

3. Quel est le but de l’élément `<th>` dans un tableau HTML ?

Tout était clair ?

Merci pour vos commentaires !

Section 4. Chapitre 8

Création et Structuration de Tableaux en HTML

Étape 1 : Mettre en place la structure HTML

Étape 2 : Définir le tableau

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

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

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

Code complet

1. Quel est l'élément HTML utilisé pour définir un tableau sur une page web ?

2. Quel élément HTML est utilisé pour définir une ligne dans un tableau ?

3. Quel est le but de l’élément <th> dans un tableau HTML ?

Création et Structuration de Tableaux en HTML

Étape 1 : Mettre en place la structure HTML

Étape 2 : Définir le tableau

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

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

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

Code complet

1. Quel est l'élément HTML utilisé pour définir un tableau sur une page web ?

2. Quel élément HTML est utilisé pour définir une ligne dans un tableau ?

3. Quel est le but de l’élément <th> dans un tableau HTML ?

3. Quel est le but de l’élément `<th>` dans un tableau HTML ?

3. Quel est le but de l’élément `<th>` dans un tableau HTML ?