JavaScript Popup Window

Bootstrap Tables Template

Overview

Tables are present in most programs (web, desktop or mobile application) and they are a key element in delivering records to the final user. The HTML tables are really used to present data in framework way such as rows and columns . With using Bootstrap 4 framework you are capable to easily increase the appearance of the table.

Nowadays, with the importance that the user interface has, realising the way to increase the look of a Bootstrap table comes to be as relevant as it is. In this scenario, one of the technologies that have become reference is Bootstrap. This front-end framework, among many other features , provides a variety of features for styling and improving the display of different elements, such as tables.

Main table in Bootstrap

To design a table using Bootstrap, just bring in the table class to the 

<table>
tag, and some visional format will actually be applied , as demonstrated on the screenshot .

Bootstrap standard 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 the new tables in Bootsrap 4 is the inverse tables. Class 

.table-inverse
can 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>

Various other classes

For tables there are additionally some classes that help you to apply many different looks to a table ( read here), they are:

● 

table-striped
Toggles the color of table rows;

● 

table-bordered
Adds border to table;

● 

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

● 

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

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

Table head features

The same as default and inverted tables, apply one of two modifier classes to make 

<thead>
appear dark or light 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 can be put in with the 

.table-striped
class, an 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 make a hover effect in the rows of your table include the 

.table-hover
class ( additional resources):

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 put in the borders on each and every table slide and a cell 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>

Compressed Table

On the occasion that you need to make your table a lot more compact - then you are able to cut cell padding in half using this class: 

.table-condensed
.

Note that, while Bootstrap 4 uses 

.table-sm
to condense a table, Bootstrap 3 uses 
.table-condensed
. Both of these 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 Tables Sortable

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 use the 

.table-
prefix for its contextual classes. Bootstrap 3 uses 
.active
whereas Bootstrap 4 uses 
.table-active
.

● active: Applies 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: Displays a warning that you may need attention

● 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 way 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.

Look at several online video short training about Bootstrap 4 tables

Connected topics:

Bootstrap Table Tutorial

__

W3schools:Bootstrap table tutorial

Bootstrap table guide

Bootstrap Tables Lecture

Bootstrap Tables Lecture

Best Free AI Website Builder

Try the power of artificial intelligence to generate websites. Get a ready website with AI website maker.


AI Website Generator



Best Free Website Software

Create awesome websites offline! No coding. 9900+ templates. Edit and save locally, upload wherever.


Free website software download
for Win, Mac, Linux!



Related Posts

  1. Bootstrap Glyphicons Using
  2. Bootstrap Grid CSS
  3. Bootstrap Form Button
  4. Bootstrap Carousel Using
  5. Bootstrap Accordion Styles

Latest Posts

  1. Top 15 AI Website Builders and Generators - Get your website built by AI.
  2. AI website maker and generator - revolutionize your online presence with AI websites .
  3. AI website generator and maker - Generate AI-powered website.

© Copyright 2024