PhpBB Lab Académie

Reconnaître les situations où un tableau HTML est réellement adapté, construire un tableau simple avec table, caption, thead, tbody, tr, th et td, puis associer correctement les en-têtes de lignes et de colonnes avec scope afin de rendre les données plus compréhensibles, notamment avec un lecteur d’écran.

Nous allons apprendre les tableaux sans les utiliser pour mettre la page en forme

Votre petit site possède maintenant :

- plusieurs pages reliées entre elles ;
- un en-tête ;
- une navigation ;
- un contenu principal ;
- un pied de page ;
- des sections ;
- des articles ;
- une hiérarchie de titres cohérente.

Nous allons aujourd’hui ajouter un type de contenu différent :

un tableau de données

Mais il y a une règle importante à comprendre avant d’écrire la première balise :

un tableau HTML sert à représenter des données qui ont une relation en lignes et en colonnes.

Nous ne l’utiliserons pas simplement pour aligner du contenu sur l’écran.

1. Quand un tableau est-il adapté ?

Regardez ces informations :

Accueil
index.html
Présenter le site

À propos
apropos.html
Présenter le projet

Contact
contact.html
Fournir les informations de contact

Nous pouvons reconnaître trois propriétés pour chaque page :

nom de la page
nom du fichier
rôle de la page

Ces données peuvent être organisées en lignes et en colonnes.

Par exemple :

Page       Fichier        Rôle
Accueil     index.html      Présenter le site
À propos    apropos.html    Présenter le projet
Contact     contact.html    Fournir les informations de contact

Ici, un tableau est pertinent.

2. Quand un tableau n’est-il pas adapté ?

Reprenons notre navigation :

Accueil
À propos
Contact

Ces éléments forment une liste de liens.

Nous avons déjà appris une structure adaptée :

<nav>
    <ul>
        ...
    </ul>
</nav>

Nous n’avons aucune raison de transformer cette navigation en tableau.

Même chose pour une procédure :

Modifier
Enregistrer
Actualiser
Vérifier

Cette suite possède un ordre.

Une liste

ol

est donc adaptée.

Retenez :

tableau = données liées par des lignes et des colonnes
liste = série d’éléments
nav = groupe important de liens de navigation

3. Ne pas utiliser table pour fabriquer une mise en page

Autrefois, des tableaux étaient parfois utilisés pour placer :

menu à gauche
contenu au centre
informations à droite

Ce n’est pas le rôle d’un tableau HTML.

La disposition visuelle sera étudiée plus tard avec CSS.

Nous n’écrirons donc pas un tableau uniquement pour essayer de positionner des blocs sur la page.

Encore une fois :

HTML = sens et structure
CSS = présentation et disposition

4. L’élément table

L’élément qui contient un tableau est :

table

Un tableau vide s’écrit :

<table>
</table>

Mais

table

ne suffit pas.

Nous devons ensuite décrire :

- le nom du tableau ;
- ses lignes ;
- ses cellules ;
- ses en-têtes.

Nous allons ajouter chaque partie progressivement.

5. Donner un nom au tableau avec caption

Un tableau doit pouvoir être identifié clairement.

Pour notre exemple, nous voulons présenter les pages de notre petit site.

Nous pouvons écrire :

<table>
    <caption>Pages de mon premier site HTML</caption>
</table>

L’élément :

caption

donne un titre ou une légende au tableau.

Il décrit ce que contient le tableau.

Cette information est utile pour tous les utilisateurs et particulièrement importante lorsqu’une personne navigue avec une technologie d’assistance.

Dans notre cours, nous placerons

caption

immédiatement après l’ouverture de

table

.

6. caption et h2 ne jouent pas le même rôle

Nous pouvons avoir :

<section>
    <h2>Les pages de mon site</h2>

    <table>
        <caption>Rôle des trois pages principales</caption>
        ...
    </table>
</section>

Le

h2

donne son titre à la section.

Le

caption

identifie précisément le tableau.

Les deux peuvent donc être utiles en même temps.

7. Une ligne utilise tr

Chaque ligne d’un tableau utilise :

tr

Le nom vient de :

table row

c’est-à-dire une ligne de tableau.

