Bootstrap | Tables - WebDesignTutorialz

Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about Bootstrap Tables.

Bootstrap gives a clean layout for building tables. The following are some of the table elements supported by Bootstrap -

Sr.No.	Tag & Description
1	<table> Wrapping element for displaying data in a tabular format
2	<thead> Container element for table header rows (<tr>) to label table columns.
3	<tbody> Container element for table rows (<tr>) in the body of the table.
4	<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row.
5	<td> Default table cell.
6	<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
7	<caption> Description or summary of what the table holds.

READ: Bootstrap | Code

Basic Table

If you want a nice basic table style with just some light padding and horizontal dividers, add the base class of .table to any table.

Example

Following below is a simple example -

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Kennedy</td>
         <td>Port Harcourt</td>
      </tr>
      
      <tr>
         <td>Bethel</td>
         <td>Lagos</td>
      </tr>
   </tbody>
</table>

Output

When the above example is executed, it will produce the following result -

Basic Table Layout
Name	City
Kennedy	Port Harcourt
Bethel	Lagos

Optional Table Classes

Along with the base table markup and the .table class, there are few extra classes that you can use to style the markup. We will be looking at all these additional classes in the following sections below.

Striped Table

Adding the .table-striped class, you will get stripes on rows within the <tbody>.

Example

Following below is a simple example -

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Zipcode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Kennedy</td>
         <td>Port Harcourt</td>
         <td>500101</td>
      </tr>
      
      <tr>
         <td>Bethel</td>
         <td>Lagos</td>
         <td>100001</td>
      </tr>
      
      <tr>
         <td>Stephanie</td>
         <td>Abuja</td>
         <td>900101</td>
      </tr>
   </tbody>
</table>

Output

When the above example is executed, it will produce the following result -

Striped Table Layout
Name	City	Zipcode
Kennedy	Port Harcourt	500101
Bethel	Lagos	100001
Stephanie	Abuja	900101

READ: Bootstrap | Typography

Bordered Table

By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table.

Example

Following below is a simple example -

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Zipcode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Kennedy</td>
         <td>Port Harcourt</td>
         <td>500101</td>
      </tr>
      
      <tr>
         <td>Bethel</td>
         <td>Lagos</td>
         <td>100001</td>
      </tr>
      
      <tr>
         <td>Stephanie</td>
         <td>Abuja</td>
         <td>900101</td>
      </tr>
   </tbody>
	
</table>

Output

When the above example is executed, it will produce the following result -

Bordered Table Layout
Name	City	Zipcode
Kennedy	Port Harcourt	500101
Bethel	Lagos	100001
Stephanie	Abuja	900101

Hover Table

By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them.

Example

Following below is a simple example -

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Zipcode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Kennedy</td>
         <td>Port Harcourt</td>
         <td>500101</td>
      </tr>
      
      <tr>
         <td>Bethel</td>
         <td>Lagos</td>
         <td>100001</td>
      </tr>
      
      <tr>
         <td>Stephanie</td>
         <td>Abuja</td>
         <td>900101</td>
      </tr>
   </tbody>
</table>

Output

When the above example is executed, it will produce the following result -

Hover Table Layout
Name	City	Zipcode
Kennedy	Port Harcourt	500101
Bethel	Lagos	100001
Stephanie	Abuja	900101

READ: Bootstrap | CSS Overview

Condensed Table

By adding the .table-condensed class, row padding is cut in half to condense the table.

Example

Following below is a simple example -

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Zipcode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Kennedy</td>
         <td>Port Harcourt</td>
         <td>500101</td>
      </tr>
      
      <tr>
         <td>Bethel</td>
         <td>Lagos</td>
         <td>100001</td>
      </tr>
      
      <tr>
         <td>Stephanie</td>
         <td>Abuja</td>
         <td>900101</td>
      </tr>
   </tbody>
</table>

Output

When the above example is executed, it will produce the following result -

Condensed Table Layout
Name	City	Zipcode
Kennedy	Port Harcourt	500101
Bethel	Lagos	100001
Stephanie	Abuja	900101

Contextual Classes

The contextual classes allows you change the background color of your table rows or individual cells. Following table is the list of contextual classes in Bootstrap -

Sr.No.	Class & Description
1	.active Applies the hover color to a particular row or cell
2	.success Indicates a successful or positive action
3	.warning Indicates a warning that might need attention
4	.danger Indicates a dangerous or potentially negative action

These classes can be applied to <tr>, <td>, or <th>.

Example

Following below is a simple example -

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>22/09/2021</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>22/09/2021</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>22/09/2021</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>22/09/2021</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Output

When the above example is executed, it will produce the following result -

Contextual Table Layout
Product	Payment Date	Status
Product1	23/11/2013	Pending
Product2	22/09/2021	Delivered
Product3	22/09/2021	In Call to confirm
Product4	22/09/2021	Declined

Responsive Table

By wrapping any .table in .table-responsive class, you make the table scroll horizontally up to small devices (under 768pixes). When viewing on anything larger than 768px wide, you won't see a difference in these tables.

Example

Following below is a simple example -

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>22/09/2021</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>22/09/2021</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>22/09/2021</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>22/09/2021</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>

Output

When the above example is executed, it will produce the following result -

Responsive Table Layout
Product	Payment Date	Status
Product1	22/09/2021	Pending
Product2	22/09/2021	Delivered
Product3	22/09/2021	In Call to confirm
Product4	22/09/2021	Declined

READ: Bootstrap | Grid System

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Forms.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

WebDesignTutorialz

Bootstrap | Tables

Basic Table

Example

Output

Optional Table Classes

Striped Table

Example

Output

Bordered Table

Example

Output

Hover Table

Example

Output

Condensed Table

Example

Output

Contextual Classes

Example

Output

Responsive Table

Example

Output

Post a Comment

Get new posts by email:

Python Tkinter Colors

Html Layout

Python Tkinter Relief Styles

WordPress Optimization Tips Tutorial

Html-Comments