Post
Ask Question

Creating Table Using Twitter Bootstrap

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 a static navbar.

See more at: http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php#sthash.8Za94Odc.dpuf

What is Bootstrap?

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 with 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.

Simple table

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.

  1. Table Class
  2. Bordered-Table Class
  3. table-striped
  4. table-hover
Using Bootstrap CSS class="table"

Now first we use the Table class with the 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

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

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


Similar Articles