Par exemple :

<tr>
    ...
</tr>

Notre tableau possédera d’abord une ligne contenant les noms des colonnes.

Puis une ligne par page.

8. Une cellule de données utilise td

Une cellule contenant une donnée ordinaire utilise :

td

Par exemple :

<tr>
    <td>index.html</td>
    <td>Présenter le site</td>
</tr>

Ici, la ligne contient deux cellules de données.

Retenez :

tr = ligne
td = cellule de données

9. Une cellule d’en-tête utilise th

Certaines cellules ne sont pas de simples données.

Elles indiquent ce que signifient les autres cellules.

Nous utilisons alors :

th

Par exemple :

<tr>
    <th>Page</th>
    <th>Fichier</th>
    <th>Rôle</th>
</tr>

Ces trois cellules sont des en-têtes de colonnes.

Elles expliquent comment interpréter les données placées en dessous.

10. Pourquoi ne pas utiliser td pour les en-têtes ?

Nous pourrions écrire visuellement :

<td>Page</td>
<td>Fichier</td>
<td>Rôle</td>

Le navigateur afficherait du texte.

Mais nous perdrions l’information sémantique indiquant :

ces cellules sont des en-têtes

Nous utilisons donc

th

parce que ces cellules ont un rôle particulier.

Comme dans le reste du cours, nous choisissons la balise selon le sens.

11. Indiquer un en-tête de colonne avec scope="col"

Nous allons préciser que les trois en-têtes s’appliquent à leurs colonnes.

Nous écrivons :

<th scope="col">Page</th>
<th scope="col">Fichier</th>
<th scope="col">Rôle</th>

L’attribut :

scope="col"

signifie ici :

cet en-tête s’applique à la colonne

Dans un tableau simple, cela rend notre intention explicite.

12. Pourquoi scope est utile ?

Imaginez qu’un utilisateur de lecteur d’écran se trouve sur la cellule :

apropos.html

Cette donnée appartient à la colonne :

Fichier

Une structure correcte permet aux technologies d’assistance d’associer plus facilement la donnée à son en-tête.

Le tableau devient donc compréhensible même sans dépendre uniquement de sa présentation visuelle.

13. Ajouter un en-tête de ligne avec scope="row"

Dans notre tableau, le nom de chaque page identifie toute la ligne.

Nous pouvons donc utiliser :

<th scope="row">Accueil</th>

puis :

<td>index.html</td>
<td>Présenter le site</td>

La ligne complète est :

<tr>
    <th scope="row">Accueil</th>
    <td>index.html</td>
    <td>Présenter le site</td>
</tr>

Ici :

Accueil

est l’en-tête de la ligne.

14. Différence entre scope="col" et scope="row"

Retenez :

scope="col" = l’en-tête concerne une colonne
scope="row" = l’en-tête concerne une ligne

Dans notre tableau :

Page
Fichier
Rôle

sont des en-têtes de colonnes.

Et :

Accueil
À propos
Contact

seront des en-têtes de lignes.

15. Regrouper les en-têtes avec thead

Nous allons maintenant découvrir :

thead

Cet élément regroupe la partie du tableau qui contient les en-têtes de colonnes.

Exemple :

<thead>
    <tr>
        <th scope="col">Page</th>
        <th scope="col">Fichier</th>
        <th scope="col">Rôle</th>
    </tr>
</thead>

Vous pouvez lire cette structure ainsi :

thead
    tr
        th
        th
        th

16. Regrouper les données avec tbody

Les lignes de données peuvent être placées dans :

tbody

Exemple :

<tbody>
    <tr>
        <th scope="row">Accueil</th>
        <td>index.html</td>
        <td>Présenter le site</td>
    </tr>
</tbody>

Nous séparons ainsi clairement :

thead = en-têtes du tableau
tbody = corps contenant les données

17. Construire le tableau complet

Nous pouvons maintenant assembler toutes les parties :

