Aller au contenu
BDU Cauriv0.1.0
Contenu

Tableaux

Ajoutez .table à un élément table pour obtenir un style lisible, puis combinez les variantes : rayures, survol, bordures, tailles et couleurs.

Tableau de base#

Le tableau occupe toute la largeur disponible. Utilisez thead, tbody et des cellules th avec scope pour que la structure soit comprise par les lecteurs d’écran.

Date Libellé Montant (FCFA)
02/04 Virement salaire 450 000
05/04 Paiement par carte -32 500
09/04 Mensualité du prêt -85 000 
<table class="table">
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Libellé</th>
      <th scope="col" class="text-end">Montant (FCFA)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">02/04</th>
      <td>Virement salaire</td>
      <td class="text-end">450 000</td>
    </tr>
    <tr>
      <th scope="row">05/04</th>
      <td>Paiement par carte</td>
      <td class="text-end">-32 500</td>
    </tr>
    <tr>
      <th scope="row">09/04</th>
      <td>Mensualité du prêt</td>
      <td class="text-end">-85 000</td>
    </tr>
  </tbody>
</table>

Lignes rayées#

.table-striped colore une ligne sur deux dans le corps du tableau. .table-striped-columns fait la même chose pour les colonnes ; les deux se combinent.

AgenceVilleDistributeurs
PlateauAbidjan3
CocodyAbidjan2
Bouaké centreBouaké2
San-PédroSan-Pédro1
ProduitTauxPlafond
Livret jeune3,5 %5 000 000 FCFA
Livret classique3 %15 000 000 FCFA
 
<table class="table table-striped">
  <thead>
    <tr><th scope="col">Agence</th><th scope="col">Ville</th><th scope="col">Distributeurs</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Plateau</th><td>Abidjan</td><td>3</td></tr>
    <tr><th scope="row">Cocody</th><td>Abidjan</td><td>2</td></tr>
    <tr><th scope="row">Bouaké centre</th><td>Bouaké</td><td>2</td></tr>
    <tr><th scope="row">San-Pédro</th><td>San-Pédro</td><td>1</td></tr>
  </tbody>
</table>
<table class="table table-striped-columns mb-0">
  <thead>
    <tr><th scope="col">Produit</th><th scope="col">Taux</th><th scope="col">Plafond</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Livret jeune</th><td>3,5 %</td><td>5 000 000 FCFA</td></tr>
    <tr><th scope="row">Livret classique</th><td>3 %</td><td>15 000 000 FCFA</td></tr>
  </tbody>
</table>

Survol et ligne active#

.table-hover met en évidence la ligne sous la souris. .table-active surligne en permanence une ligne, une cellule ou le tableau entier, par exemple pour marquer la ligne sélectionnée.

CartePlafond de retraitStatut
Visa Classic300 000 FCFAActive
Visa Gold800 000 FCFASélectionnée
Prépayée100 000 FCFAActive
 
<table class="table table-hover">
  <thead>
    <tr><th scope="col">Carte</th><th scope="col">Plafond de retrait</th><th scope="col">Statut</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Visa Classic</th><td>300 000 FCFA</td><td>Active</td></tr>
    <tr class="table-active"><th scope="row">Visa Gold</th><td>800 000 FCFA</td><td>Sélectionnée</td></tr>
    <tr><th scope="row">Prépayée</th><td>100 000 FCFA</td><td>Active</td></tr>
  </tbody>
</table>

Couleurs contextuelles#

Les classes .table-primary, -secondary, -success, -info, -warning, -danger, -light et -dark colorent un tableau, une ligne ou une cellule. Texte et fond sont déjà assortis pour garder un bon contraste. La couleur seule ne porte pas le sens : ajoutez toujours un texte.

PrêtÉchéanceÉtat
Prêt auto05/04Payé
Prêt immobilier10/04À payer cette semaine
Crédit conso28/03En retard
Avance salaire 15/04 Programmé 
<table class="table">
  <thead>
    <tr><th scope="col">Prêt</th><th scope="col">Échéance</th><th scope="col">État</th></tr>
  </thead>
  <tbody>
    <tr class="table-success"><th scope="row">Prêt auto</th><td>05/04</td><td>Payé</td></tr>
    <tr class="table-warning"><th scope="row">Prêt immobilier</th><td>10/04</td><td>À payer cette semaine</td></tr>
    <tr class="table-danger"><th scope="row">Crédit conso</th><td>28/03</td><td>En retard</td></tr>
    <tr>
      <th scope="row">Avance salaire</th>
      <td class="table-info">15/04</td>
      <td>Programmé</td>
    </tr>
  </tbody>
</table>

En-tête coloré#

Appliquez .table-light ou .table-dark à un thead pour distinguer l’en-tête. .table-dark sur le tableau entier assombrit tout le tableau.

ProduitFrais
Compte courant2 000 FCFA / mois
Carte Visa Classic12 000 FCFA / an
ProduitFrais
Compte courant2 000 FCFA / mois
Carte Visa Classic12 000 FCFA / an
 
