Bootstrap - Tables


Advertisements

Bootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap are −

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 as shown in the following example −

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

Optional Table Classes

Along with the base table markup and the .table class, there are a few additional classes that you can use to style the markup. Following sections will give you a glimpse of all these classes.

Striped Table

By adding the .table-striped class, you will get stripes on rows within the <tbody> as seen in the following example −

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Bordered Table

By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table as seen in the following example −

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Hover Table

By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them, as seen in the following example −

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Condensed Table

By adding the .table-condensed class, row padding is cut in half to condense the table. as seen in the following example. This is useful if you want any denser information.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Contextual classes

The Contextual classes shown in following table will allow you to change the background color of your table rows or individual cells.

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

<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>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Responsive Tables

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

<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>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>  	

Useful Video Courses


Video

Bootstrap Online Training

26 Lectures 2 hours

Anadi Sharma

Video

Bootstrap 4 Responsive Web Development

54 Lectures 4.5 hours

Frahaan Hussain

Video

Bootstrap By Building Projects - Includes Bootstrap 4

Featured

161 Lectures 14.5 hours

Eduonix Learning Solutions

Video

Responsive E Commerce Website Designing Without Bootstrap

20 Lectures 4 hours

Azaz Patel

Video

Bootstrap 4 for Tutorials

15 Lectures 1.5 hours

Muhammad Ismail

Video

Complete Bootstrap 5 Course From Scratch With 3 Projects

62 Lectures 8 hours

Yossef Ayman Zedan

Advertisements