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 formatHere 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 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>
<thead>
we are declaring <tr>
and <th>
to create the head of the table in rows.<tbody>
we are declaring two rows as <tr
>
and <td> is used to defines the values. output
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>
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 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>
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>
<thead>
we are declaring <tr>
and <th>
to create the head of the table in rows.<tbody>
we are declaring rows as <tr
>
and <td> is used to defines the values. output
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>
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>
<thead>
we are declaring <tr>
and <th>
to create the head of the table in rows.<tbody>
we are declaring rows as <tr
>
and <td> is used to defines the values. output
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>
In the above code snippet we are adding background colors to the table by using predefined contextual classes.
bg-primary
. bg-info
and bg-danger
to the <tr> class. which adds the background color to the rows of the table.output
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>
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
Views: 5965 | Post Order: 10