Bootstrap Tables
In bootstrap we have a number of table elements; some of them are as follows:
| Element | Description |
| < table> | This tag is used to display the data in tabular form that is in the form of table. It is considered as a wrapping element. |
| <thead> | This element is used to label the columns of the table that is to add headers to table. This element is considered as the container element. |
| <tbody> | This element is used for the rows of the table within the body of the table. This element is also considered as a container element. |
| <tr> | This element is used for the cells that are used inside a one single row. It is also a container element. |
| < td> | This element is used for the default cell of the table. |
| <th> | This element is used to for the cell of a column. This element should be used inside the <thead> tag. |
| < caption> | This element is used to add caption of the table. It means that this element is sued to add a description about what the table is for. |
Basic Table:
Consider the following example in which we have created a simple table by using the base class of .table. And the style of the table below is set by padding and by using the horizontal dividers:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example </ title >
<linkhref = “/ bootstrap / css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” ></ script >
<scriptsrc = “/ bootstrap /js / bootstrap. min. js” >< /script >
</ head >
<body>
<table class = “table”>
<caption> Layout of Employee table</caption>
<thead>
<tr>
<th>Name of Employee</th>
<th>Emp ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuart</td>
<td>021</td>
</tr>
<tr>
<td>Bill</td>
<td>024</td>
</tr>
</tbody>
</table>
</body >
</ html>
The above code will generate the following result:
OUTPUT:
In the above example, first we used the <table > tag and then we added the <caption> tag to add description to the table. Then we have the <thead> tag inside of which <th> and <tr> tags are used. The tag <tr> is used for rows and <th> for the heading of the rows. In the <tbody> tag the body of the table is defined in which we added data to rows by suing the <td> tag for each of the row. In this way a simple table is created by the combination of different types of the table tags.
Optional Table Classes:
In bootstrap to add more style to a table we have additional classes along with the .table class. In the next sections we will be demonstrating the examples of various tables which may include bordered table, striped table, etc.
Striped Table:
Consider the following example in which we have created the striped table by using .table-striped class, by using this class you can see strips on the rows of the table. It should be noted here that this class is used within the <tbody> tag:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example </ title >
<linkhref = “/ bootstrap / css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” ></ script >
<scriptsrc = “/ bootstrap /js / bootstrap. min. js” >< /script >
</ head >
<body>
<table class = “table table-striped” >
<caption> Layout of Employee Striped Table </ caption >
<thead>
<tr>
<th> Name of Employee </ th>
<th> ID </ th>
<th> City </ th>
< /tr>
</ thead>
<tbody>
<tr>
<td> Bill </ td >
<td> 024 </ td >
<td> Toronto </ td >
</ tr>
<tr>
<td> Stuart < /td >
<td> 045 </ td >
<td> London </ td >
< /tr>
<tr>
<td> Roger < /td >
<td> 064 </ td >
<td> Paris < /td >
</ tr>
< /tbody>
</ table >
</ body >
</ html>
The above code will generate the following result:
OUTPUT:
In the above example we used the .table-striped class to add strips to the rows. And in this table we have four rows one is the headings of the rows and is declared by <th> tag and other rows are declared by <td> inside the <tr> tag. The above table is about the employee in which we have the name of the employee, the ID of the employee and the city where the employee lives.
Bordered Table:
To add border to the table the .table-bordered class is used. Consider the following example in which we have used the .table-bordered class to add borders to all the four sides of the table:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example </ title >
<linkhref = “/ bootstrap / css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” ></ script >
<scriptsrc = “/ bootstrap /js / bootstrap. min. js” >< /script >
</ head >
<body>
<table class = “table table-bordered” >
<caption> Layout of Employee Bordered Table </ caption >
<thead>
<tr>
<th> Name of Employee </ th>
<th> ID </ th>
<th> City </ th>
< /tr>
</ thead>
<tbody>
<tr>
<td> Bill </ td >
<td> 024 </ td >
<td> Toronto </ td >
</ tr>
<tr>
<td> Stuart < /td >
<td> 045 </ td >
<td> London </ td >
< /tr>
<tr>
<td> Roger < /td >
<td> 064 </ td >
<td> Paris < /td >
</ tr>
< /tbody>
</ table >
</ body >
</ html>
The above code will generate the following result:
OUTPUT:
In the above example we used the .table-bordered class to add borders to the rows. And in this table we have four rows one is the headings of the rows and is declared by <th> tag and other rows are declared by <td> inside the <tr> tag. The above table is about the employee in which we have the name of the employee, the ID of the employee and the city where the employee lives.
Hover table:
Consider the following table in which we have created the hover table by using the .table- hover class. By using this class a light gray colored border is going to be appeared on the rows of the table and the cursor is hovered on the rows:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < / title >
<linkhref = “/ bootstrap / css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” ></ script >
<scriptsrc = “/ bootstrap /js / bootstrap. min. js” >< /script >
</ head >
<body>
<table class = “table table- hover” >
<caption> Layout of Employee Hover Table </ caption >
<thead>
<tr>
<th>Name of Employee</th>
<th>Emp ID</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuart</td>
<td>024</td>
<td>Toronto</td>
</tr>
<tr>
<td>Bill</td>
<td>042</td>
<td>London</td>
</tr>
<tr>
<td>Roger</td>
<td>038</td>
<td>Paris</td>
</tr>
</tbody>
</table>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example we used the .table-hover class to make hovered table. And in this table we have four rows one is the headings of the rows and is declared by <th> tag and other rows are declared by <td> inside the <tr> tag. The above table is about the employee in which we have the name of the employee, the ID of the employee and the city where the employee lives.
Condensed Table:
Consider the following example in which we have created a condensed table by using the .table- condensed class. By using this class the row padding will be cut into half and the table will be condensed. The condensed table is created when the user wants to add denser information:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example </ title >
<linkhref = ” /bootstrap / css / bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts / jquery. min. js” ></ script >
<scriptsrc = ” /bootstrap / js / bootstrap. min. js” >< / script >
</ head >
<body>
<table class = “table table-condensed” >
<caption> Layout of Employee Condensed Table </ caption >
<thead>
<tr>
<th> Name of Employee </ th>
<th> ID </ th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuart</td>
<td>024</td>
<td>Toronto</td>
</tr>
<tr>
<td>Bill</td>
<td>038</td>
<td>London</td>
</tr>
<tr>
<td>Roger</td>
<td>042</td>
<td>Paris</td>
</tr>
</tbody>
</table>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example we used the .table- condensed class to create a condensed table. And in this table we have four rows one is the headings of the rows and is declared by <th> tag and other rows are declared by <td> inside the <tr> tag. The above table is about the employee in which we have the name of the employee, the ID of the employee and the city where the employee lives.
Contextual Classes:
The contextual classes are used to change the color of the background of the table or the rows or even individual cells. Consider the following table in which we have described some of the contextual classes that are used to change the color of the background of rows:
| Classes | Description |
| .active | This contextual class is used to apply hover color to a specific row. |
| .success | This class is used to indicate a successful action. |
| .warning | This class is used to indicate a warning or a message that needs attention. |
| .danger | This class is used to indicate danger or a message that is considered negative. |
The above mentioned classes are used to or can be applied to the following tags:
- <tr>
- <td>
- <th>
Consider the following example in which we have used the above mentioned classes:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<table class = “table”>
<caption>Layout of Contextual Table (Using contextual Classes)</caption>
<thead>
<tr>
<th>Name of the Student</th>
<th>Marks Obtained</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = “active”>
<td>Stuart</td>
<td>88</td>
<td>Pass (Good)</td>
</tr>
<tr class = “success”>
<td>Bill</td>
<td>100</td>
<td>Pass (Excellent)</td>
</tr>
<tr class = “warning”>
<td>Roger</td>
<td>47</td>
<td>Pass (Satisfactory)</td>
</tr>
<tr class = “danger”>
<td>Reyn</td>
<td>20</td>
<td>Fail</td>
</tr>
</tbody>
</table>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example, we used the contextual classes to highlight the results of the students for example if the student is failed the result is colored red. The contextual classes above example are used inside the <tr> class.
Responsive Tables:
The responsive tables can be made by using the .table-responsive class instead of .table class. If a responsive table is created then we can scroll through a table within the devices that are small or having screen less than 786px. There is no difference between a responsive table and a simple table if we are using a device above 786px. Consider the following example in which we have used the .table-responsive class to create a responsive table:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example </ title >
<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” >< /script >
<scriptsrc = “/ bootstrap/ js/ bootstrap. min. js” ></ script >
</ head >
<body>
<table class = “table-responsive” >
<caption> Layout of Student Responsive Table </ caption >
<thead>
<tr>
<th> Name of the Student < /th>
<th> Marks Obtained </ th>
<th> Status < /th>
</ tr>
</ thead>
<tbody>
<tr>
<td> Stuart </ td >
<td> 88 </ td >
<td> Pass (Good) < /td >
< /tr>
<tr>
<td> Bill </ td >
<td> 100 </ td >
<td> Pass (Excellent) </ td >
< /tr>
<tr>
<td> Roger </ td >
<td> 47 </ td >
<td> Pass (Satisfactory) </ td >
</ tr>
<tr>
<td>Reyn</ td >
<td> 20 </ td >
<td> Fail </ td >
< /tr>
</ tbody>
</ table >
< /body >
</ html>
The above code will generate the following result:
OUTPUT:
In the above example we only used .table-responsive class instead of .table class and the remaining code is the same.
