Les tables sont un élément fondamental de nombreux sites Web, utilisées pour présenter des données de manière structurée et lisible. Bootstrap 5, avec ses classes CSS prêtes à l'emploi, simplifie grandement la création de tables responsives et esthétiquement agréables. Cet article explore comment utiliser les tables dans Bootstrap 5 et présente plusieurs exemples pratiques.
La structure de base d'une table Bootstrap comprend les éléments <table>, <thead>, <tbody>, et <tr>. La classe .table est utilisée pour intégrer le style par défaut de Bootstrap.
Exemple :
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Ville</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Dupont</td>
<td>Jean</td>
<td>Paris</td>
</tr>
<!-- Plus de lignes ici -->
</tbody>
</table>Zébrée? 🦓 Le terme provient de l'anglais "zebra stripping" qui fait référence aux rayures des zèbres. Cela consiste à changer la couleur de fond une ligne sur deux afin d'améliorer la lisibilité d'un tableau.
Pour améliorer la lisibilité, Bootstrap offre la classe .table-striped, qui alterne la couleur de fond des lignes.
Exemple :
<table class="table table-striped">
<!-- Contenu de la table -->
</table>Utilisez .table-bordered pour ajouter des bordures sur toutes les lignes et colonnes de la table.
Exemple :
<table class="table table-bordered">
<!-- Contenu de la table -->
</table>Bootstrap permet de personnaliser la couleur des lignes ou des cellules avec des classes comme .table-primary, .table-success, etc.
Exemple :
<table class="table">
<tbody>
<tr class="table-primary">
<!-- Contenu de la ligne en couleur -->
</tr>
<!-- Plus de lignes ici -->
</tbody>
</table>Avec la classe .table-hover, les lignes de la table changent de couleur lorsque le curseur survole dessus.
Exemple :
<table class="table table-hover">
<!-- Contenu de la table -->
</table>Pour rendre une table responsive, entourez-la avec un div utilisant la classe .table-responsive. Cela permettra à la table de défiler horizontalement sur de petits écrans.
Exemple :
<div class="table-responsive">
<table class="table">
<!-- Contenu de la table -->
</table>
</div>Utilisez .table-sm pour rendre les tables plus compactes en réduisant la hauteur des lignes.
Exemple :
<table class="table table-sm">
<!-- Contenu de la table -->
</table>Bootstrap offre une grande flexibilité pour personnaliser les tables. Par exemple, vous pouvez utiliser des classes d'utilité pour ajuster l'alignement du texte, la couleur de fond, et plus.
Exemple de personnalisation :
<table class="table">
<thead>
<tr class="text-center bg-light">
<!-- En-têtes de la table -->
</tr>
</thead>
<tbody>
<tr class="text-left">
<!-- Contenu de la table -->
</tr>
</tbody>
</table>Les tables Bootstrap 5 offrent une solution élégante et efficace pour la présentation de données. Grâce à ses classes intégrées, vous pouvez rapidement créer des tables responsives et esthétiquement cohérentes. Que vous ayez besoin d'une table simple ou d'une table avec des fonctionnalités avancées, Bootstrap 5 facilite cette tâche, rendant vos données accessibles et attrayantes sur tous les appareils.