Construire les lignes et les colonnes

Quand les tarifs sont présentés comme une suite de textes, il devient difficile de comparer rapidement les formules, leur durée et leur prix. Vous allez placer ces informations dans un tableau HTML dont les lignes et les colonnes correspondent directement aux données à comparer.

La leçon précédente a établi que les formules Découverte et Complète, comparées selon leur durée et leur tarif, constituent des données tabulaires. Ici, vous construisez seulement le corps du tableau : la distinction entre les intitulés de colonnes et les données sera ajoutée ensuite.

Associer les éléments aux données

L’élément table délimite le tableau. À l’intérieur, chaque élément tr représente une ligne. Les cellules de données de cette ligne sont écrites avec td : une cellule par valeur, dans le même ordre pour toutes les formules.

Pour les tarifs de l’atelier, chaque ligne correspond à une formule. Les colonnes décrivent successivement le nom de la formule, sa durée et son prix par participant. Cette répétition régulière permet de lire les valeurs ligne par ligne et de comparer chaque critère entre les formules.

Construire les lignes de tarifs

Remplacez le contenu actuel de la section des tarifs dans index.html par le balisage ci-dessous. Il conserve l’identifiant de la section et la classe du tableau prévues par le projet, ainsi que le titre et la légende. Chaque ligne contient trois cellules dans l’ordre annoncé.

<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>
        <tr>
            <td>Découverte</td>
            <td>Deux heures</td>
            <td>35 €</td>
        </tr>
        <tr>
            <td>Complète</td>
            <td>Trois heures</td>
            <td>50 €</td>
        </tr>
    </table>
</section>

Le tableau contient maintenant deux lignes de données et trois cellules dans chacune. La première cellule indique la formule, la deuxième sa durée, et la troisième son tarif ; la légende précise que les prix sont exprimés par participant et en euros. Aucun nouveau nom de classe ni changement de feuille de style n’est nécessaire.

Contrôler le résultat dans la page

Ouvrez index.html dans votre navigateur et repérez la section « Tarifs des formules ». Vous devez y voir les deux formules, chacune accompagnée de sa durée et de son prix, ainsi que la légende « Tarifs par participant, en euros ». À ce stade, les cellules ne sont pas encore déclarées comme des en-têtes : le tableau a sa structure de base, mais l’identification des intitulés sera traitée dans la prochaine leçon.

À retenir

• table délimite le tableau, tr représente une ligne et td une cellule de données.
• Chaque ligne représente une formule et chaque colonne un critère de comparaison.
• Conservez le même nombre de cellules et le même ordre de valeurs dans toutes les lignes.
• La légende précise le contexte des valeurs ; la prochaine leçon distinguera les en-têtes des données.