English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le tableau HTML est utilisé pour afficher les données en mode grille (comme les lignes et les colonnes). Utiliser Bootstrap4peut changer rapidement et simplement l'apparence du tableau.
Bootstrap4 Définir le style du tableau de base avec .table classe, comme dans les exemples suivants :
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tableau de base</h2> <p>.table classe pour définir le style de tableau de base :/p> <table class="table"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
Ajouter .table-La classe striped, vous verrez <tbody> Vous pouvez voir les bandes sur les lignes à l'intérieur, comme dans les exemples suivants :
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tableau à bandes</h2> <p>Ajouter .table-La classe striped, pour définir le tableau à bandes :/p> <table class="table table-striped"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
.table-La classe bordered peut ajouter une bordure au tableau
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tableau avec bordure</h2> <p>.table-La classe bordered peut ajouter une bordure au tableau :/p> <table class="table table-bordered"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
.table-La classe hover peut ajouter un effet de survol au curseur à chaque ligne du tableau (fond gris) :
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tableau en état de survol au curseur</h2> <p>.table-La classe hover peut ajouter un effet de survol au curseur à chaque ligne du tableau (fond gris) : </p> <table class="table table-hover"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
.table-La classe dark peut ajouter un fond noir au tableau :
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tableau de fond noir</h2> <p>.table-La classe dark peut ajouter un fond noir au tableau :/p> <table class="table table-dark"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
Utiliser ensemble .table-dark et .table-La classe striped peut créer un tableau de fond noir avec des bandes :
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tableau de fond noir avec des bandes</h2> <p>Utiliser ensemble .table-dark et .table-La classe striped peut créer un tableau de fond noir avec des bandes : </p> <table class="table table-dark table-striped"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
Utiliser ensemble .table-dark et .table-La classe hover peut définir l'effet de survol au curseur pour le tableau de fond noir :
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Effet de survol au curseur - Tableau de fond noir/h2> <p>Utiliser ensemble .table-dark et .table-La classe hover peut définir l'effet de survol au curseur pour le tableau de fond noir : </p> <table class="table table-dark table-hover"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
En spécifiant des classes de couleurs à sens, vous pouvez définir la couleur des lignes ou des cellules du tableau :
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Spécifier des classes de couleurs à sens</h2> <p>En spécifiant des classes de couleurs à sens, vous pouvez définir la couleur des lignes ou des cellules du tableau : </p> <table class="table"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Defaultson</td> <td>[email protected]</td> </tr> <tr class="table-primary"> <td>Primary</td> <td>Joe</td> <td>[email protected]</td> </tr> <tr class="table-success"> <td>Success</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr class="table-danger"> <td>Danger</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr class="table-info"> <td>Info</td> <td>Dooley</td> <td>[email protected]</td> </tr> <tr class="table-warning"> <td>Warning</td> <td>Refs</td> <td>[email protected]</td> </tr> <tr class="table-active"> <td>Active</td> <td>Activeson</td> <td>[email protected]</td> </tr> <tr class="table-secondary"> <td>Secondary</td> <td>Secondson</td> <td>[email protected]</td> </tr> <tr class="table-light"> <td>Light</td> <td>Angie</td> <td>[email protected]</td> </tr> <tr class="table-texte foncé-dark"> <td>Dark</td> <td>Bo</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
Le tableau suivant liste les descriptions des classes de couleurs de tableau:
Class name | Description |
---|---|
.table-primary | Bleu: indique une opération importante |
.table-success | Vert: indique une opération autorisée |
.table-danger | Rouge: indique que c'est une opération dangereuse |
.table-info | Bleu clair: indique que le contenu a été modifié |
.table-warning | Orange: indique une opération à surveiller |
.table-active | Gris: utilisé pour l'effet de survol de la souris |
.table-secondary | Gris: indique que le contenu n'est pas très important |
.table-light | Gris clair, peut être utilisé comme fond des lignes de tableau |
.table-dark | Gris foncé, peut être utilisé comme fond des lignes de tableau |
Dans Bootstrap v4.0.0-beta.2 dans .thead-La classe 'dark' est utilisée pour ajouter un fond noir aux en-têtes de table, .thead-La classe 'light' est utilisée pour ajouter un fond gris aux en-têtes de table:
Dans Bootstrap v4.0.0-beta Cette version, .thead-La classe 'inverse' est utilisée pour ajouter un fond noir aux en-têtes de table, .thead-La classe 'default' est utilisée pour ajouter un fond gris aux en-têtes de table.
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Couleur des en-têtes</h2> <p>.thead-La classe 'dark' est utilisée pour ajouter un fond noir aux en-têtes de table, .thead-La classe 'light' est utilisée pour ajouter un fond gris aux en-têtes de table: </p> <table class="table"> <thead class="thead-dark"> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> <table class="table"> <thead class="thead-light"> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
.table-sm class is used to set a smaller table by reducing the inner padding:<
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Smaller table</h2> <p>.table-sm class is used to set a smaller table by reducing the inner padding:</p> <table class="table table-bordered table-sm"> <thead> <tr> <th Prénom</th> <th Nom de famille</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Testez pour voir ‹/›
.table-responsive class is used to create responsive tables: when the screen width is less than 992px will create a horizontal scrollbar if the visible area width is greater than 992px will display different effects (without scrollbar):
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Responsive table</h2> <p>.table-responsive class is used to create responsive tables: when the screen width is less than 992px will create a horizontal scrollbar if the visible area width is greater than 992px will display different effects (without scrollbar):</p> <div class="table-responsive"> <table class="table"> <thead> <tr> <th #</th> <th Prénom</th> <th Nom de famille</th> <th Âge</th> <th Ville</th> <th Pays</th> <th Sexe</th> <th>Exemple</th> <th>Exemple</th> <th>Exemple</th> <th>Exemple</th> </tr> </thead> <tbody> <tr> <td><1</td> <td>Anna</td> <td>Pitt</td> <td><35</td> <td>New York</td> <td>USA</td> <td>Femme</td> <td>Oui</td> <td>Oui</td> <td>Oui</td> <td>Oui</td> </tr> </tbody> </table> </div> </div> </body> </html>Testez pour voir ‹/›
You can specify the scrollbar to be displayed at a certain screen width using the following classes:
Class name | Screen width |
---|---|
.table-responsive-sm | < 576px |
.table-responsive-md | < 768px |
.table-responsive-lg | < 992px |
.table-responsive-xl | < 1200px |
<!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Responsive table</h2> <p>.table-responsive-sm pour créer des tableaux réactifs, lorsque la largeur de l'écran est inférieure 576px à afficher la barre de défilement horizontale.</p> <p>Redéfinissez la taille du navigateur pour voir l'effet.</p> <div class="table-responsive-sm"> <table class="table"> <thead> <tr> <th #</th> <th Prénom</th> <th Nom de famille</th> <th Âge</th> <th Ville</th> <th Pays</th> <th Sexe</th> <th>Exemple</th> <th>Exemple</th> <th>Exemple</th> <th>Exemple</th> </tr> </thead> <tbody> <tr> <td><1</td> <td>Anna</td> <td>Pitt</td> <td><35</td> <td>New York</td> <td>USA</td> <td>Femme</td> <td>Oui</td> <td>Oui</td> <td>Oui</td> <td>Oui</td> </tr> </tbody> </table> </div> </div> </body> </html>Testez pour voir ‹/›