Tables

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 compensations salariales, les résultats de matchs, les transactions financières, les menus de restaurant, les listes de prix et d'autres informations qui s'intègrent naturellement dans 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.

Passons en revue les étapes pour créer un tableau pour un menu :

Étape 1 : Configurer la structure HTML

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

html

Étape 2 : Définir le tableau

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

html

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

Si vous souhaitez fournir un titre pour le tableau, vous pouvez utiliser la balise <caption> :

html

Étape 4 : Créer les En-têtes de Table

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

html

Étape 5 : Remplir la Table avec des Données

Utilisez l'élément <tbody> pour entourer les lignes de la table et les balises <td> pour définir les cellules contenant les données:

html

Code Complet

Veuillez prendre un moment pour examiner tous les éléments attentivement afin de vous assurer que leur relation est apparente.

index.html

index.css

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 de plonger dans le CSS à ce stade, car l'accent est actuellement mis 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.