Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about Bootstrap Tables.
Bootstrap gives a clean layout for building tables. The following are some of the table elements supported by Bootstrap -
Bootstrap gives a clean layout for building tables. The following are some of the table elements supported by Bootstrap -
Sr.No. | Tag & Description |
---|---|
1 | <table> Wrapping element for displaying data in a tabular format |
2 | <thead> Container element for table header rows (<tr>) to label table columns. |
3 | <tbody> Container element for table rows (<tr>) in the body of the table. |
4 | <tr> Container element for a set of table cells (<td> or <th>) that appears on a single row. |
5 | <td> Default table cell. |
6 | <th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead> |
7 | <caption> Description or summary of what the table holds. |
READ: Bootstrap | Code
Basic Table
If you want a nice basic table style with just some light padding and horizontal dividers, add the base class of .table to any table.
Example
Following below is a simple example -
<table class = "table"> <caption>Basic Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>Kennedy</td> <td>Port Harcourt</td> </tr> <tr> <td>Bethel</td> <td>Lagos</td> </tr> </tbody> </table>
Output
When the above example is executed, it will produce the following result -
Name | City |
---|---|
Kennedy | Port Harcourt |
Bethel | Lagos |
Optional Table Classes
Along with the base table markup and the .table class, there are few extra classes that you can use to style the markup. We will be looking at all these additional classes in the following sections below.
Striped Table
Adding the .table-striped class, you will get stripes on rows within the <tbody>.
Example
Following below is a simple example -
<table class = "table table-striped"> <caption>Striped Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> <th>Zipcode</th> </tr> </thead> <tbody> <tr> <td>Kennedy</td> <td>Port Harcourt</td> <td>500101</td> </tr> <tr> <td>Bethel</td> <td>Lagos</td> <td>100001</td> </tr> <tr> <td>Stephanie</td> <td>Abuja</td> <td>900101</td> </tr> </tbody> </table>
Output
When the above example is executed, it will produce the following result -
Name | City | Zipcode |
---|---|---|
Kennedy | Port Harcourt | 500101 |
Bethel | Lagos | 100001 |
Stephanie | Abuja | 900101 |
READ: Bootstrap | Typography
Bordered Table
By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table.
Example
Following below is a simple example -
<table class = "table table-bordered"> <caption>Bordered Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> <th>Zipcode</th> </tr> </thead> <tbody> <tr> <td>Kennedy</td> <td>Port Harcourt</td> <td>500101</td> </tr> <tr> <td>Bethel</td> <td>Lagos</td> <td>100001</td> </tr> <tr> <td>Stephanie</td> <td>Abuja</td> <td>900101</td> </tr> </tbody> </table>
Output
When the above example is executed, it will produce the following result -
Name | City | Zipcode |
---|---|---|
Kennedy | Port Harcourt | 500101 |
Bethel | Lagos | 100001 |
Stephanie | Abuja | 900101 |
Hover Table
By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them.
Example
Following below is a simple example -
<table class = "table table-hover"> <caption>Hover Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> <th>Zipcode</th> </tr> </thead> <tbody> <tr> <td>Kennedy</td> <td>Port Harcourt</td> <td>500101</td> </tr> <tr> <td>Bethel</td> <td>Lagos</td> <td>100001</td> </tr> <tr> <td>Stephanie</td> <td>Abuja</td> <td>900101</td> </tr> </tbody> </table>
Output
When the above example is executed, it will produce the following result -
Name | City | Zipcode |
---|---|---|
Kennedy | Port Harcourt | 500101 |
Bethel | Lagos | 100001 |
Stephanie | Abuja | 900101 |
READ: Bootstrap | CSS Overview
Condensed Table
By adding the .table-condensed class, row padding is cut in half to condense the table.
Example
Following below is a simple example -
<table class = "table table-condensed"> <caption>Condensed Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> <th>Zipcode</th> </tr> </thead> <tbody> <tr> <td>Kennedy</td> <td>Port Harcourt</td> <td>500101</td> </tr> <tr> <td>Bethel</td> <td>Lagos</td> <td>100001</td> </tr> <tr> <td>Stephanie</td> <td>Abuja</td> <td>900101</td> </tr> </tbody> </table>
Output
When the above example is executed, it will produce the following result -
Name | City | Zipcode |
---|---|---|
Kennedy | Port Harcourt | 500101 |
Bethel | Lagos | 100001 |
Stephanie | Abuja | 900101 |
Contextual Classes
The contextual classes allows you change the background color of your table rows or individual cells. Following table is the list of contextual classes in Bootstrap -
Sr.No. | Class & Description |
---|---|
1 | .active Applies the hover color to a particular row or cell |
2 | .success Indicates a successful or positive action |
3 | .warning Indicates a warning that might need attention |
4 | .danger Indicates a dangerous or potentially negative action |
These classes can be applied to <tr>, <td>, or <th>.
Example
Following below is a simple example -
<table class = "table"> <caption>Contextual Table Layout</caption> <thead> <tr> <th>Product</th> <th>Payment Date</th> <th>Status</th> </tr> </thead> <tbody> <tr class = "active"> <td>Product1</td> <td>22/09/2021</td> <td>Pending</td> </tr> <tr class = "success"> <td>Product2</td> <td>22/09/2021</td> <td>Delivered</td> </tr> <tr class = "warning"> <td>Product3</td> <td>22/09/2021</td> <td>In Call to confirm</td> </tr> <tr class = "danger"> <td>Product4</td> <td>22/09/2021</td> <td>Declined</td> </tr> </tbody> </table>
Output
When the above example is executed, it will produce the following result -
Product | Payment Date | Status |
---|---|---|
Product1 | 23/11/2013 | Pending |
Product2 | 22/09/2021 | Delivered |
Product3 | 22/09/2021 | In Call to confirm |
Product4 | 22/09/2021 | Declined |
Responsive Table
By wrapping any .table in .table-responsive class, you make the table scroll horizontally up to small devices (under 768pixes). When viewing on anything larger than 768px wide, you won't see a difference in these tables.
Example
Following below is a simple example -
<div class = "table-responsive"> <table class = "table"> <caption>Responsive Table Layout</caption> <thead> <tr> <th>Product</th> <th>Payment Date</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Product1</td> <td>22/09/2021</td> <td>Pending</td> </tr> <tr> <td>Product2</td> <td>22/09/2021</td> <td>Delivered</td> </tr> <tr> <td>Product3</td> <td>22/09/2021</td> <td>In Call to confirm</td> </tr> <tr> <td>Product4</td> <td>22/09/2021</td> <td>Declined</td> </tr> </tbody> </table> </div>
Output
When the above example is executed, it will produce the following result -
Product | Payment Date | Status |
---|---|---|
Product1 | 22/09/2021 | Pending |
Product2 | 22/09/2021 | Delivered |
Product3 | 22/09/2021 | In Call to confirm |
Product4 | 22/09/2021 | Declined |
READ: Bootstrap | Grid System
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Forms.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.