Intégrer le tableau des tarifs
Objectif : Insérer le tableau tarifaire dans la page complète et vérifier que les en-têtes décrivent correctement les données.
Une fois le tableau défini, il faut encore vérifier qu’il s’intègre correctement à la page et que ses montants ne prêtent pas à confusion. Vous allez placer les tarifs dans leur section, conserver les en-têtes associés aux bonnes cellules et rendre explicite l’unité des prix.
Vous avez déjà construit la structure du tableau et appris à utiliser ses en-têtes dans les leçons précédentes. Ici, vous ne créez pas un nouveau modèle : vous vérifiez le tableau complet de la page de réservation, puis vous contrôlez que sa présentation des formules, durées et prix reste fidèle aux informations de l’atelier.
Placer le tableau dans sa section
La section atelier-tarifs porte l’identifiant utilisé par le lien « Tarifs » de la navigation. Elle possède un titre qui la nomme et contient le tableau portant la classe atelier-tableau. La légende indique le périmètre des valeurs : ici, chaque prix correspond à un participant et est exprimé en euros.
Dans l’en-tête du tableau, les trois cellules nomment les colonnes : « Formule », « Durée » et « Tarif ». Chacune utilise scope="col", car elle décrit les données situées sous elle. Dans le corps, le nom de chaque formule est lui-même un en-tête de ligne avec scope="row" ; les durées et les montants restent des cellules de données.
Intégrer le tableau à la page
Le fichier ci-dessous reprend la page complète à son état actuel et y intègre le tableau des tarifs. Le formulaire conserve ses champs de réservation ainsi que les choix regroupés dans des jeux de champs : la formule, la préférence de contact et l’inscription facultative aux prochaines dates. Le tableau distingue les deux formules déjà proposées dans le formulaire.
<!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>
<p>Découvrez aussi <a href="#inscription">les informations d’inscription à l’atelier</a>.</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>
<fieldset>
<legend>Préférence de contact</legend>
<div class="atelier-champ">
<input id="contact-courriel" name="contact" type="radio" value="courriel" required>
<label for="contact-courriel">Courriel</label>
</div>
<div class="atelier-champ">
<input id="contact-telephone" name="contact" type="radio" value="telephone">
<label for="contact-telephone">Téléphone</label>
</div>
</fieldset>
<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>
<div class="atelier-champ">
<input id="prochaines-dates" name="prochaines-dates" type="checkbox" value="oui">
<label for="prochaines-dates">Recevoir les prochaines dates</label>
</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>Contrôler les associations et les valeurs
Parcourez chaque ligne en suivant ses colonnes. Pour « Découverte », la durée est de deux heures et le tarif de 35 € ; pour « Complète », la durée est de trois heures et le tarif de 50 €. Les intitulés du tableau correspondent aux choix du formulaire, et la légende précise que les montants sont calculés par participant : le lecteur n’a pas à deviner si un prix concerne une personne ou l’ensemble du groupe.
Vérifiez ensuite le balisage en lisant les en-têtes comme des associations : chaque valeur de durée et de tarif dépend d’un en-tête de colonne, ainsi que de l’en-tête de ligne qui désigne la formule. Les cellules de la première ligne du tableau sont des en-têtes de colonne ; les cellules « Découverte » et « Complète » sont des en-têtes de ligne. Cette lecture doit rester vraie pour chaque valeur, sans modifier l’ordre des colonnes ou celui des données.
À retenir
- Placez le tableau dans la section consacrée aux tarifs et conservez son titre et sa légende.
- Employez scope="col" pour les en-têtes de colonnes et scope="row" pour les en-têtes de lignes.
- Vérifiez que chaque tarif et chaque durée correspondent à la bonne formule.
- Précisez l’unité des montants et faites correspondre la légende aux valeurs affichées.
Dans la prochaine leçon, vous intégrerez et testerez le formulaire de réservation dans le navigateur.