HTML 5 - 3.4 : Tableau et affichage
Les tableaux HTML permettent d'organiser et de présenter les données de manière structurée et lisible. Pour créer un tableau, on utilise la balise <table> qui contient les différents éléments du tableau : l'en-tête, le corps et les lignes de données. La balise <caption> permet d'ajouter une légende au tableau, tandis que les balises <thead>, <tbody> et <tfoot> structurent respectivement l'en-tête, le corps et le pied du tableau. Chaque ligne est définie par la balise <tr>, les cellules d'en-tête par <th>, et les cellules de données par <td>.
Les cellules peuvent être fusionnées pour créer une présentation plus flexible. L'attribut rowspan permet de fusionner plusieurs lignes, tandis que colspan fusionne plusieurs colonnes. Par exemple, si vous avez deux horaires identiques dans deux salles différentes, vous pouvez utiliser colspan pour que la même cellule d'horaire couvre deux colonnes, évitant ainsi la répétition de données.
L'exemple classique est un tableau d'horaire de conférence : on définit les colonnes (heure, nom de la conférence, salle), on remplit les lignes avec les données correspondantes, et on utilise rowspan ou colspan lorsque plusieurs événements partagent un créneau horaire ou une ressource. Ce système simplifie la lecture et la maintenance des données tabulaires dans les pages web.
En résumé
Ce tutoriel explique comment créer un tableau HTML5 en utilisant les balises `<table>`, `<caption>`, `<thead>`, `<tbody>` et `<tfoot>`. À travers un exemple concret d'affichage de conférences par heure, on apprend à structurer les données avec les cellules d'en-tête `<th>` et les cellules de données `<td>`. Le tutoriel montre comment utiliser les attributs `rowspan` et `colspan` pour fusionner des cellules et optimiser la présentation des données répétitives.
Points clés
- La balise <table> contient la structure complète : <caption>, <thead>, <tbody> et optionnellement <tfoot>
- <th> crée les cellules d'en-tête (header), <td> crée les cellules de données ordinaires
- <caption> ajoute une légende au-dessus du tableau pour décrire son contenu
- L'attribut rowspan fusionne plusieurs lignes dans une même colonne, évitant la répétition de données
- L'attribut colspan fusionne plusieurs colonnes dans une même ligne pour grouper les données horizontales
- Chaque <tr> représente une ligne, et chaque cellule (<th> ou <td>) est un élément distinct dans cette ligne
Questions fréquentes
Quelle est la différence entre <th> et <td> dans un tableau ?
<th> (table header) est utilisé pour les cellules d'en-tête qui identifient le contenu des colonnes, tandis que <td> (table data) est utilisé pour les cellules ordinaires contenant les données du tableau.
À quoi sert la balise <caption> ?
La balise <caption> ajoute une légende ou un titre descriptif en haut du tableau, permettant au lecteur de comprendre immédiatement le sujet ou le contexte des données affichées.
Comment éviter de répéter les mêmes données dans plusieurs lignes d'un tableau ?
On utilise l'attribut rowspan pour une cellule qui s'étend sur plusieurs lignes. Par exemple, si deux créneaux horaires partagent le même cours mais dans des salles différentes, une seule cellule peut les couvrir avec rowspan="2".