How to Create a Responsive HTML Table Using Bootstrap
/image%2F6311946%2F20210330%2Fob_246735_bootstrap.png)
Bootstrap is a framework of CSS and JavaScript that allows the creation of a website very quickly and easily. Bootstrap is the best way to create a mobile-friendly web page. The websites made in bootstrap are much more attractive and fast. Today almost all websites are being made in bootstrap. First of all, we will tell you what is Responsive Design, then we will talk about what is bootstrap and how it works in bootstrap.
Responsive website design means a website that adapts itself to any computer. Whether you are looking at the website on a very big screen or desktop or tablet or small mobile phone, your website adapts itself according to every screen and you get the same experience of using the website everywhere.
Nowadays, there is the only scope of Responsive websites. If you are still building a website the old way, then your website will not be able to get many users. So you should try now that your website is responsive and to make your website responsive it is best to use bootstrap. There are many reasons to use bootstrap, which we will tell you further
By which a table class is available to create a responsive table on a web page.
One has to define a CSS class table from bootstrap by creating a table via HTML.
With which tables of HTML become responsive.
Let's make an HTML table responsive using bootstrap.
In the table above, we first create an HTML table, after which the class "table" is defined.
Bootstrap has different class names for each module, just you have to know which module is used for which module.
---------------------------------------------------------------------------
<!DOCTYPE html>
<headgt;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Employee</th>
<th scope="col">Department</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">105</th>
<td>Shiva </td>
<td>IT</td>
<td>12000</td>
</tr>
<tr>
<th scope="row">106</th>
<td>Akash</td>
<td>Non-IT</td>
<td>10000</td>
</tr>
<tr>
<th scope="row">107</th>
<td>Shubham</td>
<td>IT</td>
<td>15000</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
---------------------------------------------------------------------------
FROM WHERE TO LEARN BEST BOOTSTRAP CLASSES
/image%2F6311946%2F20210330%2Fob_739516_bootstrap-classes.jpg)
You can choose Web Development Institute in Delhi which offers you website designing & development certification and diploma courses with 100% job placement.
Courses Offered by Web Development Institute-
Web Expert Premium
Regular- 8 Months
Fastrack- 4 Months
Crash- 3 Months
Module-1 UI Design | Web Design
Adobe Photoshop
HTML5 & CSS3
Bootstrap Course
Module-2 Advance UI Design | Frontend Developer
Javascript
JQuery Course
Module-3 Web Development | Backend Developer
PHP & MySQL
CodeIgniter Course
Module-4 CMS (Content Management System)
WordPress
Module-5 Digital Marketing
SEO Course in Delhi