Bases des tableaux
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 48 sur 60.
En HTML, un tableau est un moyen d'organiser des données en lignes et en colonnes. Les tableaux sont couramment utilisés pour afficher des données dans un format structuré, comme des horaires, des statistiques ou tout autre type d'information pouvant être présentée dans une grille. Pour créer un tableau, vous utilisez la balise <table> ainsi que d'autres balises comme <tr> pour les lignes du tableau, <td> pour les données du tableau (cellules) et <th> pour les en-têtes du tableau.
Voici la structure de base d'un tableau HTML :
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table><table>: La balise qui définit le tableau.
<tr>: La balise qui définit une ligne de tableau.
<th>: La balise qui définit une cellule d'en-tête. Les cellules d'en-tête sont généralement utilisées pour les titres de colonnes ou de lignes et sont affichées en gras par défaut.
<td>: La balise qui définit une cellule standard dans le tableau.
Voici comment ce tableau serait affiché dans un navigateur :
| En-tête 1 | En-tête 2 |
|---|---|
| Ligne 1, Cellule 1 | Ligne 1, Cellule 2 |
| Ligne 2, Cellule 1 | Ligne 2, Cellule 2 |
Dans cet exemple, nous avons un tableau avec deux lignes et deux colonnes. La première ligne contient des cellules d'en-tête, et les lignes suivantes contiennent des cellules de données régulières. Cette structure crée une mise en page en grille simple qui est facile à lire et à comprendre.
Défi
FacileCréez un document HTML qui inclut un tableau avec la structure suivante :
- Une balise
<table>pour définir le tableau. - Une ligne de tableau (
<tr>) pour l'en-tête avec deux cellules d'en-tête (<th>). La première cellule d'en-tête doit contenir "Name" et la deuxième doit contenir "Age". - Une ligne de tableau (
<tr>) avec deux cellules de données (<td>). La première cellule doit contenir "John" et la deuxième doit contenir "30". - Une autre ligne de tableau (
<tr>) avec deux cellules de données (<td>). La première cellule doit contenir "Jane" et la deuxième doit contenir "25".
Aide-mémoire
Les tableaux HTML organisent les données en lignes et en colonnes à l'aide de la balise <table> :
<table>: Définit le tableau<tr>: Définit une ligne de tableau<th>: Définit une cellule d'en-tête (affichée en gras par défaut)<td>: Définit une cellule de données standard
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête
Photo de profilSection À propos de moiLiens sociaux10Tableaux
Bases des tableauxAjouter des légendesFusionner des lignes et des colonnesRécapitulatif - Tableaux2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-têteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page