Bootstrap Tables
Bootstrap tables : Tables are basically used to represent data in row column format. Bootstrap provide classes to create responsive tables with cool look. .table class is used for basic table design in bootstrap. Bootstrap tables becomes important when you want to show data in table format with cool look. There are following types of bootstrap tables available in bootstrap.
Bootstrap Tables Type
Let us learn bootstrap tables with demo and example-
Bootstrap Basic Table
It adds simple style in table it adds the simple line between the rows.
for basic bootstrap table .table class is used.
Bootstrap Table : Basic
<table class='table'> <tr><th>Name</th><th>Email</th><th>Country</th></tr> <tr><td>Jhohn</td><td>jhone@gmail.com</td><td>USA</td></tr> <tr><td>Kelly</td><td>kelly@gmail.com</td><td>USA</td></tr> <tr><td>Kamana</td><td>kamna@gmail.com</td><td>India</td></tr> <tr><td>Anay</td><td>anay@gmail.com</td><td>Canada</td></tr> </table> |
Example
The above example will produce the following output-
Bootstrap Bordered Table
For adding border in bootstrap table class.table-bordered is used
Bootstrap Table : Bordered
<table class='table table-bordered'> <tr><th>Name</th><th>Email</th><th>Country</th></tr> <tr><td>Jhohn</td><td>jhone@gmail.com</td><td>USA</td></tr> <tr><td>Kelly</td><td>kelly@gmail.com</td><td>USA</td></tr> <tr><td>Kamana</td><td>kamna@gmail.com</td><td>India</td></tr> <tr><td>Anay</td><td>anay@gmail.com</td><td>Canada</td></tr> </table> |
The above example will produce the following output-
Bootstrap Table: Condensed
It makes tables cells more compact by removing the space.
For adding condensed table property in bootstrap table class.table-condensed is used
Bootstrap Table: Condensed
<table class='table table-condensed'> <tr><th>Name</th><th>Email</th><th>Country</th></tr> <tr><td>Jhohn</td><td>jhone@gmail.com</td><td>USA</td></tr> <tr><td>Kelly</td><td>kelly@gmail.com</td><td>USA</td></tr> <tr><td>Kamana</td><td>kamna@gmail.com</td><td>India</td></tr> <tr><td>Anay</td><td>anay@gmail.com</td><td>Canada</td></tr> </table> |
The above example will produce the following output-
Bootstrap Table: Striped Rows
Used to provide zebra-strips.
For adding stripped in bootstrap table class.table-striped is used
Bootstrap Table: Striped Rows
<table class='table table-striped'> <tr><th>Name</th><th>Email</th><th>Country</th></tr> <tr><td>Jhohn</td><td>jhone@gmail.com</td><td>USA</td></tr> <tr><td>Kelly</td><td>kelly@gmail.com</td><td>USA</td></tr> <tr><td>Kamana</td><td>kamna@gmail.com</td><td>India</td></tr> <tr><td>Anay</td><td>anay@gmail.com</td><td>Canada</td></tr> </table> |
The above example will produce the following output-
Bootstrap Table: Table Hover
Used to provide hover functionality in table.
For table hover in bootstrap table class.table-hover is used
Bootstrap Table: Table Hover
<table class='table table-hover'> <tr><th>Name</th><th>Email</th><th>Country</th></tr> <tr><td>Jhohn</td><td>jhone@gmail.com</td><td>USA</td></tr> <tr><td>Kelly</td><td>kelly@gmail.com</td><td>USA</td></tr> <tr><td>Kamana</td><td>kamna@gmail.com</td><td>India</td></tr> <tr><td>Anay</td><td>anay@gmail.com</td><td>Canada</td></tr> </table> |
The above example will produce the following output-
Advertisements