How to Make Responsive Tables:
Website main objective is to serve user with maximum approach. Responsive website is the biggest goal in this era because responsive website might grab many users with maximum range. Sometime we have responsive theme but some elements are not responsive. HTML table is one of the element, may be you are going to add pricing tables on site but when someone open your site from mini devices then he can not able to see accurate information in positive manner. So, responsive tables is the crucial element of responsive website and we can’t overlook it. For this purpose, We will show you that how to make responsive tables with minimum efforts.
To make responsive tables, first Download ZURB responsive tables zip file for give the appropriate shape to tables. You can use the above given source for downloading and review the below screenshot.
After getting above ZURB responsive tables zip file, Now you need to concentrate on it to go ahead. Zip file contains few stylesheets and java query files, which helps to make tables fully responsive. Now extract this zip file to any specific folder, after do that, open your code editor and add few below HTML lines, Copy the below HTML table code and paste into any editor.
<table class="responsive"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> <td>row 1, cell 4</td> <td>row 1, cell 5</td> <td>row 1, cell 6</td> <td>row 1, cell 7</td> <td>row 1, cell 8</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 2, cell 3</td> <td>row 2, cell 4</td> <td>row 2, cell 5</td> <td>row 2, cell 6</td> <td>row 2, cell 7</td> <td>row 2, cell 8</td> </tr> </table>
Grab the above code and paste to any code editor, Now its time to establish link among these downloaded CSS files and this simple HTML table, which you created couple a minute ago. For this purpose, we will add few lines before table tag, which will connect those elements. You can see these lines below,
<!-- Combine and Compress These CSS Files --> <link rel="stylesheet" href="stylesheets/globals.css"> <link rel="stylesheet" href="stylesheets/typography.css"> <link rel="stylesheet" href="stylesheets/grid.css"> <link rel="stylesheet" href="stylesheets/ui.css"> <link rel="stylesheet" href="stylesheets/forms.css"> <link rel="stylesheet" href="stylesheets/orbit.css"> <link rel="stylesheet" href="stylesheets/reveal.css"> <link rel="stylesheet" href="stylesheets/mobile.css"> <!-- End Combine and Compress These CSS Files --> <link rel="stylesheet" href="stylesheets/app.css"> <link rel="stylesheet" href="responsive-tables.css"> <script src="javascripts/jquery.min.js"></script> <script src="responsive-tables.js"></script>
Just you need to do only add these above lines before closing head tag. You clearly can see, every above line consist a specific CSS stylesheet name, which convert this simple HTML table to responsive table. But few are most important in these above lines like last three,
<link rel="stylesheet" href="responsive-tables.css"> <script src="javascripts/jquery.min.js"></script> <script src="responsive-tables.js"></script>
Above scripts lines are most important, Specially these files are most compulsory include responsive-tables.css, jquery.min.js, responsive-tables.js to build responsive table. Further globals.css,typography.css, grid.css etc are optional but can use for build table more stylish.
Note:
A concise note before going to compile process, CSS files and HTML table file should be in the same folder then connection can be built among those files. Secondly above code class="responsive", which we used in HTML table tag code, is to create the connection between Cascading files and HTML. So, don’t be panic.
Summing up the both HTML table code and ZURB responsive tables css framework, you can create attractive or fully responsive tables without any hesitation. If you like this then must share with your friends and relations. Don’t forget your precious feedback. 😉
