Nous pouvons créer différents types de tableaux Bootstrap en utilisant différentes classes pour les styler.
Bootstrap Tableau de base:
Un tableau Bootstrap de base a un rembourrage léger et seulement des séparations horizontales. La classe .table est utilisée pour ajouter un style de base à une table.
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Example tableau de base</h1>
<table class="table">
<tr><th>Id</th><th>Nom</th><th>Age</th></tr>
<tr><td>101</td><td>Raefskov</td><td>23</td></tr>
<tr><td>102</td><td>Hadil</td><td>22</td></tr>
<tr><td>103</td><td>Hedi</td><td>29</td></tr>
<tr><td>104</td><td>Ghri</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Tableau bootstrap rangées avec rayures:
La classe .table-striped est utilisée pour ajouter des zébrures à un tableau:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Exemple</h1>
<table class="table table-striped">
<tr><th>Id</th><th>Nom</th><th>Age</th></tr>
<tr><td>101</td><td>Raefskov</td><td>23</td></tr>
<tr><td>102</td><td>Hadil</td><td>22</td></tr>
<tr><td>103</td><td>Hedi</td><td>29</td></tr>
<tr><td>104</td><td>Ghri</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Tableau Bootstrap avec Bordure:
La classe .table-bordered est utilisée pour ajouter des bordures de tous les côtés du tableau et des cellules:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Exemple</h1>
<table class="table table-striped table-bordered">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Raeskov</td><td>23</td></tr>
<tr><td>102</td><td>Hadil</td><td>22</td></tr>
<tr><td>103</td><td>Hedi</td><td>29</td></tr>
<tr><td>104</td><td>Ghri</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Tableau Bootstrap Condensed:
La classe .table-condensed est utilisée pour rendre une table plus compacte en coupant le rembourrage des cellules en deux:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Exemple</h1>
<table class="table table-condensed">
<tr><th>Id</th><th>Nom</th><th>Age</th></tr>
<tr><td>101</td><td>Raefskov</td><td>23</td></tr>
<tr><td>102</td><td>Hadil</td><td>22</td></tr>
<tr><td>103</td><td>Hedi</td><td>29</td></tr>
<tr><td>104</td><td>Ghri</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Classes contextuelles Bootstrap :.
Les classes contextuelles sont utilisées pour colorer des lignes de tableau (<tr>) ou des cellules de tableau (<td>):
Voici les différentes classes contextuelles:
| Classe | La description |
|---|---|
| .active | Il est utilisé pour appliquer la couleur de survol à la ligne ou à la cellule du tableau. |
| .Success | Il indique une action réussie ou positive |
| .Info | Il indique un changement ou une action informative neutre |
| .Warning | Il spécifie un avertissement qui pourrait avoir besoin d’attention |
| .danger | Il indique une action dangereuse ou potentiellement négative |
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Exemple</h1>
<table class="table">
<tr class="success"><th>Id</th><th>Nom</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Raefskov</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Hadil</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Hedi</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ghri</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Tableau responsive:
La classe .table-responsive est utilisée pour créer une table réactive. Vous pouvez ouvrir la table même sur de petits appareils (moins de 768px). Ensuite, le tableau défilera horizontalement. Affiche plus large que 768px large, il n’y a pas de différence.
Voir cet exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Exemple</h1>
<div class="table-responsive">
<table class="table">
<tr class="success"><th>Id</th><th>Nom</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Raefskov</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Hadil</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Hedi</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ghri</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Tableau noir
La classe .table-dark est utilisée pour ajouter un fond noir à la table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tableau sombre</h2>
<p>La classe .table-dark est utilisée pour ajouter un fond noir à la table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Raefskov</td>
<td>Ghri</td>
<td>raefskov@yahoo.com</td>
</tr>
<tr>
<td>Hadil</td>
<td>Ghri</td>
<td>ghri@yahoo.com</td>
</tr>
<tr>
<td>Hedi</td>
<td>Barak</td>
<td>hedibaraket@yahoo.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Résultat :
Bootstrap couleur de l’en-tête de tableau
Vous pouvez modifier la couleur d’arrière-plan de l’en-tête de tableau en utilisant la classe .thead-dark pour ajouter un arrière-plan noir aux en-têtes de tableau et la classe .thead-light pour ajouter un arrière-plan gris aux en-têtes de tableau.
Exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tableau couleur de l'entete</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Raefskov</td>
<td>Ghri</td>
<td>raefskov@yahoo.com</td>
</tr>
<tr>
<td>Hadil</td>
<td>Ghri</td>
<td>hadil@yahoo.com</td>
</tr>
<tr>
<td>Hedi</td>
<td>Barak</td>
<td>hedibarak@yahoo.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Raefskov</td>
<td>Ghri</td>
<td>raefskov@yahoo.com</td>
</tr>
<tr>
<td>Hadil</td>
<td>Ghri</td>
<td>hadil@yahoo.com</td>
</tr>
<tr>
<td>Hedi</td>
<td>Barak</td>
<td>hedibarak@yahoo.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Résultat :
