Bootstrap | Tables

Bootstrap | Tables


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.



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
NameCity
KennedyPort Harcourt
BethelLagos

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
NameCityZipcode
KennedyPort Harcourt500101
BethelLagos100001
StephanieAbuja900101


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
NameCityZipcode
KennedyPort Harcourt500101
BethelLagos100001
StephanieAbuja900101

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
NameCityZipcode
KennedyPort Harcourt500101
BethelLagos100001
StephanieAbuja900101


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
NameCityZipcode
KennedyPort Harcourt500101
BethelLagos100001
StephanieAbuja900101

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
ProductPayment DateStatus
Product123/11/2013Pending
Product222/09/2021Delivered
Product322/09/2021In Call to confirm
Product422/09/2021Declined

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
ProductPayment DateStatus
Product122/09/2021Pending
Product222/09/2021Delivered
Product322/09/2021In Call to confirm
Product422/09/2021Declined


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.