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-

basic-table

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 tables example

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 tables example condenced

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 tables striped example

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>

Try All In One »

The above example will produce the following output-

table-hover


Advertisements

Add Comment

📖 Read More