Aller au contenu principal
U/
Sémantique
html

Tableau sémantique avec thead, tbody et scope

Créer un tableau HTML5 de 3 colonnes et 4 lignes de données avec <thead>, <tbody>, un <caption> et l'attribut scope="col" sur les en-têtes. Pas de CSS requis.

15 minPublié le 20 mai 2026Proposé par Anonyme

Défi

// Lisez attentivement, codez sur votre machine

Énoncé

Créer un tableau HTML5 présentant une liste de personnalités avec trois colonnes : Nom, Pays et Année (de naissance). Le tableau doit inclure un élément <caption> décrivant son contenu, un <thead> contenant les en-têtes de colonnes avec scope="col" sur chaque <th>, et un <tbody> contenant les 4 lignes de données. Aucun CSS n'est requis.

Contraintes

  • Utiliser <table>, <caption>, <thead>, <tbody>, <tr>, <th>, <td>.
  • Chaque <th> dans <thead> doit avoir scope="col".
  • Exactement 4 lignes de données dans <tbody>.
  • HTML5 valide, pas de JavaScript ni de CSS.
  • Pas d'attributs de présentation dépréciés (border, cellpadding, etc.).

Exemple

Données à présenter, dans cet ordre :

Marie Curie     Pologne       1867
Alan Turing     Royaume-Uni   1912
Ada Lovelace    Royaume-Uni   1815
Grace Hopper    États-Unis    1906

Le rendu doit exposer une légende, une ligne d'en-têtes et quatre lignes de données. Un lecteur d'écran doit annoncer l'en-tête de colonne avant chaque cellule — c'est ce que vérifie la présence de scope.

Espace solution
// À garder en tête
  • D'abord, faire marcher

    On ne cherche pas à optimiser : d'abord, on fait marcher le truc. Optimiser vient ensuite — et ça aussi, ça s'apprend. (Si un défi porte sur l'optimisation, son énoncé le précise.)

  • Pas de mauvaise réponse

    Il n'y a pas de mauvaise réponse à un défi. Le but, c'est de le faire. Ce qui compte, c'est de s'entraîner.

  • Trop dur ? Au suivant

    Un défi te résiste ? N'hésite pas à en prendre un autre. Ils seront encore là demain.