FlashSlideshow-Maker.com

Bootstrap Table Styles

Introduction

Tables are present in almost all apps (web, desktop or mobile program) and they are a important component in presenting information to the final user. The HTML tables are really used to present info in framework way like rows and columns . With working with Bootstrap 4 framework you are able to easily increase the look of the table.

Today, with the significance that the user interface has, knowing exactly how to improve the appearance of a Bootstrap table comes to be as relevant as it is. In this situation, one of the technologies that have become reference is Bootstrap. This front-end framework, within a lot of other features , provides a amount of features for designing and optimizing the presentation of different components, such as tables.

Basic table in Bootstrap

To design a table by using Bootstrap, just incorporate the table class to the

<table>
tag, and a number of visual formatting will just be applied , as illustrated on the screenshot .

Bootstrap  main table

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Inverse tables.

Among one of the fresh tables in Bootsrap 4 is the inverse tables. Class

.table-inverse
can easily transform the color selection of the table.

Bootstrap inverse table
<table class="table table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Extra classes

For tables there are additionally some classes that help you to use other designs to a table ( see post), they are:

table-striped
Toggles the colour of table rows;

table-bordered
Adds border to table;

table-hover
Turns on the highlight of a Bootstrap Table Example line when we hover the mouse cursor over it;

table-condensed
Reduces the height of table rows, making it more compact.

To use these designs, simply add in the chosen classes to the: <table>: <table class="table table-striped table-bordered table-condensed table-hover">

Table head options

Much like default and inverse tables, choose one of two modifier classes to make

<thead>
appear light or dark gray.

Table head options
<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Striped rows

Zebra-like stripes may be provided with the

.table-striped
class, an good example

Bootstrap striped rows
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hover Rows

To generate a hover effect in the rows of your table provide the

.table-hover
class ( discover more here):

Bootstrap hover rows
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

Bordered Table

You can easily provide the borders on every single table slide and a cell by using the

.table-bordered
class:

Bootstrap bordered table
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Condensed Table

Wherever you need to make your table a lot more compact - on that occasion you can cut cell padding in half using this class:

.table-condensed
.

Take note that, while Bootstrap 4 uses

.table-sm
to condense a table, Bootstrap 3 uses
.table-condensed
. Both cut cell padding in half.

Bootstrap condensed table
<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

Contextual Classes of Bootstrap Table Design

Use the contextual classes to color a table cells (

<td>
) and table rows (
<tr>
):

Bootstrap contextual classes
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-success">...</td>
  <td class="table-warning">...</td>
  <td class="table-danger">...</td>
  <td class="table-info">...</td>
</tr>

Changing the rows of a table Bootstrap 3 doesn't make use of the

.table-
prefix for its contextual classes. Bootstrap 3 uses
.active
whereas Bootstrap 4 uses
.table-active
. Other than that, both versions work with the identical 5 contextual keywords (active, success, info, warning, danger). Shown below you can inspect the information about each one practical option:

● active: Adds the focus color to the table row or table cell

● success: Indicates a positive or successful action

● info: Signifies a neutral information change or action

● warning: Signifies a caution that you might need care

● danger: Indicates a potentially negative or dangerous action

Responsive Tables

To create a responsive table - use the

.table-responsive
class. Table rolls in the horizontal course on devices that under 768px. If the device is larger than 768px wide, then you will see no difference :

Bootstrap responsive tables

Bootstrap 4 allows you to add the

.table-responsive
class to the actual <table> element. Bootstrap 3 tables required that you add that class to a parent <div> element.

Examine a few on-line video tutorials about Bootstrap 4 tables

Linked topics:

Bootstrap Table Responsive

__

W3schools:Bootstrap table tutorial

Bootstrap table  training

Bootstrap Tables Lecture

Bootstrap Tables Lecture