Tables in Bootstrap

How to use Bootstrap Tables?

Bootstrap tables contains the predefined css of all functions to make user easy to design.

Thare are many different types of the tables

They are

Some of the elements which are used to create the tables are

<thead>-it determines the head of rows and columns in the table
<tbody>- it determines the body of the table
<tr>-It determines the row of the table
<td>-It is the default table cell
<th>- It determines the head of the table
<table>-It is used to display the table in tabular format

Basic-Table:

Here we are creating a basic 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>
      </tbody>
   </table>

In the above code snippet we are creating a table. We have taken class as table. In that table we are declaring <thead> and <tbody>.

1. In the <thead>
we are declaring <tr> and <th> to create the head of the table in rows.
2. In the <tbody> we are having
<tr>- represents the rows of the table and
<td>- represents the values of the table

output

Stripped Table:

Stripped table is used to create the strips in the rows of the table.

<p>Stripped table</p>
    <table class="table table-striped">
        <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>

Table-stripped

In the <thead> we are declaring <tr> and <th> to create the head of the table in rows.
In the <tbody>we are declaring two rows as <tr> and <td> is used to defines the values.

output

Bordered table:

Bodered table is used to add borders to the table

 
<p>Bordered table</p>
    <table class="table table-bordered">
        <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>
        </tbody>
    </table>

Bordered table

In the above code snipet we have creating borders to the table by using class as <table-bordered> and we have taken <thead> and <tbody>

In the <thead> we are declaring <tr> and <th> to create the head of the table in rows.

In the <tbody>we are declaring rows as <tr> and <td> is used to defines the values.

output

Hover table:

Hover table is used to add light color white the cursor is placed on the table

 <p>Hover table</p>
    <table class="table table-hover">
        <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>
        </tbody>
    </table>

Hover-table

In the above code snipet we have creating Hover to the table by using class as <table-Hover> and we have taken <thead> and <tbody>

In the <thead> we are declaring <tr> and <th> to create the head of the table in rows.
In the <tbody>we are declaring rows as <tr> and <td> is used to defines the values.

output

Condensed table:

Condensed table is used to cut the row padding in to half of the table

<p>Condensed table</p>
    <table class="table table-condensed">
        <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>
        </tbody>
    </table>

Condensed-table

In the above code snippet we are making the row padding cut in to the half the table by using class as <table-condensed> and we have taken <thead> and <tbody>

In the <thead> we are declaring <tr> and <th> to create the head of the table in rows.
In the <tbody>we are declaring rows as <tr> and <td> is used to defines the values.

output

Contextual classes

Contextual classes are used to add color to background color to the table

 <p>Contextual classes</p>
    <table>
        <thead>
            <tr class="bg-primary">
                <th>S/no.</th>
                <th>Name</th>
                <th>Details</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-info">
                <td>1</td>
                <td>DotNetFunda</td>
                <td>Fundamentals of .Net</td>
                <td>support@dotnetfunda.com</td>
            </tr>
            <tr class="bg-danger">
                <td>2</td>
                <td>ItFunda</td>
                <td>Training of Microsoft Technologies</td>
                <td>support@itfunda.com</td>
            </tr>
        </tbody>
    </table>

Contextual classes

In the above code snippet we are adding background colors to the table by using predefined contextual classes.

We have taken <thead> and <tbody>. In <thead> we have <tr> and <td> we have declared the contextual classs to <tr> as bg-primary.
In <tbody> we are having <tr> and <td>. we have declared bg-info and bg-danger to the <tr> class. which adds the background color to the rows of the table.

output

Responsive table

Responsive table is used to make the table scroll small devices horizontally

 <p>Responsive table</p>
    <table class="table-responsive">
        <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>
        </tbody>
    </table>

Table-responsive

In the above code snippet we have defined how to use responsive table. we have taken class as table responsive and it is used to scroll the tables which are under 768px small devices.

output