Bootstrap Tutorial - Bootstrap Table

The HTML tables presents data in grid manner.

The following table lists the various elements supported by Bootstrap.

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

Basic Table Style

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. The basic layout has a top border on all of the <td> elements:

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from w w w . jav a 2 s  .  c  o m-->
<body style='margin: 20px;'>

  <table class="table">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>


</body>
</html>

Click to view the demo

For basic styling-light padding and only horizontal dividers-add the base class .table to any <table>.

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--  w w w .j  a va  2  s.com-->
<body style='margin: 20px;'>

  <table class="table table-bordered">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Click to view the demo

Condensed Table

Add .table-condensed to make tables more compact by cutting cell padding in half.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--  w w  w. j  av a2  s.co  m-->
<body style='margin: 20px;'>

  <table class="table table-condensed">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Click to view the demo

Contextual table classes

Use contextual classes to color table rows or individual cells.

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

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from  w  ww.ja va 2 s  . c o  m-->
<body style='margin: 20px;'>

     <table class="table table-condensed">
          <caption>This is the caption.</caption>
          <thead>
               <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
               </tr>
          </thead>
          <tbody>
               <tr class="success">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr class="danger">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr class="active">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr class="warning">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
          </tbody>
     </table>

</body>
</html>

Click to view the demo

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from w w  w.  ja  v a2s .  c  om-->
<body style='margin: 20px;'>

  <table class="table table-hover">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Click to view the demo

Striped Table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--  w ww.  j  a  va 2 s .c  o m-->
<body style='margin: 20px;'>

  <table class="table table-striped">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Click to view the demo

Responsive tables

We can create responsive tables to enable scrolling on small devices (<768px).

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{<!--  w  ww.  j  a  v a2  s  . com-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="table-responsive"> 
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Row ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Biography</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Carter</td>
                    <td>j@mail.com</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>p@mail.com</td>
                    <td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Tom</td>
                    <td>Smith</td>
                    <td>j@mail.com</td>
                    <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

Click to view the demo