Bootstrap Tables
Bootstrap tables allow you to arrange data into rows and columns.
You can create a table using the <table> element.Inside the <table> element you can use the <tr> elements to create row, <td> elemets to create columns, <th> elemets to create heading.
Basic Example:
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>name</td>
<td>name@gmail.com</td>
</tr>
<tr>
<td>name2</td>
<td>name</td>
<td>name2@gmail.com</td>
</tr>
<tr>
<td>name3</td>
<td>name</td>
<td>name3@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Striped Table Rows:
Adding .table-striped class to <table> element, you can create a table with alternative background colored rows.
Example:
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>name</td>
<td>name1@gmail.com</td>
</tr>
<tr>
<td>name2</td>
<td>name</td>
<td>name2@gmail.com</td>
</tr>
<tr>
<td>name3</td>
<td>name</td>
<td>name3@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Bordered Table :
Adding .table-bordered class to <table> element, you can create a border on all sides of the table and cells.
Example:
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th><th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>name</td>
<td>name1@gmail.com</td>
</tr>
<tr>
<td>name2</td>
<td>name</td>
<td>name2@gmail.com</td>
</tr>
<tr>
<td>name3</td>
<td>name</td>
<td>name3@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Hover Rows Table :
Adding the .table-hover class is used to add a hover effect on table rows.
Example:
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>name</td>
<td>name1@gmail.com</td>
</tr>
<tr>
<td>name2</td>
<td>name</td>
<td>name2@gmail.com</td>
</tr>
<tr>
<td>name3</td>
<td>name</td>
<td>name3@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Black/Dark Table:
Adding .table-dark class to <table> element, you can adds a black background to the table.
Example:
<div class="container">
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>name</td>
<td>name1@gmail.com</td>
</tr>
<tr>
<td>name2</td>
<td>name</td>
<td>name2@gmail.com</td>
</tr>
<tr>
<td>name3</td>
<td>name</td>
<td>name3@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Dark Striped Table:
The combination of .table-dark and .table-striped to create a dark, striped table.
Example:
<div class="container">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>name</td>
<td>name@gmail.com</td>
</tr>
<tr>
<td>name</td>
<td>name</td>
<td>name@gmail.com</td>
</tr>
<tr>
<td>name</td>
<td>name</td>
<td>name@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Hoverable Dark Table:
The combination of .table-dark and .table-hover classes is used to add a hover effect (grey background color)on the table.
Example:
<div class="container">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>name</td>
<td>name1@gmail.com</td>
</tr>
<tr>
<td>name2</td>
<td>name</td>
<td>name2@gmail.com</td>
</tr>
<tr>
<td>name3</td>
<td>name</td>
<td>name3@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Borderless Table:
The .table-borderless is used to remove the border from table rows and columns.
Example:
<div class="container">
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>name</td>
<td>name1@gmail.com</td>
</tr>
<tr>
<td>name2</td>
<td>name</td>
<td>name2@gmail.com</td>
</tr>
<tr>
<td>name3</td>
<td>name</td>
<td>name3@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Contextual Classes:
Contextual classes can be used to color the whole table (<table>), an entire row (<tr>), or a single cell (<td>), of a table.
The list of contextual classes is: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
Example:
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>Default@gmail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>Primary@gmail.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>Success@gmail.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>Danger@gmail.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>Info@gmail.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>Warning@gmail.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>Active@gmail.com</td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Responsive Tables:
The .table-responsive class is added to create a responsive table, scrollbar to the table when needed ( too big horizontally).
Example:
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>name2</td>
<td>37</td>
<td>New York</td>
<td>India</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
OUTPUT
