Bootstrap 5-TABLE
An HTML table display data in a grid layout that consists of rows and columns.Bootstrap helps in improving the apperance of an HTML table by providing built-in CSS classes.A basics bootstrap table features distinct apperance in terms of only horizontal splitter and slight padding of 8 pixels.
for applying the basic style,Bootstrap offer the .table class
Bootstrap provide a clean layout for crteating a table
| Element | Description |
|---|---|
| <table> | Wrapping element for displaying data in a tabular format |
| <thead> | Container element for table header rows (<tr>) to label table columns. |
| <tbody> | Container element for table rows (<tr>) in the body of the table. |
| <tr> | Container element for a set of table cells (<td> or <th>) that appears on a single row. |
| <td> | Default table cell. |
| <th> | Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead> |
| <caption> | Defines a table caption |
Syntax
<table class = "table"><thead>
<tr> <th> heading </th> </tr>
</thead>
<tbody>
<tr> <td> data </td> </tr>
</tbody>
</table>
Simple -Table
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Priya</td>
<td>Malhotra</td>
<td>priya@gmail.com</td>
</tr>
<tr>
<td>Rohit</td>
<td>Sharma</td>
<td>rohit@gmail.com</td>
</tr>
<tr>
<td>Muskan</td>
<td>Mehta</td>
<td>muskan@gmail.com</td>
</tr>
</table>
</div>
</body>
</html>
Output
| Firstname | Lastname | |
|---|---|---|
| Priya | Malhotra | priya@gmail.com |
| Rohit | Sharma | rohit@gmail.com |
| Muskan | Mehta | muskan@gmail.com |
Types of table classes
<table class="table">
<table class="table table-striped">
<table class="table table-striped-columns">
<table class="table table-hover">
<table class="table table-primary">...</table>
<tr class="table-primary">...</tr>
<td class="table-primary">...</td>
Striped rows
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Priya</td>
<td>Malhotra</td>
<td>priya@gmail.com</td>
</tr>
<tr>
<td>Rohit</td>
<td>Sharma</td>
<td>rohit@gmail.com</td>
</tr>
<tr>
<td>Muskan</td>
<td>Mehta</td>
<td>muskan@gmail.com</td>
</tr>
</table>
</div>
</body>
</html>
Output
| Firstname | Lastname | |
|---|---|---|
| Priya | Malhotra | priya@gmail.com |
| Rohit | Sharma | rohit@gmail.com |
| Muskan | Mehta | muskan@gmail.com |
Striped rows
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<table class="table table-striped-columns">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Priya</td>
<td>Malhotra</td>
<td>priya@gmail.com</td>
</tr>
<tr>
<td>Rohit</td>
<td>Sharma</td>
<td>rohit@gmail.com</td>
</tr>
<tr>
<td>Muskan</td>
<td>Mehta</td>
<td>muskan@gmail.com</td>
</tr>
</table>
</div>
</body>
</html>
Output
| Firstname | Lastname | |
|---|---|---|
| Priya | Malhotra | priya@gmail.com |
| Rohit | Sharma | rohit@gmail.com |
| Muskan | Mehta | muskan@gmail.com |
Hover table
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Priya</td>
<td>Malhotra</td>
<td>priya@gmail.com</td>
</tr>
<tr>
<td>Rohit</td>
<td>Sharma</td>
<td>rohit@gmail.com</td>
</tr>
<tr>
<td>Muskan</td>
<td>Mehta</td>
<td>muskan@gmail.com</td>
</tr>
</table>
</div>
</body>
</html>
Output
| Firstname | Lastname | |
|---|---|---|
| Priya | Malhotra | priya@gmail.com |
| Rohit | Sharma | rohit@gmail.com |
| Muskan | Mehta | muskan@gmail.com |
Variants
Use contextual classes to color tables, table rows or individual cells.
On tables
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
On rows
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
On cells (`td` or `th`)
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
Responsive Table
The .table-responsive class is used to create a responsive table. You can open the responsible table even on small devices (under 768px). Then the table will be scrolled horizontally. Displays larger than 768px wide, there is no difference.
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Priya</td>
<td>Malhotra</td>
<td>priya@gmail.com</td>
</tr>
<tr>
<td>Rohit</td>
<td>Sharma</td>
<td>rohit@gmail.com</td>
</tr>
<tr>
<td>Muskan</td>
<td>Mehta</td>
<td>muskan@gmail.com</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Output
| Firstname | Lastname | Firstname | Lastname | Firstname | Lastname | Firstname | Lastname | Firstname | Lastname | Firstname | Lastname | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Priya | Malhotra | priya@gmail.com | |||||||||||||||
| Rohit | Sharma | rohit@gmail.com | |||||||||||||||
| Muskan | Mehta | muskan@gmail.com |