Tableaux, formulaires et contenus intégrés

L'élément table indique qu'un ensemble d'informations entretient une relation entre des lignes et des colonnes. Il est adapté à un emploi du temps, un comparatif ou une grille tarifaire, mais ne doit pas servir à mettre en page le site.

<table>
  <!-- Les lignes et les cellules seront placées ici -->
</table>

L'élément tr, pour table row, représente une ligne. Chaque ligne regroupe les cellules décrivant un même enregistrement, par exemple une séance et son horaire.

<table>
  <tr>
    <td>Vendredi</td>
    <td>18 h – 20 h</td>
  </tr>
</table>

td contient une donnée, tandis que th identifie une ligne ou une colonne. Cette différence sémantique aide le navigateur et les technologies d'assistance à restituer correctement le tableau.

<table>
  <tr><th>Jour</th><th>Horaire</th></tr>
  <tr><td>Vendredi</td><td>18 h – 20 h</td></tr>
</table>

caption donne un titre explicite au tableau. Il se place immédiatement après la balise ouvrante table et permet de comprendre la nature des données avant de les parcourir.

<table>
  <caption>Programme de la journée</caption>
  <tr><th>Horaire</th><th>Activité</th></tr>
</table>

thead regroupe les intitulés, tbody les données principales et tfoot les informations récapitulatives. Cette organisation améliore la lisibilité du code et facilite la mise en forme.

<table>
  <thead><tr><th>Tarif</th><th>Prix</th></tr></thead>
  <tbody><tr><td>Étudiant</td><td>10 €</td></tr></tbody>
  <tfoot><tr><td colspan="2">TVA incluse</td></tr></tfoot>
</table>

L'attribut scope précise si un élément th décrit une colonne ou une ligne. Les valeurs col et row permettent d'associer sans ambiguïté les en-têtes aux données.

<tr>
  <th scope="col">Horaire</th>
  <th scope="col">Activité</th>
</tr>
<tr>
  <th scope="row">09 h 00</th>
  <td>Accueil des participants</td>
</tr>

colspan permet à une cellule de s'étendre sur plusieurs colonnes. Il sert notamment à créer un intitulé commun ou une information de synthèse couvrant toute la largeur du tableau.

<tr>
  <th colspan="2">Matinée</th>
</tr>
<tr>
  <td>09 h 00</td><td>Conférence</td>
</tr>

rowspan permet à une cellule d'occuper plusieurs lignes. Il évite de répéter une même information lorsqu'elle s'applique à plusieurs entrées successives.

<tr>
  <th rowspan="2" scope="rowgroup">Salle A</th>
  <td>Atelier HTML</td>
</tr>
<tr><td>Atelier CSS</td></tr>

Un tableau accessible possède un titre, des en-têtes identifiés et une organisation simple. Chaque donnée doit pouvoir être reliée à sa ligne et à sa colonne sans dépendre uniquement de la présentation visuelle.

<table>
  <caption>Tarifs d'inscription</caption>
  <thead>
    <tr><th scope="col">Public</th><th scope="col">Prix</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Étudiant</th><td>10 €</td></tr>
  </tbody>
</table>

form regroupe les champs permettant de saisir et de transmettre des informations. Il peut contenir des libellés, des champs, des listes, des cases à cocher et des boutons.

<form action="traitement.php" method="post">
  <!-- Les champs du formulaire seront placés ici -->
  <button type="submit">Envoyer</button>
</form>

action indique l'adresse qui recevra les données. method définit leur mode de transmission : get les ajoute généralement à l'URL, tandis que post les place dans le corps de la requête.

<!-- Recherche visible dans l'URL -->
<form action="recherche.php" method="get">...</form>

<!-- Inscription envoyée dans le corps de la requête -->
<form action="inscription.php" method="post">...</form>

label indique l'information attendue. Son attribut for doit correspondre à l'id du champ afin d'améliorer la compréhension, la navigation et la zone cliquable.

<label for="nom">Nom complet</label>
<input type="text" id="nom" name="nom">

Les types text, email, number, date ou tel décrivent la nature de l'information attendue. Un type adapté facilite la saisie et autorise certains contrôles automatiques.

<label for="email">Adresse électronique</label>
<input type="email" id="email" name="email">

<label for="date">Date souhaitée</label>
<input type="date" id="date" name="date">

textarea permet de saisir un texte comportant plusieurs lignes. Contrairement à input, il possède une balise ouvrante et une balise fermante.

<label for="message">Votre message</label>
<textarea id="message" name="message" rows="6" cols="40"></textarea>

select crée une liste, les boutons radio imposent un choix unique et les cases à cocher permettent plusieurs réponses indépendantes. Le contrôle retenu doit refléter la logique de la question.

<label for="atelier">Atelier choisi</label>
<select id="atelier" name="atelier">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

<label><input type="checkbox" name="newsletter" value="oui">
  Recevoir la newsletter
</label>

name donne un nom à la donnée transmise et value en représente la valeur. Sans attribut name, la valeur saisie n'est normalement pas envoyée au serveur.

<label>
  <input type="radio" name="format" value="presentiel">
  Présentiel
</label>
<label>
  <input type="radio" name="format" value="distance">
  À distance
</label>

required, minlength, maxlength et pattern définissent des contraintes que le navigateur vérifie avant l'envoi. Elles améliorent l'expérience, sans remplacer la validation côté serveur.

<label for="code-postal">Code postal</label>
<input
  type="text"
  id="code-postal"
  name="code_postal"
  required
  minlength="5"
  maxlength="5"
  pattern="[0-9]{5}">

fieldset rassemble des champs appartenant au même ensemble logique et legend nomme ce groupe. Cette structure est particulièrement importante pour les choix multiples.

<fieldset>
  <legend>Mode de participation</legend>
  <label><input type="radio" name="mode" value="sur-place"> Sur place</label>
  <label><input type="radio" name="mode" value="distance"> À distance</label>
</fieldset>

video intègre une vidéo et source permet de proposer plusieurs fichiers. L'attribut controls donne accès aux commandes de lecture et track peut fournir des sous-titres.

<video controls width="640" poster="aperçu.jpg">
  <source src="presentation.mp4" type="video/mp4">
  <track src="sous-titres.vtt" kind="subtitles" srclang="fr" label="Français">
  Votre navigateur ne peut pas lire cette vidéo.
</video>

iframe affiche une ressource externe, comme une carte ou une vidéo. Son attribut title doit décrire le contenu et son utilisation doit tenir compte de la sécurité, des performances et des cookies tiers.

<iframe
  src="https://www.youtube-nocookie.com/embed/IDENTIFIANT"
  title="Présentation vidéo de l'événement"
  width="560"
  height="315"
  loading="lazy"
  allowfullscreen>
</iframe>

details crée une zone ouvrable sans JavaScript et summary en fournit l'intitulé visible. Ce composant convient aux questions fréquentes ou aux précisions secondaires.

<details>
  <summary>Dois-je apporter un ordinateur ?</summary>
  <p>Oui, avec un navigateur récent et un éditeur de texte.</p>
</details>

Le programme d'un événement constitue un cas pertinent de données tabulaires : chaque ligne représente une activité et chaque colonne son horaire, son lieu ou son intervenant. Le tableau doit rester compréhensible sans dépendre de son apparence.

Le formulaire collecte uniquement les informations nécessaires à la participation. Chaque champ possède un libellé, un nom et un type adaptés, tandis que les éventuels consentements restent distincts de l'inscription elle-même.

La FAQ répond aux interrogations pratiques sans surcharger la page, tandis qu'une vidéo peut présenter l'événement. Ces contenus complètent les informations principales sans les remplacer.

Le formulaire doit être testé avec des données valides, invalides et manquantes. Les champs obligatoires, les formats attendus et les messages du navigateur doivent être contrôlés avant la mise en ligne.

Tous les champs et boutons doivent être atteignables au clavier dans un ordre logique. Le focus doit rester visible et les libellés doivent expliquer clairement les données attendues.

Les outils du navigateur permettent d'examiner la structure interprétée. Il faut rechercher les balises mal fermées, les attributs manquants, les identifiants dupliqués et les associations incorrectes.