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