Lists and tables — HTML course

Listes à puces (non ordonnées)

La balise <ul> (unordered list) crée une liste à puces. Chaque élément est un <li> (list item).

Utilisez-la quand l'ordre n'a pas d'importance : une liste de courses, des compétences sur un CV, les ingrédients d'une recette.

Listes numérotées (ordonnées)

La balise <ol> (ordered list) crée une liste numérotée automatiquement. Même structure avec <li> à l'intérieur.

Utilisez-la quand l'ordre compte : les étapes d'une recette, un classement, un tutoriel pas-à-pas.

Listes imbriquées

On peut mettre une liste dans une liste. Il suffit de placer un <ul> ou <ol> à l'intérieur d'un <li>. Pratique pour des sous-catégories ou un menu de navigation à plusieurs niveaux.

Les tableaux HTML

Un tableau se construit avec plusieurs balises imbriquées :

<table> : le conteneur principal du tableau
<thead> : la zone d'en-tête (titres des colonnes)
<tbody> : le corps du tableau (les données)
<tr> : une ligne (table row)
<th> : une cellule d'en-tête (table header, en gras par défaut)
<td> : une cellule de données (table data)

Tableaux : à utiliser pour les données uniquement

Règle importante : les tableaux sont faits pour des données tabulaires, comme les comparaisons, statistiques, horaires, prix. Jamais pour la mise en page de votre site. Dans les années 2000, on utilisait des tableaux pour positionner le contenu. Aujourd'hui, c'est le rôle du CSS.

Bullet lists (unordered)

The <ul> tag (unordered list) creates a bulleted list. Each item is a <li> (list item).

Use it when order doesn't matter: a shopping list, skills on a resume, recipe ingredients.

Numbered lists (ordered)

The <ol> tag (ordered list) creates an automatically numbered list. Same structure with <li> inside.

Use it when order matters: recipe steps, rankings, step-by-step tutorials.

Nested lists

You can put a list inside a list. Just place a <ul> or <ol> inside a <li>. Handy for subcategories or multi-level navigation menus.

HTML tables

A table is built with several nested tags:

<table> — the main table container
<thead> — the header area (column titles)
<tbody> — the table body (the data)
<tr> — a row (table row)
<th> — a header cell (table header — bold by default)
<td> — a data cell (table data)

Tables: for data only

Important rule: tables are meant for tabular data — comparisons, statistics, schedules, prices. Never for page layout. In the 2000s, tables were used for positioning content. Today, that's CSS's job.

Essayez vous-même

<h1>Crêpes bretonnes</h1>

<h2>Ingrédients</h2>
<ul>
    <li>250g de farine</li>
    <li>4 oeufs</li>
    <li>50cl de lait</li>
    <li>1 pincée de sel</li>
    <li>50g de beurre fondu</li>
</ul>

<h2>Étapes</h2>
<ol>
    <li>Mélangez la farine et les oeufs</li>
    <li>Ajoutez le lait progressivement en fouettant</li>
    <li>Incorporez le beurre fondu et le sel</li>
    <li>Laissez reposer 1 heure au frigo</li>
    <li>Faites cuire dans une poêle chaude beurrée</li>
</ol>

<h2>Valeurs nutritionnelles (par crêpe)</h2>
<table>
    <thead>
        <tr>
            <th>Nutriment</th>
            <th>Quantité</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Calories</td>
            <td>120 kcal</td>
        </tr>
        <tr>
            <td>Protéines</td>
            <td>4g</td>
        </tr>
        <tr>
            <td>Glucides</td>
            <td>18g</td>
        </tr>
        <tr>
            <td>Lipides</td>
            <td>3g</td>
        </tr>
    </tbody>
</table>

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Crée-moi un tableau HTML de comparaison de 3 forfaits (Starter, Pro, Enterprise) avec prix, features, et un bouton par colonne. Utilise thead et tbody correctement.

Ré-explique sans regarder

Sans relire le tableau généré par l'IA : avec tes mots, à quoi servent <thead>, <tbody> et <th> dans un tableau bien structuré ?

Une bonne explication dit : <thead> regroupe la ligne de titres, <tbody> regroupe les lignes de données : c'est une séparation sémantique qui aide les lecteurs d'écran et permet de figer l'en-tête au défilement. <th> remplace <td> pour une cellule d'en-tête : il la met en gras par défaut mais surtout il annonce « ceci décrit la colonne », ce que <td> ne fait pas.

Exercice : Corrigez le code de l'IA

L'IA a généré ce tableau sans <thead> ni <tbody>, et a utilisé <td> au lieu de <th> pour les en-têtes. Ajoutez la bonne structure.

Corrigez le code

Accepter ou rejeter le code de l'IA

Tu as demandé à l'IA une mise en page « contenu à gauche, menu à droite ». Elle te propose ce code. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.

<table>
  <tr>
    <td>Contenu principal de la page</td>
    <td>Menu de navigation</td>
  </tr>
</table>

À rejeter. C'est l'anti-pattern des années 2000 : un <table> détourné pour positionner du contenu. Le tableau est réservé aux données tabulaires (prix, horaires, comparatifs) ; pour une mise en page, on utilise le CSS (Flexbox ou Grid) sur des balises sémantiques comme <main> et <nav>. Ici le code fonctionne visuellement, mais il ment sur le sens du contenu : un lecteur d'écran annoncera « tableau » à un utilisateur aveugle, et la page ne s'adaptera pas au mobile.

Rappel libre

Sans remonter dans la leçon : quelle est la différence entre <ul> et <ol>, et dans quel seul cas un <table> est-il justifié ?

<ul> est une liste non ordonnée (à puces), à utiliser quand l'ordre n'a pas d'importance ; <ol> est une liste ordonnée (numérotée automatiquement), à utiliser quand l'ordre compte (étapes, classement). Un <table> n'est justifié que pour des données tabulaires (prix, horaires, comparatifs), jamais pour la mise en page : ça, c'est le rôle du CSS.

<ul> crée une liste...

numérotée à puces de définitions

Quand faut-il utiliser un <table> ?

Pour mettre en page tout le site Pour afficher des données tabulaires (prix, horaires, comparatifs) Pour créer des colonnes

Quelle balise sert à définir un en-tête de colonne dans un tableau ?

<td> <th> <header>

Peut-on imbriquer une liste dans une autre liste ?

Non, c'est interdit Oui, on met un <ul> ou <ol> à l'intérieur d'un <li> Oui, on met un <li> dans un <li>

Next step

You can now organise your content into lists and tables. What's left is giving meaning to the overall structure: the next lesson explores semantic tags like header, nav, main and footer, the ones that tell the browser and Google what each area really represents.

Lesson 6: Semantic HTML →