Table

Présentation

Les tableaux TDS affichent des données structurées : listes de dossiers, résultats de recherche, données administratives. Ils sont accessibles et responsive par défaut.

Démo

Ouvrir le terrain de jeu complet →

Design

<!-- Lignes alternées -->
<table class="tds-table tds-table--striped">...</table>

<!-- Avec bordures -->
<table class="tds-table tds-table--bordered">...</table>

<!-- Compact (moins de padding) -->
<table class="tds-table tds-table--compact">...</table>

Code

Importation

@import "@tds-tchad/core/components/table/table.css";

Structure de base

<div class="tds-table-wrapper">
  <table class="tds-table">
    <caption>Liste des demandes en cours — Préfecture de N'Djamena</caption>
    <thead>
      <tr>
        <th scope="col">Référence</th>
        <th scope="col">Type</th>
        <th scope="col">Date</th>
        <th scope="col">Statut</th>
        <th scope="col" class="tds-table__actions">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>REF-2024-001234</code></td>
        <td>Carte nationale d'identité</td>
        <td>15 jan. 2024</td>
        <td data-status="warning"><span class="tds-badge tds-badge--warning">En cours</span></td>
        <td class="tds-table__actions">
          <a href="/dossier/001234" class="tds-link">Consulter</a>
        </td>
      </tr>
      <tr>
        <td><code>REF-2024-001198</code></td>
        <td>Acte de naissance</td>
        <td>8 jan. 2024</td>
        <td data-status="success"><span class="tds-badge tds-badge--success">Approuvé</span></td>
        <td class="tds-table__actions">
          <a href="/dossier/001198" class="tds-link">Consulter</a>
        </td>
      </tr>
      <tr>
        <td><code>REF-2024-001089</code></td>
        <td>Passeport</td>
        <td>3 jan. 2024</td>
        <td data-status="danger"><span class="tds-badge tds-badge--danger">Rejeté</span></td>
        <td class="tds-table__actions">
          <a href="/dossier/001089" class="tds-link">Consulter</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Accessibilité

Règles critiques

• Toujours utiliser <caption> pour décrire le contenu du tableau
• Utiliser scope="col" sur les <th> d’en-tête de colonne
• Utiliser scope="row" sur les <th> d’en-tête de ligne
• Ne pas utiliser de tableaux pour la mise en page — uniquement pour les données

<!-- Tableau avec en-têtes de ligne et colonne -->
<table class="tds-table">
  <caption>Tarifs des services administratifs 2024</caption>
  <thead>
    <tr>
      <th scope="col">Service</th>
      <th scope="col">Délai normal</th>
      <th scope="col">Délai urgent</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Carte d'identité</th>
      <td>15 jours — 2 500 FCFA</td>
      <td>5 jours — 7 500 FCFA</td>
    </tr>
    <tr>
      <th scope="row">Passeport</th>
      <td>30 jours — 25 000 FCFA</td>
      <td>10 jours — 50 000 FCFA</td>
    </tr>
  </tbody>
</table>