English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap basic tutorial

Bootstrap plugins

Bootstrap Tables

Bootstrap provides a clear layout for creating tables. The following table lists some of the table elements supported by Bootstrap:

TagClass
<table>Add basic styles to the table.
<thead>Container element for the table header row (<tr>), used to identify table columns.
<tbody>Container element for table rows within the table body (<tr>).
<tr>A container element for a group of table cells appearing on a single row (either <td> or <th>).
<td>Default table cell.
<th>Special table cell used to identify columns or rows (depending on the scope and position). It must be used within <thead>.
<caption>A description or summary of the content stored in the table.

Table classes

The following styles can be used for tables:

The contextual classes listed in the table below allow you to change the background color of table rows or individual cells.ClassOnline Example
be wrapped inAdd basic styles to any <table> (only horizontal separators)Try it out
be wrapped in-stripedAdd zebra-striped patterns within <tbody> (IE8 (Not supported)Try it out
be wrapped in-borderedAdd borders to all table cellsTry it out
be wrapped in-hoverEnable mouse hover state on any row within <tbody>Try it out
be wrapped in-condensedMake the table more compactTry it out
Combining all table classesTry it out

<tr>, <th> and <td> classes

The following classes can be used for table rows or cells:

The contextual classes listed in the table below allow you to change the background color of table rows or individual cells.ClassOnline Example
DescriptionApply the hover color to rows or cellsTry it out
Apply hover color to a specific row or cellRepresents a successful operationTry it out
.infoRepresents a change in informationTry it out
Indicates a successful or positive actionRepresents a warning operationTry it out
Indicates a warning that needs attentionRepresents a dangerous operationTry it out

Basic table

If you want a basic table with only padding and horizontal rules, add class be wrapped in, as shown in the following example:

When viewed on devices with a screen width larger than 768px, you will not see any difference.

Example
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Basic table</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
	<caption>Basic table layout</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<caption>Simplified Table Layout</<th>
　　　　　　　　　<th>Name</<th>
　　　　　　</tr>
　　　</<thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<th>Postal Code</td>
　　　　　　　　　<td>Tanmay</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　000/td>
　　　　　　　　　<td>Sachin</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>
Test and see ‹/›

The results are as follows:

Optional table classes

In addition to the basic table tags and .table class, there are some classes that can be used to define styles for the tags. Below, I will introduce these classes.

Striped table

By adding be wrapped in-striped class, you will see stripes on the rows within <tbody>, as shown in the following example:

When viewed on devices with a screen width larger than 768px, you will not see any difference.

Example
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Striped table</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Simplified table<-striped">
	<caption>Striped table layout</caption>
	<thead>
		<tr>
			<caption>Simplified Table Layout</<th>
			<th>Name</<th>
			<th>City</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postal Code</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Test and see ‹/›

The results are as follows:

Border table

By adding be wrapped in-bordered class, you will see a border around each element, and the corners of the entire table are rounded, as shown in the following example:

When viewed on devices with a screen width larger than 768px, you will not see any difference.

Example
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Border table</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Simplified table<-bordered">
	<caption>Border table layout</caption>
	<thead>
		<tr>
			<caption>Simplified Table Layout</<th>
			<th>Name</<th>
			<th>City</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postal Code</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Test and see ‹/›

The results are as follows:

Hover table

By adding be wrapped in-hover class, a light gray background will appear when the pointer hovers over the row, as shown in the following example:

When viewed on devices with a screen width larger than 768px, you will not see any difference.

Example
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Hover table</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Simplified table<-hover">
	<caption>Hover table layout</caption>
	<thead>
		<tr>
			<caption>Simplified Table Layout</<th>
			<th>Name</<th>
			<th>City</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postal Code</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Test and see ‹/›

The results are as follows:

Simplified table

By adding be wrapped in-condensed The inline margin (padding) is split in half to make the table appear more compact, as shown in the following example. This is very useful when you want the information to look more compact.

When viewed on devices with a screen width larger than 768px, you will not see any difference.

Example
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Simplified table</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Simplified table<-<table class="table table
	condensed">/caption>
	<thead>
		<tr>
			<caption>Simplified Table Layout</<th>
			<th>Name</<th>
			<th>City</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postal Code</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Test and see ‹/›

The results are as follows:

<td>Pune<

Contextual classes

The contextual classes listed in the table below allow you to change the background color of table rows or individual cells.Class
Description.active
Apply hover color to a specific row or cell.success
Indicates a successful or positive action.warning
Indicates a warning that needs attention.danger

Indicates a dangerous or potentially negative action

When viewed on devices with a screen width larger than 768px, you will not see any difference.

Example
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　These classes can be applied to <tr>, <td>, or <th>./title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
	Contextual classes</caption>
	<thead>
		<tr>
			<th>Product</<th>
			<th>Payment Date</<th>
			<th>Status</<th>
		</tr>
	</<thead>
	<tbody>
		<caption>Contextual Table Layout<
			<td>Product1</td>
			<td>23/11/2013</td>
			<td>Pending Shipment</td>
		</tr>
		<tr class="active">
			<td>Product2</td>
			<td>10/11/2013</td>
			<td>In Transit</td>
		</tr>
		<tr class="success">
			<td>Product3</td>
			<td>20/10/2013</td>
			<td>Pending Confirmation</td>
		</tr>
		<tr class="warning">
			<td>Product4</td>
			<td>20/10/2013</td>
			<td>Returned</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Test and see ‹/›

The results are as follows:

<tr class="danger">

responsive table be wrapped in By placing any be wrapped in-.table responsive 768class, you can make the table horizontally scrollable to fit small devices (less than 768px). When the screen width is greater than

When viewed on devices with a screen width larger than 768px, you will not see any difference.

Example
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　<title>Bootstrap Example</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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 Shipment</td>
			</tr>
			<tr>
				<td>Product2</td>
				<td>10/11/2013</td>
				<td>In Transit</td>
			</tr>
			<tr>
				<td>Product3</td>
				<td>20/10/2013</td>
				<td>Pending Confirmation</td>
			</tr>
			<tr>
				<td>Product4</td>
				<td>20/10/2013</td>
				<td>Returned</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap FormsBootstrap Code