Bootstrap Tables
Basic HTML Table related to Bootstrap Tables
Bootstrap tables:- Basically, the purpose of HTML table is used to present data in grid view manners such as row and columns, and when you using the Bootstrap then you can greatly improve the appearance of the table in a quick and easy way.
therefore, Bootstrap Tables allow to present the data in a clear and orderly way, and Bootstrap tables provide the additional features and benefits like responsiveness and the possibility of manipulating the tables styles to represent the data.
Therefore, bootstrap tables facilities and benefits such as you can add buttons, panels, checkboxes, and use an advanced DataTables option like sort, search, or pagination many other additional elements.
The Bootstrap provides more advanced options for bootstrap table see the below options:-
Table Search
Table Pagination
Table scroll
Table sort
Table Generator
Table Editable
Datatables Integration
Provide the Advanced options of the responsive table
Tables with additional features provide like icons, buttons, panels, checkboxes and more
when we create the table base class .table to any </table> then extend with our various incorporated modifier classes or custom methods.
The <thead> tag is used for the group header content in a bootstrap table or HTML table.
In table <tr> tag is used to represent the table row element.
<th> tag is used to represent the table heading content, it is as know as header cells.
<tbody> tag is used to group the body content in the HTML table.
<td> the tag used in the table to represent the table column element, it as knows as standard cells
Basic Table Examples:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">City</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Bryant</td> <td>Charles</td> <td>@Canada</td> </tr> <tr> <th scope="row">2</th> <td>Jamphosh</td> <td>Broton</td> <td>@USA</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>Morgon</td> <td>@UK</td> </tr> </tbody> </table> |
Therefore, Basic tables design output comes as below.
| # | First | Last | City |
|---|---|---|---|
| 1 | Bryant | Charles | @Canada |
| 2 | Jamphosh | Broton | @USA |
| 3 | Larry | Morgon | @UK |
Table head options
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<table class="table"> <thead class="thread-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Position</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Aman</td> <td>Shukla</td> <td>@Blogger</td> </tr> <tr> <th scope="row">2</th> <td>Pinki</td> <td>Gupta</td> <td>@Manager</td> </tr> <tr> <th scope="row">3</th> <td>Joshph</td> <td>Bird</td> <td>@CEO</td> </tr> </tbody> </table> <table class="table"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Position</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Bark</td> <td>tory</td> <td>@MD</td> </tr> <tr> <th scope="row">2</th> <td>Calvin</td> <td>Thor</td> <td>@Operator</td> </tr> <tr> <th scope="row">3</th> <td>Jamy</td> <td>Willition</td> <td>@Operator</td> </tr> </tbody> </table> |
Finally, Tables Design output comes as below.
| # | First | Last | Position |
|---|---|---|---|
| 1 | Aman | Shukla | @Blogger |
| 2 | Pinki | Gupta | @Manager |
| 3 | Joseph | Bird | @CEO |
| # | First | Last | Position |
|---|---|---|---|
| 1 | Bark | tory | @MD |
| 2 | Calvin | Thor | @Operator |
| 3 | Jamy | Williton | @Operator |
Striped rows
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Position</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Aman</td> <td>Shukla</td> <td>@Blogger</td> </tr> <tr> <th scope="row">2</th> <td>Pinki</td> <td>Gupta</td> <td>@Manager</td> </tr> <tr> <th scope="row">3</th> <td>Joshph</td> <td>Bird</td> <td>@CEO</td> </tr> </tbody> </table> |
Therefore, table-striped class tables design output comes as below.
| # | First | Last | Position |
|---|---|---|---|
| 1 | Aman | Shukla | @Blogger |
| 2 | Pinki | Gupta | @Manager |
| 3 | Joseph | Bird | @CEO |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table class="table table-striped table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Position</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>David</td> <td>Dev</td> <td>@MD</td> </tr> <tr> <th scope="row">2</th> <td>Joshp</td> <td>Thorn</td> <td>@Operator</td> </tr> <tr> <th scope="row">3</th> <td>Michel</td> <td>Bresto</td> <td>@Engineer</td> </tr> </tbody> </table> |
Therefore, table-striped and table-dark class tables design output comes as below.
| # | First | Last | Position |
|---|---|---|---|
| 1 | David | Dev | @MD |
| 2 | Joshp | Thorn | @Operator |
| 3 | Michel | Bresto | @Engineer |
Bordered Table
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table class="table table-bordered"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Position</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>David</td> <td>Dev</td> <td>@MD</td> </tr> <tr> <th scope="row">2</th> <td>Joshp</td> <td>Thorn</td> <td>@Operator</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Morgan Kerry Bird</td> <td>@Consultant</td> </tr> </tbody> </table> |
Therefore, Bordered Table class tables design output comes as below.
| # | First | Last | Position |
|---|---|---|---|
| 1 | David | Dev | @MD |
| 2 | Joshp | Thorn | @Operator |
| 3 | Morgan Kerry Bird | @Consultant | |
Borderless Table
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table class="table table-borderless"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> |
Therefore, Borderless Table Class Design output comes as below.
Hoverable Rows
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table class="table table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Position</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>David</td> <td>Dev</td> <td>@MD</td> </tr> <tr> <th scope="row">2</th> <td>Joshp</td> <td>Thorn</td> <td>@Operator</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Morgan Kerry Bird</td> <td>@Consultant</td> </tr> </tbody> </table> |
Therefore, Hoverable Rows Class tables design output comes as below.
| # | First | Last | Position |
|---|---|---|---|
| 1 | David | Dev | @MD |
| 2 | Joshp | Thorn | @Operator |
| 3 | Morgan Kerry Bird | @Consultant | |
Contextual Classes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Position</th> </tr> </thead> <tbody> <tr> <td>Amit</td> <td>Arora</td> <td>@Operator</td> </tr> <tr class="success"> <td>Sandeep</td> <td>Mishra</td> <td>@Engineer</td> </tr> <tr class="danger"> <td>Joy</td> <td>Moe</td> <td>@Admin</td> </tr> <tr class="info"> <td>Carry</td> <td>Dev</td> <td>@Engineer</td> </tr> <tr class="warning"> <td>Chales</td> <td>Bryed</td> <td>@Speaker</td> </tr> <tr class="active"> <td>Accona</td> <td>AWills</td> <td>@Writter</td> </tr> </tbody> </table> |
Therefore, Contextual Classes tables design output comes as below.
| Firstname | Lastname | Position |
|---|---|---|
| Amit | Arora | @Operator |
| Sandeep | Mishra | @Engineer |
| Joy | Moe | @Admin |
| Carry | Dev | @Engineer |
| Chales | Bryed | @Speaker |
| Accona | AWills | @Writter |
About Author
