Bootstrap Table

0 4505

Now you can easily create responsive html table through bootstrap css and js. Now see below examples, how give borders on table, how give hover border, table stripped, table condensed.

Today 60/70% peoples see websites on mobile, tablets and other devices, in that way responsiveness is too much important part to create web pages or websites.

You can copy paste below code and modify as per your requirement.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bootstrap Table </title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-Bootstrap css file->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>

<body>

<div class="col-md-6">

<h1> Bootstrap Table Border </h1>

<table width="100%" border="0" class="table table-border">
<tr>
<td> Name </td>
<td> Email id. </td>
<td> Mobile no. </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
</table>
</div>
<div class="col-md-6">
<h1> Bootstrap Table striped </h1>

<table width="100%" border="0" class="table table-striped">
<tr>
<td> Name </td>
<td> Email id. </td>
<td> Mobile no. </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
</table>
</div>

<div class="col-md-6">
<h1> Bootstrap Table Hover </h1>

<table width="100%" border="0" class="table table-hover">
<tr>
<td> Name </td>
<td> Email id. </td>
<td> Mobile no. </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
</table>
</div>

<div class="col-md-6">
<h1> Bootstrap Table condensed </h1>

<table width="100%" border="0" class="table">
<tr>
<td> Name </td>
<td> Email id. </td>
<td> Mobile no. </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
<td> Lorem ipsum </td>
</tr>
</table>
</div>

<!-Bootstrap js file->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>