Distinguer les en-têtes des données
Objectif : Identifier les titres de colonnes et les associer aux cellules concernées dans le tableau des tarifs.
Dans le tableau des tarifs, les formules, les durées et les prix sont déjà rangés en lignes et en colonnes. Sans distinction entre les intitulés et les valeurs, la structure indique mal le rôle de chaque cellule, notamment lorsqu’on parcourt le tableau avec une technologie d’assistance.
Vous allez distinguer les en-têtes des données avec th et organiser le tableau en groupes d’en-têtes et de données avec thead et tbody. L’attribut scope précise si un en-tête s’applique à une colonne ou à une ligne.
Repérer les cellules qui nomment les données
Dans le tableau de la leçon précédente, chaque ligne contient trois cellules td : une formule, une durée et un tarif. Les cellules de la première ligne doivent plutôt nommer les colonnes. De même, « Découverte » et « Complète » identifient chacune une ligne de données : elles servent d’en-têtes de ligne, tandis que la durée et le tarif restent des valeurs.
L’élément th représente une cellule d’en-tête. L’élément td représente une cellule de données. Remplacer certaines cellules td par th ne change pas l’organisation du tableau en lignes et colonnes ; cela ajoute une information de rôle au balisage.
Séparer les en-têtes et les données
Placez la ligne qui contient les intitulés dans thead. Regroupez les lignes contenant les offres dans tbody. Ces éléments expriment les deux parties du tableau et rendent sa structure plus explicite ; ils ne remplacent ni les lignes tr, ni les cellules qui les composent.
Pour le tableau du projet, « Formule », « Durée » et « Tarif » nomment chacune une colonne. Utilisez donc th scope="col" pour ces trois cellules. Dans chaque ligne de données, la formule identifie l’offre et sert d’en-tête de ligne : utilisez th scope="row" à sa place, puis conservez des td pour la durée et le prix.
Mettre à jour le tableau des tarifs
Voici le fichier index.html complet à cet état du projet. Le contenu et les classes de la page restent ceux du squelette de référence ; la modification concerne la structure interne du tableau. Le fichier style.css n’a pas à être modifié pour distinguer ces rôles dans le HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réservation de l’atelier</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="atelier-page">
<header class="atelier-entete">
<p>Atelier créatif</p>
<nav class="atelier-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#presentation">Présentation</a></li>
<li><a href="#inscription">Inscription</a></li>
<li><a href="#tarifs">Tarifs</a></li>
</ul>
</nav>
</header>
<main class="atelier-principal">
<section class="atelier-presentation" id="presentation" aria-labelledby="titre-atelier">
<h1 id="titre-atelier">Réservez votre place à l’atelier</h1>
<article class="atelier-article">
<h2>À propos de l’atelier</h2>
<p>Participez à une séance guidée et repartez avec votre création.</p>
<p>Durée : deux heures. Les places sont limitées.</p>
</article>
</section>
<section class="atelier-inscription" id="inscription" aria-labelledby="titre-inscription">
<h2 id="titre-inscription">Formulaire d’inscription</h2>
<form class="atelier-formulaire" action="#" method="post">
<div class="atelier-champ">
<label for="nom">Nom complet</label>
<input id="nom" name="nom" type="text" autocomplete="name" minlength="2" required>
</div>
<div class="atelier-champ">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
</div>
<div class="atelier-champ">
<label for="telephone">Téléphone</label>
<input id="telephone" name="telephone" type="tel" autocomplete="tel" pattern="[0-9 +()-]{8,20}" required>
</div>
<div class="atelier-champ">
<label for="date">Date souhaitée</label>
<input id="date" name="date" type="date" required>
</div>
<div class="atelier-champ">
<label for="participants">Nombre de participants</label>
<input id="participants" name="participants" type="number" min="1" max="8" value="1" required>
</div>
<div class="atelier-champ">
<label for="formule">Formule</label>
<select id="formule" name="formule" required>
<option value="">Choisissez une formule</option>
<option value="decouverte">Découverte</option>
<option value="complete">Complète</option>
</select>
</div>
<button class="atelier-bouton" type="submit">Envoyer la réservation</button>
</form>
</section>
<section class="atelier-tarifs" id="tarifs" aria-labelledby="titre-tarifs">
<h2 id="titre-tarifs">Tarifs des formules</h2>
<table class="atelier-tableau">
<caption>Tarifs par participant, en euros</caption>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Durée</th>
<th scope="col">Tarif</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Découverte</th>
<td>Deux heures</td>
<td>35 €</td>
</tr>
<tr>
<th scope="row">Complète</th>
<td>Trois heures</td>
<td>50 €</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer class="atelier-pied">
<p>Atelier créatif — Informations et réservations</p>
</footer>
</body>
</html>À retenir
- Utilisez
thpour les cellules qui nomment les colonnes ou les lignes, ettdpour les valeurs. - Placez la rangée d’intitulés dans
theadet les rangées de données danstbody. - Indiquez
scope="col"pour un en-tête de colonne etscope="row"pour un en-tête de ligne. - Dans la prochaine leçon, vous vérifierez la lisibilité du tableau et les associations entre ses en-têtes et ses cellules.