Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Création et Structuration de Tableaux en HTML | Travail avec les Médias et les Tableaux
HTML Ultime

book
Création et Structuration de Tableaux en HTML

Les tableaux sont utiles pour présenter des relations complexes en organisant le contenu dans des cellules. Ils sont particulièrement efficaces pour afficher des données tabulaires telles que les horaires de transport, les calendriers, les rémunérations, les résultats de matchs, les transactions financières, les menus de restaurant, les listes de prix et toute autre information qui s'adapte naturellement à un format de tableau, similaire à Google Sheets.

Pour créer des tableaux en HTML, utilisez les éléments principaux suivants :

  • <table> : définit un tableau sur une page web ;

  • <tr> : définit une ligne dans le tableau ;

  • <th> : définit une cellule d'en-tête dans une ligne. Les cellules d'en-tête sont généralement en gras et centrées ;

  • <td> : définit une cellule de données standard dans une ligne.

Examinons les étapes pour créer un tableau pour un menu :

Étape 1 : Mettre en place la structure HTML

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

html
<!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 :

html
<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> :

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

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

Ajouter ensuite 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> :

html
<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 :

html
<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 leurs relations.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table>
<!-- Table title: Describes the content of the table -->
<caption>
New Menu
</caption>

<!-- Table header: Defines column headings -->
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>

<!-- Table body: Contains the main content of the table -->
<tbody>
<!-- Row 1: Details for an appetizer -->
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>$8</td>
</tr>
<!-- Row 2: Details for a pasta dish -->
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>$16</td>
</tr>

Remarque

Par défaut, les tableaux HTML n'ont pas de style visuel spécifique. Pour personnaliser l'apparence du tableau, ajoutez des styles CSS dans un fichier CSS séparé ou dans une balise <style> 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 visualiser le tableau sans aucun style CSS, il est possible de supprimer la ligne 4 : <link rel="stylesheet" href="index.css" />, qui importe les styles CSS.

Pour en savoir plus sur le CSS, consultez 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 rôle de l’élément <th> dans un tableau HTML ?

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

Quel est le rôle de l’élément <th> dans un tableau HTML ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7

Demandez à l'IA

expand
ChatGPT

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

some-alt