<table class="table mb-3">
  <thead class="table-dark">
    <tr><th scope="col">Produit</th><th scope="col">Frais</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Compte courant</th><td>2 000 FCFA / mois</td></tr>
    <tr><th scope="row">Carte Visa Classic</th><td>12 000 FCFA / an</td></tr>
  </tbody>
</table>
<table class="table table-dark mb-0">
  <thead>
    <tr><th scope="col">Produit</th><th scope="col">Frais</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Compte courant</th><td>2 000 FCFA / mois</td></tr>
    <tr><th scope="row">Carte Visa Classic</th><td>12 000 FCFA / an</td></tr>
  </tbody>
</table>

Bordures#

.table-bordered ajoute une bordure autour de chaque cellule ; .table-borderless les retire. Changez la couleur des bordures avec les utilitaires border-*.

PlafondMontant
Virement par jour2 000 000 FCFA
Retrait par semaine500 000 FCFA
PlafondMontant
Virement par jour2 000 000 FCFA
Retrait par semaine500 000 FCFA
 
<table class="table table-bordered border-primary">
  <thead>
    <tr><th scope="col">Plafond</th><th scope="col">Montant</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Virement par jour</th><td>2 000 000 FCFA</td></tr>
    <tr><th scope="row">Retrait par semaine</th><td>500 000 FCFA</td></tr>
  </tbody>
</table>
<table class="table table-borderless mb-0">
  <thead>
    <tr><th scope="col">Plafond</th><th scope="col">Montant</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Virement par jour</th><td>2 000 000 FCFA</td></tr>
    <tr><th scope="row">Retrait par semaine</th><td>500 000 FCFA</td></tr>
  </tbody>
</table>

Tableau compact#

.table-sm réduit le remplissage des cellules de moitié (de 0.5rem à 0.25rem) : pratique pour de longs relevés.

N°MensualitéCapital restant
185 000 FCFA4 915 000 FCFA
285 000 FCFA4 830 000 FCFA
385 000 FCFA4 745 000 FCFA
 
<table class="table table-sm">
  <thead>
    <tr><th scope="col">N°</th><th scope="col">Mensualité</th><th scope="col">Capital restant</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>85 000 FCFA</td><td>4 915 000 FCFA</td></tr>
    <tr><th scope="row">2</th><td>85 000 FCFA</td><td>4 830 000 FCFA</td></tr>
    <tr><th scope="row">3</th><td>85 000 FCFA</td><td>4 745 000 FCFA</td></tr>
  </tbody>
</table>

Séparateur de groupes et pied de tableau#

.table-group-divider trace un trait plus épais au-dessus d’un groupe (thead, tbody ou tfoot). Utilisez un tfoot pour les totaux.

PosteMontant
Loyer150 000 FCFA
Électricité28 000 FCFA
Total178 000 FCFA
 
<table class="table">
  <thead>
    <tr><th scope="col">Poste</th><th scope="col" class="text-end">Montant</th></tr>
  </thead>
  <tbody class="table-group-divider">
    <tr><th scope="row">Loyer</th><td class="text-end">150 000 FCFA</td></tr>
    <tr><th scope="row">Électricité</th><td class="text-end">28 000 FCFA</td></tr>
  </tbody>
  <tfoot class="table-group-divider">
    <tr><th scope="row">Total</th><td class="text-end">178 000 FCFA</td></tr>
  </tfoot>
</table>

Alignement vertical#

Par défaut, l’en-tête s’aligne en bas et le corps en haut. Les utilitaires align-top, align-middle et align-bottom s’appliquent au tableau, à une ligne ou à une cellule.

OffreDescriptionTaux
Prêt scolaire Financez les frais de scolarité de vos enfants, remboursables sur 24 mois maximum, avec un différé possible pendant la période des vacances. 7 %
Prêt auto Achetez un véhicule neuf ou d'occasion récent. 9 % 
<table class="table align-middle">
  <thead>
    <tr><th scope="col">Offre</th><th scope="col">Description</th><th scope="col">Taux</th></tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Prêt scolaire</th>
      <td>Financez les frais de scolarité de vos enfants, remboursables sur 24 mois maximum, avec un différé possible pendant la période des vacances.</td>
      <td>7 %</td>
    </tr>
    <tr>
      <th scope="row">Prêt auto</th>
      <td class="align-bottom">Achetez un véhicule neuf ou d'occasion récent.</td>
      <td>9 %</td>
    </tr>
  </tbody>
</table>

Légende#

L’élément caption donne un titre au tableau. Il se place en bas par défaut ; .caption-top le remonte au-dessus.

Taux des livrets d'épargne au 1er avril
LivretTaux annuel
Jeune3,5 %
Classique3 %
Légende placée en bas du tableau (position par défaut)
Jeune3,5 %
Classique3 %
 
