Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. In this article we use some built-in Twitter Bootstrap CSS to make an attractive table. A Twitter bootstrap table can be styled and well designed. You can style your table by just adding some classes to your table and it’ll look nice.
Using Twitter Bootstrap, you may create static navbar. - See more at: http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php#sthash.8Za94Odc.dpuf
What Bootstrap is
Twitter Bootstrap was created by two guys at Twitter who wanted to speed up (bootstrap) their workload and code. The Bootstrap framework is used to develop front facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.
To read more see Bootstrap.
Include with HTML
Now to include them in the project. So let’s imagine we have a blank HTML file that goes something like the following:
HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Now we need to add a reference to the bootstrap CSS file and JavaScrit file with the HTML file as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Note: Also don’t forget to include jQuery if you’ll be using Bootstraps JS plugins.
Creating Simple Table
The following code defines the simple table using table, tr and td tags. The HTML file looks such as in the following:
<table>
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohatash</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>capetown</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Bombay</td>
</tr>
</tbody>
</table>
The HTML will render without Bootstrap as in the following:
Creating Table using Bootstrap
To make the menu more attractive with a DropDown list using Bootstrap open up the bootstrap.css file and check out the following Bootstrap CSS class.
- Table Class
- Bordered-Table Class
- table-striped
- table-hover
1. Using bootstrap CSS class="Table"
Now first we use the Table clsss with table tag. The Table class shows data in tabular form. Now open the bootstrap.css file and find the table class.
The HTML file looks such as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
margin: 50px;
}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohatash</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>capetown</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Bombay</td>
</tr>
</tbody>
</table>
</body>
</html>
The HTML will render without Bootstrap as in the following:
![Table class]()
2. Using bootstrap CSS class="Bordered-Table"
Add a table-bordered class for borders on all sides of the table and cells. Now open the bootstrap.css file and find the "Bordered-Table" class. The HTML file looks as in the following:
<table class="Bordered-table">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohatash</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>capetown</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Bombay</td>
</tr>
</tbody>
</table>
The HTML will render without Bootstrap as in the following:
![Bordered-table]()
3. Using bootstrap CSS class="table-striped table-hover"
Just another good looking table. I added the "table-hover" class because it gives a nice hovering effect. Now open the bootstrap.css file and find the "table-hover" class. The HTML file looks as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
margin: 50px;
}
</style>
</head>
<body>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohatash</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>capetown</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Bombay</td>
</tr>
</tbody>
</table>
</body>
</html>
The HTML will render without Bootstrap as in the following:
![Hover effect]()