CHAPITRE 8 : LES TABLEAUX : PARTIE 1

Video du chapitre : chaine GeniusClassrooms

Un tableau, pour quoi faire ?

Un tableau sert à présenter des données : un emploi du temps, des résultats, un tarif. Il ne sert pas à construire la mise en page d'un site : cette pratique des années 2000 est abandonnée : aujourd'hui c'est le rôle du CSS.

1. Les trois balises fondamentales

Retenez la logique : un tableau contient des lignes, et chaque ligne contient des cellules. On construit toujours ligne par ligne, jamais colonne par colonne.

<table>
    <tr>
        <td>Awa</td>
        <td>18</td>
    </tr>
    <tr>
        <td>Brice</td>
        <td>20</td>
    </tr>
</table>

2. Les cellules d'en-tête : <th>

th signifie table header. Visuellement, le texte est en gras et centré. Mais l'essentiel est ailleurs : un <th> annonce au navigateur qu'il s'agit d'un intitulé. Un lecteur d'écran rappellera l'en-tête à chaque cellule : sans <th>, un tableau devient incompréhensible pour une personne aveugle.

<table>
    <tr>
        <th>Nom</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Awa</td>
        <td>18</td>
    </tr>
</table>

Préciser la portée avec scope

<th scope="col">Nom</th>   <!-- en-tete de colonne -->
<th scope="row">Lundi</th>  <!-- en-tete de ligne -->

3. Le titre du tableau : <caption>

Il se place juste après <table> et décrit le contenu.

<table>
    <caption>Resultats du premier semestre</caption>
    <tr>
        <th scope="col">Etudiant</th>
        <th scope="col">Note</th>
    </tr>
    <tr>
        <td>Awa</td>
        <td>16/20</td>
    </tr>
</table>

4. L'erreur à ne pas commettre

Chaque ligne doit comporter le même nombre de cellules. Une ligne à 3 cellules et la suivante à 2 produit un tableau déformé. Comptez vos <td> ligne par ligne : c'est la vérification à faire en premier quand un tableau s'affiche de travers.

À retenir

• <table> contient des <tr>, qui contiennent des <td> ou <th>
• On raisonne par lignes, jamais par colonnes
• <th> porte du sens, pas seulement du gras
• Toutes les lignes ont le même nombre de cellules