<table class="table table-sm">
  <caption class="caption-top">Taux des livrets d'épargne au 1er avril</caption>
  <thead>
    <tr><th scope="col">Livret</th><th scope="col">Taux annuel</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Jeune</th><td>3,5 %</td></tr>
    <tr><th scope="row">Classique</th><td>3 %</td></tr>
  </tbody>
</table>
<table class="table table-sm mb-0">
  <caption>Légende placée en bas du tableau (position par défaut)</caption>
  <tbody>
    <tr><th scope="row">Jeune</th><td>3,5 %</td></tr>
    <tr><th scope="row">Classique</th><td>3 %</td></tr>
  </tbody>
</table>

Tableau défilant sur petit écran#

Placez le tableau dans un .table-responsive pour lui donner un défilement horizontal quand il dépasse. Avec .table-responsive-{palier}, le défilement ne s’active que sous ce point de rupture (par exemple sous 768 px pour -md). Le conteneur, pas le tableau, défile ; ajoutez un nom accessible et le focus clavier avec tabindex="0".

Relevé trimestriel

CompteJanvierFévrier MarsAvrilMaiJuin
Courant120 00095 000130 00088 000150 000110 000
Épargne500 000520 000540 000560 000580 000600 000
 
<div class="table-responsive-md" tabindex="0" role="region" aria-labelledby="tableaux-releve-titre">
  <p id="tableaux-releve-titre" class="fw-bold mb-2">Relevé trimestriel</p>
  <table class="table table-bordered text-nowrap mb-0">
    <thead>
      <tr>
        <th scope="col">Compte</th><th scope="col">Janvier</th><th scope="col">Février</th>
        <th scope="col">Mars</th><th scope="col">Avril</th><th scope="col">Mai</th><th scope="col">Juin</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Courant</th><td>120 000</td><td>95 000</td><td>130 000</td><td>88 000</td><td>150 000</td><td>110 000</td></tr>
      <tr><th scope="row">Épargne</th><td>500 000</td><td>520 000</td><td>540 000</td><td>560 000</td><td>580 000</td><td>600 000</td></tr>
    </tbody>
  </table>
</div>

Classes de tableau

ClasseS’applique àEffet
.tabletableStyle de base : pleine largeur, remplissage de cellule 0.5rem, trait sous chaque ligne.
.table-stripedtableLignes impaires du corps colorées.
.table-striped-columnstableColonnes paires colorées.
.table-hovertableLigne du corps surlignée au survol.
.table-activeligne, cellule, tableauSurlignage permanent.
.table-borderedtableBordure sur toutes les cellules.
.table-borderlesstableAucune bordure.
.table-smtableRemplissage de cellule 0.25rem.
.table-group-dividerthead, tbody, tfootBordure haute double d’épaisseur.
.caption-toptableLégende au-dessus du tableau.
.table-primary, -secondary, -success, -info, -warning, -danger, -light, -darktable, thead, ligne, celluleCouleur contextuelle ; le texte et les bordures sont assortis.
.table-responsiveconteneur du tableauDéfilement horizontal à toutes les largeurs.
.table-responsive-sm à -xxlconteneur du tableauDéfilement horizontal sous le point de rupture indiqué.

Variables CSS

Chaque tableau définit ses couleurs par des variables ; les classes de couleur ne font que les remplacer. Vous pouvez en redéfinir une sur un tableau précis.

VariableRôle
--bs-table-colorCouleur du texte.
--bs-table-bgCouleur de fond des cellules.
--bs-table-border-colorCouleur des bordures.
--bs-table-striped-color, --bs-table-striped-bgTexte et fond des lignes rayées.
--bs-table-active-color, --bs-table-active-bgTexte et fond de .table-active.
--bs-table-hover-color, --bs-table-hover-bgTexte et fond au survol.

Bonnes pratiques

À faire

  • Réservez les tableaux aux données qui ont plusieurs colonnes de valeurs comparables (opérations, échéanciers, tarifs).
  • Alignez les montants à droite avec text-end pour que les chiffres se comparent d’un coup d’œil.
  • Mettez le tableau dans un .table-responsive dès qu’il compte plus de trois ou quatre colonnes.
  • Donnez un titre au tableau avec caption.

À éviter

  • N’utilisez pas un tableau pour mettre une page en forme : c’est le rôle de la grille.
  • N’indiquez pas un état par la couleur seule : écrivez-le aussi en texte (« En retard »).
  • Ne combinez pas trop de variantes (rayé, survol, bordures, couleurs) : le tableau devient chargé.

Accessibilité

  • Utilisez th avec scope="col" pour les en-têtes de colonne et scope="row" pour les en-têtes de ligne.
  • Ajoutez une caption ou un aria-label pour nommer le tableau.
  • Un conteneur défilant au clavier doit être focalisable (tabindex="0") et avoir un nom (role="region" et aria-labelledby).
  • Évitez les cellules fusionnées (colspan, rowspan) quand une structure simple est possible : elles compliquent la lecture avec un lecteur d’écran.
Charte provisoire, déduite du site public de la BDU CI. Elle sera remplacée par la charte officielle.