Introduction of Table Classes and CSS Table Reference in Bootstrap
By Saurabh SinghIn this Bootstrap tutorial, we are going to learn how you can create a table using bootstrap and how to style it using different classes. A table is a data structure that contains information into rows and columns. It can be used to store and display data. A particular value can be accessed from the table by requesting data from an individual column and row. Everywhere the tables are often used to display data in a structured format.
How to create a Table in bootstrap?
To create a table basic layout code start with the <table> tag and closed with </table>. Each table row is defined with the <tr> tag. A table heading/header is defined with the <th> tag. In Bootstrap by default, the table headings are bold and centered. In a table, all data is defined with the <td> tag. Remember there must be a closing tag for all tags.
All different attributes, to style the table in bootstrap
We can style the table using any of these attributes:
Attribute | Description |
| .table | For basic styling. |
| .table-striped | For striped table. (zebra cross row) |
| .table-bordered | For the table with borders on all sides of the table and cells. |
| .table-hover | To highlight the row on hover. |
| .table-condensed | To make the tables more compact by cutting cell padding in half. |
Note: We can make any type of table responsive. But remember that, the .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768 px). When viewing on anything larger than 768 px wide, there will be no difference.
How to make the table responsive?
| Attribute | Description |
| .table-responsive | Makes the table responsive by displaying a horizontal scrollbar on small devices. |
Code using as an example of .table-responsive, .table and .table-hover:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p> List of students: </p>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Company</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Saurabh</td>
<td>Singh</td>
<td>19</td>
<td>Codespeedy</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Divyesh</td>
<td>Srivastav</td>
<td>19</td>
<td>Codespeedy</td>
<td>India</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Also learn,
Leave a Reply