In this post, we are learning about Bootstrap Table.
In previous post I wrote about what is Bootstrap?,
How to setup Bootstrap?,
Bootstrap Grid System,
Bootstrap Container Class ,
Bootstrap Nested column and
Bootstrap Offset Columns.
In Bootstrap table creating is so simple.Bootstrap provides a clean layout for it.
Some of the table elements supported by Bootstrap are:
|
Sr.No
|
Tag
|
Description
|
|
1)
|
<table>
|
Used for displaying data in a tabular format
|
|
2)
|
<thead>
|
Used for table header rows ( <tr>) to label table columns
|
|
3)
|
<tbody>
|
Used for table rows (<tr>) in the body of the table.
|
|
4)
|
<tr>
|
Used 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 we want create a basic table in bootstrap we need to add the base class
of .table to any table as shown in the following example:
Basic-Table.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Country</th>
<th>Currency</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>India</td>
<td>Indian rupee</td>
<td>INR</td>
</tr>
<tr>
<td>Japan</td>
<td>Japanese yen</td>
<td>JPY</td>
</tr>
<tr>
<td>Australia</td>
<td>Australian dollar</td>
<td>AUD</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of the above code:
Output
Optional Table Classes
Along with the base table markup and the .table class, there are a few additional classes that we can use to style
the markup.Below we will give you a glimpse of all these classes.
1) STRIPED TABLE :
If we add the
.table-striped class then get stripes on rows within the <tbody> as shown in the following example.
Strped-Table.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Country</th>
<th>Currency</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>India</td>
<td>Indian rupee</td>
<td>INR</td>
</tr>
<tr>
<td>Japan</td>
<td>Japanese yen</td>
<td>JPY</td>
</tr>
<tr>
<td>Australia</td>
<td>Australian dollar</td>
<td>AUD</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of the above code:
Output
2) BORDERED TABLE :
If we add the
.table-bordered
class then we will get borders surrounding every element and rounded corners around
the entire table as seen in the following example:
Bordered-Table.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Country</th>
<th>Currency</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>India</td>
<td>Indian rupee</td>
<td>INR</td>
</tr>
<tr>
<td>Japan</td>
<td>Japanese yen</td>
<td>JPY</td>
</tr>
<tr>
<td>Australia</td>
<td>Australian dollar</td>
<td>AUD</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of the above code:
Output
3) HOVER TABLE :
If we add the
.table-hover
class then a light gray background will be added to rows while the cursor hovers over them,
as seen in the following example:
Hover-Table.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Country</th>
<th>Currency</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>India</td>
<td>Indian rupee</td>
<td>INR</td>
</tr>
<tr>
<td>Japan</td>
<td>Japanese yen</td>
<td>JPY</td>
</tr>
<tr>
<td>Australia</td>
<td>Australian dollar</td>
<td>AUD</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of the above code:
Output
4) 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>.
Contextual-Table.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Country</th>
<th>Currency</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>India</td>
<td>Indian rupee</td>
<td>INR</td>
</tr>
<tr class="success">
<td>Japan</td>
<td>Japanese yen</td>
<td>JPY</td>
</tr>
<tr class="info">
<td>Australia</td>
<td>Australian dollar</td>
<td>AUD</td>
</tr>
<tr class="active">
<td>Russia</td>
<td>Russian ruble</td>
<td>RUB</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of the above code:
Output
5) Responsive Tables :
By wrapping any
.table
in
.table-responsive
class, we will make the table scroll horizontally up to small devices
(under 768px). When viewing on anything larger than 768px wide, we will not see any difference in these tables.
Responsive-Table.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table class="table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Country</th>
<th>Currency</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>India</td>
<td>Indian rupee</td>
<td>INR</td>
</tr>
<tr class="success">
<td>Japan</td>
<td>Japanese yen</td>
<td>JPY</td>
</tr>
<tr class="info">
<td>Australia</td>
<td>Australian dollar</td>
<td>AUD</td>
</tr>
<tr class="active">
<td>Russia</td>
<td>Russian ruble</td>
<td>RUB</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here is the output of the above code:
Output
No comments:
Post a Comment
Please do not enter any spam link in the comment box.