Bootstrap - Tables: A Friendly Guide for Beginners

Bonjour là-bas, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde merveilleux des tables Bootstrap. Ne vous inquiétez pas si vous n'avez jamais codé auparavant - je serai votre guide amical tout au long de ce voyage, et nous avancerons pas à pas. À la fin de ce tutoriel, vous serez capable de créer des tables magnifiques et réactives comme un pro !

What are Bootstrap Tables? (Quelles sont les tables Bootstrap ?)

Avant de commencer, parlons des tables Bootstrap. Imaginez que vous organisez vos livres préférés sur une étagère. Les tables Bootstrap sont comme cette étagère, mais pour votre site web ! Elles vous aident à présenter des informations de manière ordonnée et facile à lire pour vos visiteurs.

Simple Table (Table simple)

Commençons par les bases. Voici comment créer une table Bootstrap simple :

<table class="table">
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Londres</td>
</tr>
</tbody>
</table>

Ce code crée une table avec trois colonnes : Nom, Âge et Ville. La section <thead> définit les en-têtes de la table, et le <tbody> contient les données réelles. La class="table" est ce qui lui donne cette magie Bootstrap !

Table Variants (Variantes de table)

Bootstrap propose différents styles pour vos tables. C'est comme choisir différents habillements pour vos données ! Voici quelques variantes :

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Ajoutez simplement ces classes à votre balise <table> pour changer l'aspect général de votre table. C'est aussi simple que ça !

Accented Tables (Tables accentuées)

Vous souhaitez faire ressortir certaines lignes ou cellules ? Bootstrap est là pour vous :

<table class="table">
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Ligne active</td>
<td>Se distingue</td>
</tr>
<tr>
<td>Ligne régulière</td>
<td class="table-primary">Cellule accentuée</td>
</tr>
</tbody>
</table>

La classe table-active met en surbrillance une ligne entière, tandis que des classes comme table-primary peuvent être utilisées sur des cellules individuelles.

Striped Rows and Columns (Lignes et colonnes à rayures)

Souvenez-vous de ces cahiers à rayures zébrées que vous aviez à l'école ? Vous pouvez faire la même chose avec vos tables !

Pour des lignes à rayures :

<table class="table table-striped">
...
</table>

Et pour des colonnes à rayures :

<table class="table table-striped-columns">
...
</table>

Hoverable Rows (Lignes cliquables)

Vous souhaitez que votre table soit interactive ? Faites en sorte que les lignes s'allument lorsque vous les survolez :

<table class="table table-hover">
...
</table>

C'est comme de la magie - essayez-le !

Bordered and Borderless Tables (Tables avec et sans bordure)

Vous pouvez ajouter des bordures à votre table :

<table class="table table-bordered">
...
</table>

Ou les supprimer complètement :

<table class="table table-borderless">
...
</table>

Small Tables (Petites tables)

Pour un aspect plus compact, utilisez la classe table-sm :

<table class="table table-sm">
...
</table>

C'est parfait pour quand vous avez besoin de faire entrer beaucoup de données dans un petit espace !

Table Group Dividers (Diviseurs de groupe de table)

Vous souhaitez regrouper vos données ? Utilisez la classe table-group-divider :

<table class="table">
<thead>
<tr>
<th>Entête 1</th>
<th>Entête 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>Donnée 3</td>
<td>Donnée 4</td>
</tr>
</tbody>
</table>

Cela ajoute un séparateur visible entre vos groupes de corps de table.

Vertical Alignment (Alignement vertical)

Vous pouvez contrôler comment votre contenu s'aligne verticalement à l'intérieur des cellules :

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>Cette cellule et ses voisines sont alignées en bas</td>
<td>Bas</td>
<td class="align-top">Cette cellule est alignée en haut</td>
</tr>
</tbody>
</table>

Utilisez align-middle pour l'alignement au milieu et align-top pour l'alignement en haut.

Responsive Tables (Tables réactives)

Faites en sorte que vos tables aient l'air bien sur tous les appareils avec la classe table-responsive :

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Cela permet à votre table de se faire défiler horizontalement sur les petits écrans. C'est comme donner à votre table des superpouvoirs pour s'adapter à toutes les tailles d'écran !

Nesting (Empilage)

Vous pouvez même mettre des tables à l'intérieur des tables ! Voici comment :

<table class="table table-striped">
<thead>
<tr>
<th>Nom</th>
<th>Détails</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ligne parent</td>
<td>
<table class="table table-sm">
<tr>
<td>Ligne imbriquée 1</td>
</tr>
<tr>
<td>Ligne imbriquée 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

C'est comme des poupées russes, mais avec des tables !

Anatomy of a Table (Anatomie d'une table)

Reprenons les parties d'une table :

Table Head (En-tête de table)

<table class="table">
<thead>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
</thead>
...
</table>

Le <thead> contient vos en-têtes de colonne.

Table Foot (Pied de table)

<table class="table">
...
<tfoot>
<tr>
<td>Pied 1</td>
<td>Pied 2</td>
</tr>
</tfoot>
</table>

Utilisez <tfoot> pour les pieds de table, parfait pour les résumés ou les totaux.

Caption (Légende)

Ajoutez un titre à votre table avec <caption> :

<table class="table">
<caption>Liste des utilisateurs</caption>
...
</table>

C'est comme donner à votre table un étiquetage !

Conclusion

Et voilà, les amis ! Vous venez d'apprendre à créer et à styliser des tables avec Bootstrap. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec différentes combinaisons de ces classes. Avant de savoir dire ouf, vous serez capable de créer des tables qui non seulement organisent les données efficacement, mais qui ont aussi un aspect fantastique !

Bon codage, et puissent vos tables être toujours magnifiquement bootstrappées !

Credits: Image by storyset