Create table with border using Bootstrap classes in HTML,PHP

How to make responsive table including border/stroke around rows and columns.

In this tutorial we are using .table class with table-bordered class. The table-bordered class will automatically draw border around whole table including rows and columns so this will separate the all the rows name, rows values, columns name, columns value. So here is the complete step by step tutorial for Create table with border using Bootstrap classes in HTML,PHP.

How to Create table with border using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for table-with-border.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table With Border</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 With Border</h1>


<table class="table table-bordered">
 <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 table with border using Bootstrap classes in HTML,PHP

Leave a Reply

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