• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Tables

June 13, 2014 //  by Krishna Srinivasan//  Leave a Comment

This tutorial explains about different types of table structures available in Bootstrap. As we know, tables are used to represent the data in the form of rows and columns. The Bootstrap framework enables us to create table by using .table class to <table> element. There are some of the table elements which we will use in bootstrap as follows:

  • <table>: It is set of data values represents in a tabular format using vertical columns and horizontal rows.
  • <thead>: It is used to define headings for table columns in a table.
  • <tbody>: It is used to group body content in a table.
  • <tr>: It is used to define row of cells in a table.
  • <td>: It is used to define a cell which contains data.
  • <th>: It is used to define a header cell in a table.
  • <caption>: It describes nature or title of what the table holds and it is always first descendent of a <table>.

Also read:

  • Bootstrap Typography
  • Bootstrap Grid System
  • Bootstrap CSS

Example of Simple Table

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Table Example</h2>
<table class="table">
   <caption>Top five cities in India</caption>
   <thead>
      <tr>
	  <th>Position</th>
	  <th>City Name</th>
      </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Run Bootstrap Simple Table Demo

Bootstrap Simple Table Picture

Example of Striped Rows Table

We can make background of table like zebra strips by simply using .table-striped class to the <.table> base class.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows Table Example</h2>
<table class="table table-striped">
   <caption>Top Five Cities in India</caption>
    <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Run Bootstrap Striped Rows Table Demo

Bootstrap Striped Rows Table Picture

Example of Bordered Table

If we want to make border surrounding every element in a table, then we could make use of .table-bordered class to the <.table> base class.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table Example</h2>
<table class="table table-bordered">
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	 </tr>
   </tbody>
</table>
</body>
</html>
  • Run Bootstrap Bordered Table Demo

Bootstrap Bordered Table Picture

Example of Hover Rows Table

We can also make table with mouse hover styled in Bootstrap by using .table-hover class to the <.table> base class.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows Table Example</h2>
<table class="table table-hover">
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Run Bootstrap Hover Rows Table Demo

Bootstrap Hover Rows Table Picture

Example of Condensed Table

We could make table more compact and save the space by using the class .table-condensed class to the <.table> base class. It makes table more compact by cutting the cell padding in half.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Condensed Table Example</h2>
<table class="table table-condensed">
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr>
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr>
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr>
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr>
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Run Bootstrap Condensed Table Demo

Bootstrap Condensed Table Picture

Example of Contextual Classes

Bootstrap provides some contextual classes to emphasize the cells in the table with some light weight styles by using following classes:

  • .active: It provides hover color to a particular cell when we keep mouse on the particular cell.
  • .success: It defines when the successful action happens on a cell.
  • .warning: It indicates warning that needs to pay the attention.
  • .danger: It defines when there may be an error or dangerous action.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Classes Example</h2>
<table class="table table-condensed">
   <caption>Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr class="active">
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr class="success">
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr class="warning">
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr class="danger">
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</body>
</html>
  • Run Bootstrap Contextual Classes Demo

Bootstrap Contextual Classes Picture

Example of Responsive Table

Responsive table allows enabling horizontal scrolling on small devices which contains width below 768px. To make horizontal scroll, we wrap .table in .table-responsive class. However viewing on larger devices (more than 7698px) will not make much difference.

 <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Responsive Table Example</h2>
<div class="table-responsive">
<table class="table table-bordered">
   <caption class="text-success">Top Five Cities in India</caption>
   <thead>
       <tr>
	   <th>Position</th>
	   <th>City Name</th>
       </tr>
   </thread>
   <tbody>
       <tr class="active">
	   <td>1</td>
	   <td>Mumbai</td>
       </tr>
       <tr>
	   <td>2</td>
	   <td>Delhi</td>
       </tr class="success">
       <tr>
	   <td>3</td>
	   <td>Bangalore</td>
	</tr>
        <tr class="warning">
	   <td>4</td>
           <td>Hyderabad</td>
	</tr>
        <tr class="danger">
	   <td>5</td>
	   <td>Ahmedabad</td>
	</tr>
   </tbody>
</table>
</div>
</body>
</html>
  • Run Bootstrap Responsive Table Demo

Bootstrap Responsive Table Picture

Bootstrap Reference

  • Official Website
  • Getting Started Bootstrap
  • Wikipedia

Category: BootstrapTag: Bootstrap Basics

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Bootstrap Typography
Next Post: Bower Tutorial »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact