Journey With Bootstrap : Day 5 (Tables)

Sanjay Singh
Dec 27, 2016

7.4k
0
6
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Hello Geeks.

Welcome to all of you in 5th day of our journey. In today's journey we cover the topic "How to make a table in Bootstrap" but before starting our journey I highly recommend you take a quick look at our previous day's journeys.

Now I will start today's journey.

Table: A table is a structure to organise data in a systematic way. Using Bootstrap we can easily make our table responsive.

Syntax for table

<table class="table">
    <tr>
        <td></td>
    </tr>
</table>
Syntax for responsive table

<div class="responsive">
    <table class="table">
        <tr>
            <td></td>
        </tr>
    </table>
</div>
Predefined classes of table

Now see the Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Dropdowns </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="container">
<br />
<table class="table">
<caption>Simple Table</caption>
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Contact</th>
</tr>
<tr>
<td>Santosh</td>
<td>Kumar</td>
<td>Singh</td>
<td>Varanasi</td>
<td>7417075789</td>
</tr>
<tr>
<td>Sanjay</td>
<td>Kumar</td>
<td>Singh</td>
<td>Varanasi</td>
<td>7417075789</td>
</tr>
<tr>
<td>Sandeep</td>
<td>Kumar</td>
<td>Singh</td>
<td>Varanasi</td>
<td>7417075789</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Output

Example of bordered Table

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Dropdowns </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="container">
<br />
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Santosh</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr>
<td>Sanjay</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr>
<td>Sandeep</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Output

Example of Striped table Output

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Dropdowns </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="container">
<br />
<table class="table table-bordered table-striped">
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Santosh</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr>
<td>Sanjay</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr>
<td>Sandeep</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Example of Hover table

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Dropdowns </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="container">
<br />
<table class="table table-bordered table-hover">
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Santosh</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr>
<td>Sanjay</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr>
<td>Sandeep</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Output

Responsive Table: To make a responsive table use a class="responsive" inside a div.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Dropdowns </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="container">
<br />
<div class="table-responsive">
<table class="table">
<caption>Responsive Table</caption>
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Contact</th>
</tr>
<tr>
<td>Santosh</td>
<td>Kumar</td>
<td>Singh</td>
<td>Varanasi</td>
<td>7417075789</td>
</tr>
<tr>
<td>Sanjay</td>
<td>Kumar</td>
<td>Singh</td>
<td>Varanasi</td>
<td>7417075789</td>
</tr>
<tr>
<td>Sandeep</td>
<td>Kumar</td>
<td>Singh</td>
<td>Varanasi</td>
<td>7417075789</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

Output

Contextual Classes: There are some contextual classes like the following.

Active

<table>
    <tr class="active">
        <td></td>
    </table>
Info

<table>
<tr class="info">
<td></td>
</table>

Success

<table>
<tr class="success">
<td></td>
</table>

Danger

<table>
<tr class="danger">
<td></td>
</table>

Warning

<table>
<tr class="warning">
<td></td>
</table>

Example of Contextual

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Dropdowns </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="container">
<br />
<table class="table table-bordered">
<tr class="info">
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Santosh</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr class="danger">
<td>Sanjay</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
<tr class="active">
<td>Sandeep</td>
<td>Kumar</td>
<td>Singh</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Output

So here I stop our today's journey. The next day we will meet with a new concept of Bootstrap.

Happy Coding.

Recommended Free Ebook

Pro WPF: Windows Presentation Foundation in .NET 3.0

Download Now!