<table>
    <caption>Pages de mon premier site HTML</caption>

    <thead>
        <tr>
            <th scope="col">Page</th>
            <th scope="col">Fichier</th>
            <th scope="col">Rôle</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Accueil</th>
            <td>index.html</td>
            <td>Présenter le site</td>
        </tr>
        <tr>
            <th scope="row">À propos</th>
            <td>apropos.html</td>
            <td>Présenter le projet</td>
        </tr>
        <tr>
            <th scope="row">Contact</th>
            <td>contact.html</td>
            <td>Fournir les informations de contact</td>
        </tr>
    </tbody>
</table>

Vous venez de créer un tableau sémantique simple et complet.

18. Lire une cellule grâce à sa ligne et sa colonne

Prenons :

apropos.html

Pour comprendre cette cellule, nous utilisons :

- l’en-tête de colonne :

Fichier

;
- l’en-tête de ligne :

À propos

.

La relation peut être lue comme :

Page : À propos
Fichier : apropos.html

C’est précisément ce qui distingue un tableau d’une simple succession de textes.

Chaque cellule prend son sens grâce à sa position dans une ligne et une colonne.

19. Ajouter le tableau à notre page

Dans

index.html

, à l’intérieur de

main

, vous pouvez créer une nouvelle section :

<section>
    <h2>Les pages de mon site</h2>
    <p>Mon petit site contient actuellement trois pages principales.</p>

    <table>
        <caption>Rôle des trois pages principales</caption>

        <thead>
            <tr>
                <th scope="col">Page</th>
                <th scope="col">Fichier</th>
                <th scope="col">Rôle</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th scope="row">Accueil</th>
                <td>index.html</td>
                <td>Présenter le site</td>
            </tr>
            <tr>
                <th scope="row">À propos</th>
                <td>apropos.html</td>
                <td>Présenter le projet</td>
            </tr>
            <tr>
                <th scope="row">Contact</th>
                <td>contact.html</td>
                <td>Fournir les informations de contact</td>
            </tr>
        </tbody>
    </table>
</section>

Cette section appartient au contenu principal de la page.

Son

h2

respecte donc la hiérarchie déjà apprise.

20. Un tableau n’a pas besoin d’être compliqué

HTML permet de créer des tableaux beaucoup plus complexes.

On peut rencontrer :

plusieurs niveaux d’en-têtes
cellules fusionnées
grands tableaux de données

Nous ne les abordons pas aujourd’hui.

Un tableau complexe demande aussi davantage d’attention pour rester compréhensible et accessible.

Nous commençons donc avec une structure simple.

21. Vérifier le tableau sans se fier uniquement aux bordures

Selon le navigateur, votre tableau peut apparaître avec très peu de bordures ou de mise en forme.

Ce n’est pas un problème.

Nous n’avons pas encore étudié CSS.

La qualité du tableau dépend d’abord de sa structure :

caption
thead
tbody
tr
th
td
scope

Pas de la présence de couleurs ou de traits autour des cellules.

22. Tester la logique du tableau

Pour vérifier votre tableau, posez-vous ces questions :

Le tableau représente-t-il réellement des données liées ?
Chaque colonne a-t-elle un sens précis ?
Chaque ligne représente-t-elle une entrée cohérente ?
Le tableau possède-t-il un caption clair ?
Les cellules d’en-tête utilisent-elles th ?
Les en-têtes de colonnes utilisent-ils scope="col" ?
Les en-têtes de lignes utilisent-ils scope="row" lorsque c’est pertinent ?

Si vous répondez oui, la structure est déjà solide.

23. Vérification avec un lecteur d’écran

Si vous utilisez un lecteur d’écran, parcourez le tableau cellule par cellule.

Selon votre lecteur d’écran, le navigateur et les réglages utilisés, vous pouvez entendre :

- le nom du tableau ;
- les informations sur les lignes et les colonnes ;
- les en-têtes associés aux cellules.

L’objectif est que vous puissiez comprendre une donnée comme :

apropos.html

sans perdre le contexte :

À propos
Fichier

24. Ce qu’il faut éviter

N’utilisez pas un tableau pour :

- aligner le menu à gauche et le contenu à droite ;
- créer artificiellement plusieurs colonnes visuelles ;
- remplacer une liste ;
- entourer du texte uniquement pour obtenir une grille.

