Bootstrap 4 - Tableaux
La description
Les tableaux sont utilisés pour afficher les données dans un format tabulaire. Si vous voulez un style de tableau de base avec juste un léger remplissage et des séparateurs horizontaux, ajoutez la classe .table à l'élément <table>. Pour plus d'informations sur le tableau de base et ses éléments, consultez ce chapitre .
Table sombre
Vous pouvez utiliser la classe .table-dark pour ajouter un arrière-plan noir au tableau comme indiqué dans l'exemple suivant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Dark Table</h2>
<table class = "table table-dark">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Options de tête de table
Vous pouvez ajouter un arrière-plan noir ou un arrière-plan gris aux en-têtes de tableau en utilisant les classes .thead-dark et .thead-light , comme illustré dans l'exemple suivant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Dark Head</h2>
<table class = "table">
<thead class = "thead-dark">
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
<h2>Light Head</h2>
<table class = "table">
<thead class = "thead-light">
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Lignes rayées
En ajoutant la classe .table-striped , vous obtiendrez des rayures sur les lignes comme indiqué dans l'exemple suivant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Striped Rows</h2>
<table class = "table table-striped">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Table bordée et sans bordure
Utilisez la classe .table-bordered pour créer les bordures autour du tableau et des cellules. Si vous ne souhaitez pas utiliser de bordure pour une table, utilisez la classe .table-borderless .
L'exemple suivant illustre l'utilisation des classes ci-dessus dans le tableau -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Bordered Table</h2>
<table class = "table table-bordered">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
<h2>Borderless Table</h2>
<table class = "table table-borderless">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Lignes survolables
En ajoutant la classe .table-hover , une couleur de fond gris clair sera ajoutée aux lignes pendant que le curseur les survole, comme le montre l'exemple suivant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Hoverable Rows</h2>
<table class = "table table-hover">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Petite table
Vous pouvez utiliser la classe .table-sm pour créer le petit tableau en coupant le remplissage de cellule en deux, comme indiqué dans l'exemple ci-dessous -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Small Table</h2>
<table class = "table table-sm">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Classes contextuelles
Vous pouvez utiliser des classes contextuelles pour appliquer de la couleur aux lignes ou aux cellules du tableau, comme illustré dans l'exemple suivant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Contextual Classes</h2>
<table class = "table">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr class = "table-active">
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
</tr>
<tr class = "table-success">
<td>Joe Root</td>
<td>England</td>
<td>2</td>
</tr>
<tr class = "table-danger">
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
</tr>
<tr class = "table-info">
<td>Kane Williamson</td>
<td>New Zealand</td>
<td>4</td>
</tr>
<tr class = "table-warning">
<td>Dinesh Chandimal</td>
<td>Srilanka</td>
<td>5</td>
</tr>
<tr class = "table-secondary">
<td>Alastair Cook</td>
<td>England</td>
<td>6</td>
</tr>
<tr class = "table-light">
<td>Kraigg Brathwaite</td>
<td>West Indies</td>
<td>7</td>
</tr>
<tr class = "table-primary">
<td>Cheteshwar Pujara</td>
<td>India</td>
<td>9</td>
</tr>
<tr class = "table-dark">
<td>Hashim Amla</td>
<td>South Africa</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Tables réactives
En enveloppant n'importe quel .table dans une classe sensible à .table , vous ferez défiler le tableau horizontalement jusqu'à de petits périphériques (moins de 992px). Lorsque vous regardez sur quelque chose de plus de 992 pixels de large, vous ne verrez aucune différence dans ces tableaux.
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Responsive Tables</h2>
<table class = "table">
<thead>
<tr>
<th>Player</th>
<th>Country</th>
<th>Ranking</th>
<th>Runs</th>
<th>Highest Score</th>
<th>Avg</th>
<th>Strike Rate</th>
<th>Hundreds</th>
<th>Fifties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>1</td>
<td>9774</td>
<td>183</td>
<td>53.92</td>
<td>60.75</td>
<td>35</td>
<td>48</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
<td>2</td>
<td>4800</td>
<td>133</td>
<td>51.61</td>
<td>55.20</td>
<td>13</td>
<td>28</td>
</tr>
<tr>
<td>Steven Smith</td>
<td>Australia</td>
<td>3</td>
<td>3431</td>
<td>164</td>
<td>41.84</td>
<td>86.36</td>
<td>10</td>
<td>19</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -