Create Various Elegant Tables With the Heal Of Bootstrap

Many of you may not know much about a table. In such a case, it is better we start off by gaining some knowledge about it. A HTML table is basically used to put forward data in a grid format, such as in the form of columns and rows. These tables may not look much attractive but with the help of bootstrap we can add design and style to it. Bootstrap easily enhances the overall appearance of tables. For those who are not aware about Bootstrap, it is basically a computing technique which is used to load any program into the computer with assistance of some initial instructions.

How to come up with a simple table with the help of Bootstrap?

You can start off by creating tables with the help of basic styling which comprises of small cell padding and horizontal dividers. Add the Bootstrap class table to the<table> element. This will give you a simple table with separate row titles and materials to fill the rows. For example, if you wish to make a simple table comprising of names of people and their emails ids, you can easily make such a table with the help of Bootstrap.

Example



<table class="table"> 
    <thead> 
        <tr> 
            <th> Row</th> 
            <th> First Name</th> 
            <th> Last Name</th> 
            <th> Email</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td> 1</td> 
            <td> John</td> 
            <td> Carter</td> 
            <td> johncarter@mail.com</td> 
        </tr> 
        <tr> 
            <td> 2</td> 
            <td> Peter</td> 
            <td> Parker</td> 
            <td> peterparker@mail.com</td> 
        </tr> 
        <tr> 
            <td> 3</td> 
            <td> John</td> 
            <td> Rambo</td> 
            <td> johnrambo@mail.com</td> 
        </tr> 
    </tbody> 
</table> 
 

Output :

Cinque Terre

Alternate backgrounds in a table

Many a times, you may feel that alternate backgrounds may help your table look better. In such cases, you can achieve styling with the help of Bootstrap. You can easily create a table of your choice with alternate zebra stripes in the background. All you need to do is add Bootstrap’s class table-striped to the table base class. The result will be a table with black and white backgrounds will appear in your document, thus giving you a table of your desired look. Going by with the previous example, user will now have different names of people in either black or white background.

Table with cell borders

Sometimes, if you look at a table with different cell borders, you will find it more attractive than a borderless table. Bootstrap can also assist you in achieving this for your table. Simply add an additional Bootstrap class table bordered to the table base class. The end results here would be separate borders will be placed for different cells. Now, names and their email ids will appear in separate bordered cells thus giving the table more crisp and precise look.

Example


  <table class="table table-bordered"> 
    <thead> 
        <tr> 
            <th> Row</th> 
            <th> First Name</th> 
            <th> Last Name</th> 
            <th> Email</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td> 1</td> 
            <td> John</td> 
            <td> Carter</td> 
            <td> johncarter@mail.com</td> 
        </tr> 
        <tr> 
            <td> 2</td> 
            <td> Peter</td> 
            <td> Parker</td> 
            <td> peterparker@mail.com</td> 
        </tr> 
        <tr> 
            <td> 3</td> 
            <td> John</td> 
            <td> Rambo</td> 
            <td> johnrambo@mail.com</td> 
        </tr> 
    </tbody> 
</table> 
 

Output :

Cinque Terre

Initiate hover state on your table

On various tables you may notice that different columns change their backgrounds as you hover with your mouse on these columns or cells. In a way this highlights the exact location of your mouse pointer on the table. If you also wish to initiate the same hover state on your table, you can start off by adding table-hover to the table base class. The result will enable hover state on your table and give the same result where the background gets highlighted according to the placement of mouse pointer. It is one of the most amazing features of bootstraps which is most often used by the users.

Make your table compact

Often the content on your table has loads of data consuming lots of space in your document or disk. In such cases, you can easily make your table compact to save space. Simple add an extra class table-condensed to the table base class. This makes any table condensed and helps in saving lots of space.

There are many other formats you can achieve for your table to make it look more attractive and presentable. All you need to do is, follow the instructions on Bootstrap and ensure that right steps are followed to implement design and styling in the template.