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.

20 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

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Personnalités scientifiques</title>
</head>
<body>
  <table>
    <caption>Personnalités scientifiques notables</caption>
    <thead>
      <tr>
        <th scope="col">Nom</th>
        <th scope="col">Pays</th>
        <th scope="col">Année</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Marie Curie</td>
        <td>Pologne</td>
        <td>1867</td>
      </tr>
      <tr>
        <td>Alan Turing</td>
        <td>Royaume-Uni</td>
        <td>1912</td>
      </tr>
      <tr>
        <td>Ada Lovelace</td>
        <td>Royaume-Uni</td>
        <td>1815</td>
      </tr>
      <tr>
        <td>Grace Hopper</td>
        <td>États-Unis</td>
        <td>1906</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Le rendu produit un tableau avec une légende, des en-têtes de colonnes et quatre lignes de données. Les technologies d'assistance (lecteurs d'écran) utilisent scope="col" pour associer chaque cellule à son en-tête.

Espace solution

Proposer une solution

Connectez-vous ou créez un compte pour envoyer votre code (aucune exécution côté serveur — on stocke juste le texte pour la communauté).

Se connecter Créer un compte

Défi précédentFormulaire accessible avec labels correctement liés Défi suivant Implémenter le tri à bulles sur une liste d'entiers