<table>
. Mais pour appliquer la mise en forme Bootstrap, il faudra appeler la classe .table
lors de la déclaration du tableau.<table>
pour ne pas entrer en conflit avec les nombreux composants qui utilisent des tableaux (par exemple les calendriers).
<table class="table">
<thead>
<tr>
<th>CIN</th>
<th>Prénom</th>
<th>Nom</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>02875401</td>
<td>Mohamed</td>
<td>Rahhal</td>
<td>mohamed.rahhal@gmail.com</td>
</tr>
<tr>
<td>07986532</td>
<td>Rachid</td>
<td>Hadded</td>
<td>rachidhadded@gmail.com</td>
</tr>
<tr>
<td>03985421</td>
<td>Jamila</td>
<td>Rahmani</td>
<td>rahmani123@gmail.com</td>
</tr>
<tr>
<td>03985477</td>
<td>Samira</td>
<td>Soltani</td>
<td>samirasousou@gmail.com</td>
</tr>
</tbody>
</table>
.table-striped
avec la classe de base .table
<table class="table table-striped">
<table class="table table-sm">
.table-bordered
à la classe de base .table
. <table class="table-bordered">
<div>
auquel on applique la classe .table-responsive <table class="table-responsive">
<table class="table table-sm table-dark">
Classe | Effet |
---|---|
.table-responsive |
Tableau responsive qui s’adapte au support. |
.table-inverse |
Fond noir et police d’écriture blanche. |
.thead-inverse |
Fond noir et police d’écriture blanche pour les cellules d’en-tête uniquement. Se place sur l’élément thead. |
.table-striped |
Appliqué sur l’élément table, ajoute des zébrures aux lignes contenues à l’intérieur de tbody. |
.table-bordered |
Ajoute des bordures autour du tableau ainsi qu’autour de chaque cellule. |
.table-hover |
Positionné sur table, ajoute des effets de survol sur chaque ligne de tbody. |
.table-sm |
Réduit les marges intérieures des cellules de moitié, pour un rendu plus compact. |