Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Tableaux

Les tableaux présentent les données dans un format structuré pour permettre aux utilisateurs de les parcourir et de les comparer.

Conseils

Les tableaux présentent des données dans un format tabulaire facile à parcourir pour les utilisateurs. Nous insérons les tableaux dans un conteneur pour nous assurer que les données complexes puissent défiler horizontalement à l’intérieur de la zone du tableau, sans avoir à mobiliser la page entière sur les écrans d’appareils mobiles.

Vous pouvez modifier l’alignement des données dans un tableau à l’aide de classes utilitaires. Il vous suffit d’appliquer les classes suivantes aux éléments td ou th :

Directives pour l’utilisation des tableaux :

À faire

  • Utilisez l’élément <th> pour créer des titres. Les titres doivent être utilisés pour nommer les colonnes ou les lignes.
  • Utilisez l’attribut scope pour associer une cellule de titre à une colonne ou à une rangée.
  • Si le tableau contient des données complexes, envisagez d’utiliser l’élément <caption>pour fournir une description aux utilisateurs de lecteurs d’écran.

À ne pas faire

  • N’utilisez pas de tableau pour créer une mise en page.
  • N'utilisez pas de tableaux pour créer une interface modifiable.
  • Ne placez pas de champs de formulaire dans un tableau.
  • N’utilisez pas de tableau s’il n’y a pas de données tabulaires.

Tableau

Description de la table qui est visuellement cachée mais sera lue à haute voix par les lecteurs d'écran.
En-tête En-tête En-tête
Cellule Cellule Cellule
Cellule Cellule Cellule
Cellule Cellule Cellule

HTML

<div class="gnb-table-container">
    
    <caption class="sr-only">Description de tableau masquée, mais lue à haute voix par les lecteurs d’écran.</caption>
    <table class="gnb-table">
        <thead>
            <tr>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
        </tbody>
    </table>
</div>

Table avec une largeur minimale

Dans certains cas, il convient de veiller à ce que le tableau ne soit pas trop écrasé sur les écrans de petite taille. Pour définir une largeur minimale, il vous suffit d’ajouter un style intraligne à l’élément <table>.

Description de tableau masquée, mais lue à haute voix par les lecteurs d’écran.
En-tête En-tête En-tête
Cellule Cellule Cellule
Cellule Cellule Cellule
Cellule Cellule Cellule

HTML

<div class="gnb-table-container">
    <table class="gnb-table" style="min-width: 800px;">
    <caption class="sr-only">Description de tableau masquée, mais lue à haute voix par les lecteurs d’écran.</caption>
    <thead>
        <tr>
            <th scope="col">En-tête</th>
            <th scope="col">En-tête</th>
            <th scope="col">En-tête</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cellule</td>
            <td>Cellule</td>
            <td>Cellule</td>
        </tr>
        <tr>
            <td>Cellule</td>
            <td>Cellule</td>
            <td>Cellule</td>
        </tr>
        <tr>
            <td>Cellule</td>
            <td>Cellule</td>
            <td>Cellule</td>
        </tr>
    </tbody>
    </table>
</div>

Table avec une colonne ayant une largeur minimale

Vous pouvez également appliquer un style intraligne à l’élément <td> pour contrôler la largeur d’une colonne particulière.

Description de tableau masquée, mais lue à haute voix par les lecteurs d’écran.
Colonne à laquelle une largeur minimale a été appliquée. En-tête En-tête
Cellule Cellule Cellule
Cellule Cellule Cellule
Cellule Cellule Cellule

HTML

<div class="gnb-table-container">
    <table class="gnb-table" style="min-width: 200px;">
    <caption class="sr-only">Description de tableau masquée, mais lue à haute voix par les lecteurs d’écran.</caption>
    <thead>
        <tr>
            <th scope="col" style="min-width: 200px;">Colonne avec une largeur min appliquée</th>
            <th scope="col">En-tête</th>
            <th scope="col">En-tête</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cellule</td>
            <td>Cellule</td>
            <td>Cellule</td>
        </tr>
        <tr>
            <td>Cellule</td>
            <td>Cellule</td>
            <td>Cellule</td>
        </tr>
        <tr>
            <td>Cellule</td>
            <td>Cellule</td>
            <td>Cellule</td>
        </tr>
    </tbody>
    </table>
</div>

Tableau à bandes

En-tête En-tête En-tête En-tête
Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule

HTML

<div class="gnb-table-container">
    <table class="gnb-table-striped">
        <thead>
            <tr>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau avec bordures

En-tête En-tête En-tête En-tête
Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule

HTML

<div class="gnb-table-container">
    <table class="gnb-table-bordered">
        <thead>
            <tr>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau avec bandes et bordures

En-tête En-tête En-tête En-tête
Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule
Cellule Cellule Cellule Cellule

HTML

<div class="gnb-table-container">
    <table class="gnb-table-bordered-striped">
        <thead>
            <tr>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
                <th scope="col">En-tête</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
            <tr>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
                <td>Cellule</td>
            </tr>
        </tbody>
    </table>
</div>