Create simple responsive Table Using bootstrap classes in HTML,PHP

How to create simplest fully responsive table with rows and columns without any effects.

In this tutorial we are using Bootstrap’s simple .table class, which will create simple fully responsive table with responsive rows and columns. The benefit of this class is that it will help us to create simple table without any kind of effects and it will automatically bold the th ( table heading ) tag so user can easily read the columns name. So here is the complete step by step tutorial for Create simple responsive Table Using bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html

How to Create simple responsive Table Using bootstrap classes in HTML,PHP.

Code for simple-table.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Simple Table</h1>


<table class="table">
 <thead>
 <tr>
 <th>Name</th>
 <th>Website</th>
 <th>Email</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Raju</td>
 <td>Raju-demo-website.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Raja</td>
 <td>Raja-demo.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Rani</td>
 <td>Rani-demo.com</td>
 <td>[email protected]</td>
 </tr>
 </tbody>
 </table>

 
</div>
</body>
</html>

Screenshot:

Create simple responsive Table Using bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *