Working with Tables in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 4198 red flag
Rating: 4 out of 5  
 1 vote(s)

In HTML, Tables plays major role in making designs as good look and feel. Table fits the content in the proper way to meet the user's satisfaction. '<table>' tag is used to create a table in HTML. CSS is used to beautify the tables.
Lets see how Bootstrap is helping to create different types of tables in a easy way.
Recommendation
Read Introduction to Bootstrap before this article.

Introduction

Twitter Bootstrap contains predefined CSS of all functions to make user easy to design. Now lets see creating Tables by using Bootstrap CSS.

Including Bootstrap to the Project

First thing is we need to install Bootstrap in our project. Please read Introduction to Bootstrap to know how to get Bootstrap into our project.

Using the code

There are so many predefined classes in the bootstrap.css file to create different types of tables. Lets see one by one briefly.

We have a following code below as an example to create table
<table class="table">
     <thead>
	  <tr>
	      <th>S/no.</th>
              <th>Name</th>
              <th>Details</th>
              <th>Contact</th>
          </tr>
     </thead>
           <tbody>
                <tr>
                    <td>1</td>
                    <td>DotNetFunda</td>
                    <td>Fundamentals of .Net</td>
                    <td>support@dotnetfunda.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>ItFunda</td>
                    <td>Training of Microsoft Technologies</td>
                    <td>support@itfunda.com</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>KidsFunda</td>
                    <td>Learning Fundamentals for Kids</td>
                    <td>support@kidsfunda.com</td>
                </tr>
            </tbody>
        </table>
Now open the bootstrap.css file in your project and you will see a lot of CSS written in it. Dont get confused.
Just Press Ctrl+F and you will find search box. Search for 'table' keyword.

Now there is a lot of CSS you can see under the table class. tbody and thead tags in the above code are being used from Bootstrap. You can see them in the bootstrap.css

Output of the above code



If you want to make the table as a bordered one, just add 'table-bordered' to the table class in your code as below.
<table class="table table-bordered">
Now you will see the table with borders in your browser as below,


And if you want to change your table with alternate backgrounds(alternate table rows), just add 'table-striped' to the table class in your code as below.
<table class="table table-striped">
Now you will see the table with alternate backgrounds in your browser. like below,


And if you want to add a hover state to the table rows, then add 'table-hover'  to the table class of your code as below,
<table class="table table-hover">
Now run the code and you will see the hover effect for table rows like below.


Also we can change background colors of rows by using predefined color classes of Bootstrap as below code.
<table class="table table-hover">
            <thead>
                <tr>
                    <th>S/no.</th>
                    <th>Name</th>
                    <th>Details</th>
                    <th>Contact</th>
                </tr>
            </thead>
            <tbody>
                <tr class="warning">
                    <td>1</td>
                    <td>DotNetFunda</td>
                    <td>Fundamentals of .Net</td>
                    <td>support@dotnetfunda.com</td>
                </tr>
                <tr class="danger">
                    <td>2</td>
                    <td>ItFunda</td>
                    <td>Training of Microsoft Technologies</td>
                    <td>support@itfunda.com</td>
                </tr>
                <tr class="success">
                    <td>3</td>
                    <td>KidsFunda</td>
                    <td>Learning Fundamentals for Kids</td>
                    <td>support@kidsfunda.com</td>
                </tr>
            </tbody>
        </table>
In the above code you can see that we added classes to the table rows which will change the background colors of the rows.
Now the output of the above code becomes as below,


Conclusion

In this article we have seen creating different types tables in HTML using Bootstrap. You can change the 'CSS' in your bootstrap.css as per your convenience. Hope you understand. Feel free to ask any questions or doubts below.

Thanks for reading, 


Recommendation
Read Working with Lists in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 5/31/2014 | Points: 25
Good one Vamsi.

Login to post response

Comment using Facebook(Author doesn't get notification)