Retour

Tableaux (table)

Les tableaux sont utilisés pour organiser et afficher les informations d'un jeu de données.

Documentation

Tableau par défaut

Caption du tableau (accessibilité)
th0 th1 th2 th3 th4 th5
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum do Lorem ipsum dolor sit amet, consectetur adipisc Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, c Lorem ipsum dolor sit amet, consect Lorem ipsum dolor sit amet, consectetur ad Lorem Lorem ipsum dolor sit amet, cons Lorem ipsum
Lorem ip Lorem ipsum dolor sit amet, co Lorem ipsum dolor sit amet, consectetur ad Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, conse Lorem i 

<div class="fr-table">
    <table>
        <caption>Caption du tableau (accessibilité)</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
                <th scope="col"> th3 </th>
                <th scope="col"> th4 </th>
                <th scope="col"> th5 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>L</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] e</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit </td>
                <td></td>
            </tr>
            <tr>
                <td>Lorem [...] </td>
                <td>Lorem [...] el</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem </td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau avec bordure

Caption du tableau (accessibilité)
th0 th1 th2 th3 th4 th5
Lorem ipsum dolor sit am Lorem ipsum dolor si Lorem Lorem Lorem ipsum dolor s Lorem ipsum dolor sit amet, consecte
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adi Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adi Lore 

<div class="fr-table fr-table--bordered">
    <table>
        <caption>Caption du tableau (accessibilité)</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
                <th scope="col"> th3 </th>
                <th scope="col"> th4 </th>
                <th scope="col"> th5 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] e</td>
                <td>Lo</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit </td>
                <td>Lorem [...</td>
                <td>Lorem [...] elit</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...]</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>L</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau non scrollable

Caption tableau non scrollable
th0 th1 th2 th3 th4 th5
Lore Lorem ipsu Lorem ipsum dolor sit amet, c Lorem ipsum dolor sit amet, co Lor Lorem i
Lorem ipsum dolor sit amet, con Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipis Lorem Lorem ipsum dolor sit amet, consectetur adip Lorem ipsum dolor sit 

<div class="fr-table fr-table--no-scroll">
    <table>
        <caption>Caption tableau non scrollable</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
                <th scope="col"> th3 </th>
                <th scope="col"> th4 </th>
                <th scope="col"> th5 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem [...] elit</td>
                <td>Lorem [...] e</td>
                <td>Lorem [...] </td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
            <tr>
                <td>Lorem [...] eli</td>
                <td>Lorem [...] elit ut.</td>
                <td></td>
                <td>Lorem [...] elit u</td>
                <td>Lorem [...] elit u</td>
                <td>Lorem </td>
            </tr>
        </tbody>
    </table>
</div>

Tableau colonnes fixées (layout-fixed)

Caption tableau fixé
th0 th1 th2
Lorem ipsum dolor sit amet Lorem ipsum dolo Lorem ipsum dolor sit amet, consectetur a
Lorem Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur a 

<div class="fr-table fr-table--layout-fixed">
    <table>
        <caption>Caption tableau fixé</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [</td>
            </tr>
            <tr>
                <td>L</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau caption invisible

Caption cachée
th0 th1 th2 th3 th4 th5
Lorem ipsum dolor sit amet, consecte Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur ad Lorem ipsum dolor sit amet, consectetur adipisci Lorem ipsum dolo Lorem ipsum d
Lorem ipsum dolor s Lorem ipsum do Lorem ipsum dolor sit amet, consectetur adipis Lorem ipsum d Lorem ipsum dolor sit amet, consectetur L 

<div class="fr-table fr-table--no-caption">
    <table>
        <caption>Caption cachée</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
                <th scope="col"> th3 </th>
                <th scope="col"> th4 </th>
                <th scope="col"> th5 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...]</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [</td>
                <td>Lor</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau caption Bottom

Caption en bas
th0 th1 th2 th3 th4 th5
L Lorem ipsum dolor sit amet, co Lorem i Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, conse Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consec Lorem ip Lorem ipsum dolor sit amet, c Lorem ipsum dolor sit amet, co Lorem ipsum dolor sit amet, consectetu 

<div class="fr-table fr-table--caption-bottom">
    <table>
        <caption>Caption en bas</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
                <th scope="col"> th3 </th>
                <th scope="col"> th4 </th>
                <th scope="col"> th5 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Lorem [...]</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...]</td>
            </tr>
            <tr>
                <td>Lorem [...] elit</td>
                <td>Lorem</td>
                <td>Lorem [...] elit ut</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau accentué

Caption du tableau (accessibilité)
th0 th1 th2 th3 th4 th5
Lorem ipsum dolor sit amet, co Lorem i Lorem ipsum dolor sit amet, consectetur adipisc Lorem ipsum dolor sit amet, consectetur adipis Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit am Lorem ipsum dolor Lorem ipsum dolor sit amet, conse Lorem ipsum dolor sit
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscin Lorem ipsum dolor sit ame Lorem ipsum Lorem ipsum dolor sit amet, consec Lorem ipsum dolor 

<div class="fr-table fr-table--green-emeraude">
    <table>
        <caption>Caption du tableau (accessibilité)</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
                <th scope="col"> th3 </th>
                <th scope="col"> th4 </th>
                <th scope="col"> th5 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] e</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...]</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit u</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] eli</td>
                <td>Lorem [..</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau accentué avec bordure

Caption du tableau (accessibilité)
th0 th1 th2 th3 th4 th5
Lorem ipsum dolor sit amet, consectetur ad Lorem ipsu Lorem ipsum dolor sit amet, consectetu Lorem ipsum dolor sit ame Lorem ipsum dolo Lorem ipsu
Lorem ipsum dolor sit amet, consectetur adipisc Lorem ipsum dolor sit amet, conse Lorem ipsum Lorem ipsum dolor sit amet, conse Lorem ip Lorem ipsum dolor sit
Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adip Lorem ipsum dolor sit amet, consectetur adipisc Lorem ipsum dolor sit amet, consectetur adipisc Lor Lorem ipsum dolor sit amet, cons 

<div class="fr-table fr-table--green-emeraude fr-table--bordered">
    <table>
        <caption>Caption du tableau (accessibilité)</caption>
        <thead>
            <tr>
                <th scope="col"> th0 </th>
                <th scope="col"> th1 </th>
                <th scope="col"> th2 </th>
                <th scope="col"> th3 </th>
                <th scope="col"> th4 </th>
                <th scope="col"> th5 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem [.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit u</td>
                <td>Lorem [...] elit </td>
                <td>Lorem [...] elit ut.</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit u</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem</td>
            </tr>
            <tr>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit </td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
                <td>Lorem [...] elit ut.</td>
            </tr>
        </tbody>
    </table>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.