Retour au cours

Leçon 20 : Tableaux avancés : Colspan, Rowspan et Structure

La Masterclass HTML : De Zéro à Développeur Web

20. Tableaux avancés : Colspan, Rowspan et Structure

20.1 Éléments structurels

Pour les tableaux complexes, utilisez ces éléments pour définir des sections sémantiques :

  • <thead> : Regroupe le contenu de l'en-tête (titres des colonnes).
  • <tbody> : Regroupe le contenu principal (lignes de données).
  • <tfoot> : Regroupe le contenu du pied de page (totaux ou résumé).

html

<table> <thead> <tr><th>Mois</th><th>Ventes</th></tr> </thead> <tbody> <tr><td>Janvier</td><td>500 €</td></tr> <tr><td>Février</td><td>750 €</td></tr> </tbody> <tfoot> <tr><td>Total</td><td>1250 €</td></tr> </tfoot> </table>

20.2 Fusion de cellules (colspan et rowspan)

Ces attributs permettent à une seule cellule de s'étendre sur plusieurs colonnes ou lignes, comme la fusion de cellules dans Excel.

  • colspan : Spécifie sur combien de colonnes la cellule doit s'étendre.
  • rowspan : Spécifie sur combien de lignes la cellule doit s'étendre.

html

<table> <tr> <th colspan="2">Données du T1</th> </tr> <tr> <td>Janv</td> <td>Févr</td> </tr> </table>