Utilisez-le lorsque vos données possèdent une vraie relation tabulaire.

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- quand un tableau est pertinent ;
- pourquoi un tableau ne sert pas à fabriquer la mise en page ;
- le rôle de

table

;
- le rôle de

caption

;
- le rôle de

tr

;
- la différence entre

th

et

td

;
- le rôle de

thead

et

tbody

;
- la différence entre

scope="col"

et

scope="row"

;
- pourquoi les en-têtes sont importants pour comprendre les données, notamment avec les technologies d’assistance.

Dans la prochaine leçon, nous commencerons un nouveau chapitre consacré aux formulaires HTML accessibles.

Imaginons une page présentant les horaires d’une petite bibliothèque.

Les données sont :

Jour
Heure d’ouverture
Heure de fermeture

avec plusieurs jours.

Un tableau est adapté parce que chaque heure prend son sens grâce à la ligne du jour et à la colonne correspondante.

Nous pouvons écrire :

<table>
    <caption>Horaires de la bibliothèque</caption>

    <thead>
        <tr>
            <th scope="col">Jour</th>
            <th scope="col">Ouverture</th>
            <th scope="col">Fermeture</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Lundi</th>
            <td>09:00</td>
            <td>18:00</td>
        </tr>
        <tr>
            <th scope="row">Mardi</th>
            <td>09:00</td>
            <td>18:00</td>
        </tr>
    </tbody>
</table>

Jour

,

Ouverture

et

Fermeture

sont des en-têtes de colonnes.

Lundi

et

Mardi

identifient les lignes.

Une cellule comme

18:00

peut donc être comprise dans son contexte :

Mardi
Fermeture
18:00

Reprenez votre fichier

index.html

.

Conservez toute la structure déjà créée.

Dans

main

, ajoutez une nouvelle

section

.

1. Donnez à cette section le titre :

Les pages de mon site

2. Ajoutez un paragraphe d’introduction.

3. Créez un tableau avec :

table

4. Ajoutez le

caption

:

Rôle des trois pages principales

5. Créez une ligne d’en-têtes avec les trois colonnes :

Page
Fichier
Rôle

6. Utilisez

th

et

scope="col"

pour ces trois en-têtes.

7. Ajoutez ensuite trois lignes de données :

Accueil | index.html | Présenter le site
À propos | apropos.html | Présenter le projet
Contact | contact.html | Fournir les informations de contact

8. Pour le nom de chaque page, utilisez un en-tête de ligne :

th scope="row"

9. Pour le nom du fichier et le rôle, utilisez :

td

10. Regroupez la ligne d’en-têtes dans

thead

.

11. Regroupez les lignes de données dans

tbody

.

12. Enregistrez puis actualisez la page.

13. Si vous utilisez un lecteur d’écran, parcourez les cellules et vérifiez que les données restent compréhensibles dans leur contexte.

Pour terminer, répondez à cette question :

Utiliseriez-vous un tableau pour afficher les trois liens Accueil, À propos et Contact du menu principal ? Pourquoi ?

Un tableau HTML doit être utilisé lorsque les données possèdent une relation réelle en lignes et en colonnes.

L’élément principal est :

table

Le nom du tableau peut être donné avec :

caption

Une ligne utilise :

tr

Une cellule de données utilise :

td

Une cellule d’en-tête utilise :

th

Les en-têtes de colonnes peuvent utiliser :

scope="col"

Les en-têtes de lignes peuvent utiliser :

scope="row"

thead

regroupe la partie d’en-tête du tableau.

tbody

regroupe les lignes de données.

Exemple de structure :

<table>
    <caption>Nom du tableau</caption>

    <thead>
        <tr>
            <th scope="col">Colonne 1</th>
            <th scope="col">Colonne 2</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Ligne 1</th>
            <td>Donnée</td>
        </tr>
    </tbody>
</table>

Nous n’utilisons pas les tableaux pour créer une mise en page visuelle.

Une navigation reste une navigation, une liste reste une liste et un tableau sert à représenter des données tabulaires.

Une bonne association entre les en-têtes et les données améliore aussi la compréhension du tableau avec les technologies d’assistance.

Dans la prochaine leçon, nous commencerons à créer des formulaires HTML accessibles.