HTML · Leçon 4

Listes & tableaux

Pour organiser l'information : des listes pour les énumérations, des tableaux pour les données en lignes et colonnes.

Les listes

<ul>

Unordered list : liste à puces, l'ordre n'a pas d'importance.

<ol>

Ordered list : liste numérotée, l'ordre compte.

<li>

List item : un élément de la liste (dans ul ou ol).

Essaie Ajoute reversed ou start="5" à la balise <ol>.

Les tableaux

Un tableau se construit ligne par ligne (tr), puis cellule par cellule (th pour un en-tête, td pour une donnée).

table
├── caption        titre du tableau
├── thead          zone d'en-tête
│   └── tr → th, th, th
└── tbody          zone des données
    ├── tr → td, td, td
    └── tr → td, td, td

colspan="2" fusionne 2 colonnes, rowspan="2" fusionne 2 lignes.

Attention Les tableaux servent aux données, jamais à la mise en page (on utilisera le CSS pour ça).

Quelle balise représente une ligne de tableau ?

  1. <td>
  2. <tr>
  3. <th>
  4. <li>

tr = table row. td et th sont des cellules, à l'intérieur d'une ligne.

À toi de jouer

La liste de courses

  • Une liste à puces avec 2 catégories : « Fruits » et « Légumes ».
  • Chaque catégorie contient sa propre sous-liste d'au moins 2 éléments.
  • En dessous, une liste numérotée « à faire » d'au moins 3 étapes.
IndiceListe à puces : <ul> avec un <li> par élément. Au premier niveau, il n’y a que 2 li : « Fruits » et « Légumes ».
IndiceUne sous-liste se place à l’intérieur du <li>, après le texte et avant </li>. Pour « À faire », utilise <ol> (numérotée).
IndiceLa catégorie « Fruits » complète :
<ul>
  <li>Fruits
    <ul>
      <li>Pommes</li>
      <li>Bananes</li>
    </ul>
  </li>
  <li>Légumes ...</li>
</ul>

L'emploi du temps

Construis ce tableau :

Mon planning
JourMatinAprès-midi
LundiMathsSport
MardiAnglaisHistoire
MercrediSortie scolaire
IndiceChaque ligne du tableau est un <tr> et chaque case un <td>. Il te faut 3 lignes dans le <tbody>.
IndiceLigne du lundi : <tr><td>Lundi</td><td>Maths</td><td>Sport</td></tr>. Mardi suit le même modèle.
IndiceMercredi n’a que 2 cases : la deuxième s’étale sur 2 colonnes avec <td colspan="2">Sortie scolaire</td>.

À retenir