Aller au contenu principal

Module HTML.6 – Listes & tableaux

Objectif​

Maîtriser les listes (<ul>, <ol>, <li>) et les tableaux (<table>, <thead>, <tbody>) avec les bonnes pratiques pour structurer des données de manière accessible et sémantique.

Théorie​

Listes non ordonnées (<ul>)​

Syntaxe :

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

Utilisation :

  • Menu de navigation
  • Liste d'éléments sans ordre particulier
  • Puces

Listes imbriquées :

<ul>
    <li>Élément 1</li>
    <li>Élément 2
        <ul>
            <li>Sous-élément 2.1</li>
            <li>Sous-élément 2.2</li>
        </ul>
    </li>
    <li>Élément 3</li>
</ul>

Listes ordonnées (<ol>)​

Syntaxe :

<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ol>

Attributs :

<!-- Commencer à 5 -->
<ol start="5">
    <li>Élément 5</li>
    <li>Élément 6</li>
</ol>

<!-- Ordre inversé -->
<ol reversed>
    <li>Élément 3</li>
    <li>Élément 2</li>
    <li>Élément 1</li>
</ol>

<!-- Type de numérotation -->
<ol type="A">
    <li>Élément A</li>
    <li>Élément B</li>
</ol>

Types :

  • 1 : Chiffres (défaut)
  • A : Lettres majuscules
  • a : Lettres minuscules
  • I : Chiffres romains majuscules
  • i : Chiffres romains minuscules

Listes de description (<dl>)​

Syntaxe :

<dl>
    <dt>Terme 1</dt>
    <dd>Définition 1</dd>
    <dt>Terme 2</dt>
    <dd>Définition 2</dd>
</dl>

Utilisation :

  • Glossaires
  • Définitions
  • Métadonnées

Tableaux : Structure de base​

Structure minimale :

<table>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
</table>

Éléments :

  • <table> : Conteneur du tableau
  • <tr> : Ligne (table row)
  • <td> : Cellule de données (table data)
  • <th> : Cellule d'en-tête (table header)

Tableaux : Structure complète​

Structure recommandée :

<table>
    <caption>Titre du tableau</caption>
    <thead>
        <tr>
            <th>Colonne 1</th>
            <th>Colonne 2</th>
            <th>Colonne 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Donnée 1</td>
            <td>Donnée 2</td>
            <td>Donnée 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td colspan="2">100</td>
        </tr>
    </tfoot>
</table>

Éléments :

  • <caption> : Titre du tableau
  • <thead> : En-tête
  • <tbody> : Corps
  • <tfoot> : Pied

Attributs des cellules​

colspan : Fusionner colonnes​

<tr>
    <td colspan="2">Cellule sur 2 colonnes</td>
    <td>Cellule normale</td>
</tr>

rowspan : Fusionner lignes​

<tr>
    <td rowspan="2">Cellule sur 2 lignes</td>
    <td>Cellule 1</td>
</tr>
<tr>
    <td>Cellule 2</td>
</tr>

scope : Portée des en-têtes​

<thead>
    <tr>
        <th scope="col">Nom</th>
        <th scope="col">Âge</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">Jean</th>
        <td>30</td>
    </tr>
</tbody>

Valeurs :

  • col : En-tête de colonne
  • row : En-tête de ligne
  • colgroup : Groupe de colonnes
  • rowgroup : Groupe de lignes

Accessibilité des tableaux​

Bonnes pratiques :

  1. Utiliser <caption> pour le titre
  2. Utiliser <th> pour les en-têtes
  3. Utiliser scope sur les <th>
  4. Utiliser <thead>, <tbody>, <tfoot>
  5. Éviter les tableaux pour la mise en page (utiliser CSS)

Exemple accessible :

<table>
    <caption>Liste des étudiants</caption>
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Prénom</th>
            <th scope="col">Note</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Dupont</th>
            <td>Jean</td>
            <td>15/20</td>
        </tr>
    </tbody>
</table>

Exercices guidés​

Exercice 1 : Listes de base​

Créez :

  • Une liste non ordonnée avec 5 éléments
  • Une liste ordonnée avec 5 éléments
  • Une liste de description avec 3 termes

Exercice 2 : Listes imbriquées​

Créez une liste imbriquée :

  • Menu principal avec sous-menus
  • Utilisez <ul> et <ol> imbriqués

Exercice 3 : Tableau simple​

Créez un tableau avec :

  • 3 colonnes
  • 4 lignes de données
  • En-têtes avec <th>

Exercice 4 : Tableau complet​

Créez un tableau avec :

  • <caption>
  • <thead>, <tbody>, <tfoot>
  • scope sur les en-têtes
  • Fusion de cellules (colspan/rowspan)

Exercice 5 : Tableau accessible​

Créez un tableau accessible avec :

  • Toutes les bonnes pratiques
  • Testez avec un screen reader (si possible)

❌ Erreurs fréquentes​

Erreur 1 : Utiliser des divs pour les listes​

❌ Mauvais :

<div class="liste">
    <div>Élément 1</div>
    <div>Élément 2</div>
</div>

✅ Bon :

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

Pourquoi : Sémantique et accessibilité.

Erreur 2 : Tableaux pour la mise en page​

❌ Mauvais :

<table>
    <tr>
        <td>Colonne gauche</td>
        <td>Colonne droite</td>
    </tr>
</table>

✅ Bon :

<div class="container">
    <div class="colonne-gauche">Colonne gauche</div>
    <div class="colonne-droite">Colonne droite</div>
</div>

Pourquoi : Utiliser CSS pour la mise en page, pas les tableaux.

Erreur 3 : Oublier les en-têtes de tableau​

❌ Mauvais :

<table>
    <tr>
        <td>Nom</td>
        <td>Âge</td>
    </tr>
</table>

✅ Bon :

<table>
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
        </tr>
    </thead>
</table>

Pourquoi : Accessibilité (screen readers).

Erreur 4 : Pas de caption​

❌ Mauvais :

<table>
    <thead>...</thead>
</table>

✅ Bon :

<table>
    <caption>Liste des étudiants</caption>
    <thead>...</thead>
</table>

Pourquoi : Contexte pour les screen readers.

Erreur 5 : Oublier scope​

❌ Mauvais :

<th>Nom</th>

✅ Bon :

<th scope="col">Nom</th>

Pourquoi : Indique la portée de l'en-tête.

🚀 Mini-projet​

Mission : Créer un tableau de données complet

Créez une page tableau.html avec :

Contenu :

  1. Un tableau avec <caption>
  2. Structure complète (<thead>, <tbody>, <tfoot>)
  3. En-têtes avec scope
  4. Fusion de cellules (colspan/rowspan)
  5. Données réalistes (ex: notes d'étudiants, budget, etc.)

Accessibilité :

  • Toutes les bonnes pratiques
  • Testez avec navigation clavier
  • Vérifiez la structure sémantique

Critères :

  • ✅ Structure de tableau complète
  • ✅ Accessibilité (caption, scope, th)
  • ✅ Fusion de cellules appropriée
  • ✅ Données cohérentes

Objectif : Maîtriser les listes et tableaux de manière professionnelle et accessible.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les listes, tableaux et avez créé un tableau accessible complet.