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.