Listes et tableaux

Ce que tu vas apprendre

• Choisir entre une liste à puces, une liste numérotée et une liste de définitions.
• Construire un tableau avec en-têtes et légende.
• Fusionner des cellules et rendre un tableau compréhensible pour tous.

La liste à puces

<h2>Ingrédients</h2>
<ul>
  <li>200 g de farine</li>
  <li>100 g de beurre</li>
  <li>3 pommes</li>
</ul>

<ul> (unordered list, « liste non ordonnée ») contient des éléments <li> (list item). Utilise-la quand l'ordre des éléments n'a pas d'importance : les ingrédients, par exemple.

Seuls des <li> peuvent être placés directement dans un <ul>. Le texte libre doit aller à l'intérieur d'un <li>.

La liste numérotée

<h2>Préparation</h2>
<ol>
  <li>Mélange la farine et le beurre.</li>
  <li>Étale la pâte dans un moule.</li>
  <li>Dispose les pommes et enfourne.</li>
</ol>

<ol> (ordered list) numérote ses éléments. Choisis-la quand l'ordre compte : des étapes à suivre, un classement.

Deux attributs utiles : start="3" commence à un autre nombre, et reversed compte à rebours.

Les listes imbriquées

Une liste peut en contenir une autre. Place la sous-liste à l'intérieur d'un <li>, avant sa fermeture :

<ul>
  <li>Pâte
    <ul>
      <li>Farine</li>
      <li>Beurre</li>
    </ul>
  </li>
  <li>Garniture</li>
</ul>

Une erreur courante est de fermer le <li> avant la sous-liste. Garde en tête l'imbrication vue au premier chapitre.

La liste de définitions

Pour associer un terme à sa description, utilise <dl> avec <dt> (le terme) et <dd> (la description).

<dl>
  <dt>Blanchir</dt>
  <dd>Plonger brièvement un aliment dans l'eau bouillante.</dd>
  <dt>Réduire</dt>
  <dd>Faire évaporer un liquide pour l'épaissir.</dd>
</dl>

Elle convient à un glossaire, ou à des paires « nom : valeur » comme la durée et la difficulté d'une recette.

Le tableau

Un tableau présente des données à deux dimensions : des lignes et des colonnes. Ne l'utilise jamais pour mettre en page un site, uniquement pour de vraies données.

<table>
  <caption>Temps de cuisson</caption>
  <thead>
    <tr>
      <th scope="col">Recette</th>
      <th scope="col">Température</th>
      <th scope="col">Durée</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Tarte aux pommes</th>
      <td>180 °C</td>
      <td>35 min</td>
    </tr>
  </tbody>
</table>

Les éléments d'un tableau

Les trois zones <thead>, <tbody> et <tfoot> ne sont pas obligatoires. Elles clarifient le code et permettent de styler chaque partie en CSS.

Rendre un tableau accessible

L'attribut scope précise ce qu'un <th> décrit :

• scope="col" : il décrit toute la colonne en dessous ;
• scope="row" : il décrit toute la ligne vers la droite.

Grâce à lui, un lecteur d'écran annonce « Durée, 35 min » en lisant une cellule, au lieu de réciter des valeurs sans contexte. Le <caption> donne le sujet du tableau avant même qu'on le lise.

Fusionner des cellules

Deux attributs étendent une cellule :

• colspan="2" : la cellule occupe deux colonnes ;
• rowspan="2" : la cellule occupe deux lignes.

<tr>
  <td colspan="2">Cuisson au four</td>
  <td>35 min</td>
</tr>

La ligne doit toujours compter le même nombre de colonnes au total. Ici, la cellule fusionnée en prend deux, donc il n'y a plus qu'une cellule après elle pour une table à trois colonnes.

Liste ou tableau ?

Pose-toi une question : mes données ont-elles plusieurs colonnes qui se lisent ensemble ?

• Une seule série d'éléments : une liste.
• Des éléments décrits par plusieurs critères (recette, température, durée) : un tableau.

À retenir

• <ul> pour une liste sans ordre, <ol> pour une liste ordonnée, <dl> pour des termes et leurs définitions.
• Seuls des <li> vont directement dans <ul> et <ol>, et une sous-liste se place dans un <li>.
• Un tableau est fait de <tr>, <th> et <td>, avec un <caption> qui le titre.
• scope="col" et scope="row" relient chaque cellule à son en-tête.
• Un tableau sert aux données, jamais à la mise en page.