Create HTML5 Responsive Table for web applications

html5-responsive-table

Tutorial on HTML5 Responsive Table.

While preparing this tutorial, I had a few things in my mind exactly how to deal with HTML5 responsive tables. As while making your own custom table for html5 responsive website we search some plugin, then we apply it, which just increase the response time of a site.
How to make a HTML5 free Responsive Table for your website

What is html5 Responsive Table

Now a days mostly people wish to have their website which could be easily accessible on mobile. So Web Developers are working on Responsive Websites, and applications.
its a simple table on a full width but when we surf html5 responsive website on a mobile or a tablet instead of scrolling or some messy data, we scrolls from top to down to look all the data.

Responsive table as the name suggest is a table that is easily accessible on different screen as a desktop, Mobile, iPad of different resolutions.

Why html5 Responsive Table

As screen resolution shrinks, we have to scroll a screen from left to right, which is quite confusing, in case of large data table it’s very difficult to find data. So we need a Responsive table. So that we scroll from top to bottom and access our data easily.

Does a HTML5 responsive table require different coding

No HTML5 responsive table does not require different coding, we just apply some tricks on a Media query for a responsive table to give a different view on different screens

In this tutorial we have tried to work on html5 Responsive table where maximum web developers face a lot of problems. There are many plugins available for making Responsive tables. But having your own coded Responsive table will make you learn a lot about CSS TRICKS. it is one of the html5 responsive design example.
If you have any more query you can mail us : html5beginners@gmail.com

Now lets come on to our HTML5 responsive table tutorials for:

Structure of a Table

 

Below is a basic structure of a HTML5 responsive table.

<table>

<tr>

<td></td>

</tr>

</table>

So this will be a basic HTML5 responsive table after final preparation.

 

<table class=”mytable”><thead><tr><th>Full Detail Name</th><th>Full Address</th><th>Personal Email Id</th></tr></thead><tbody><tr><td>Anil</td><td>Jaipur</td><td>linalansus@gmail.com</td></tr><tr><td>Sunil</td><td>Delhi</td><td>anil_vns99@yahoo.com</td></tr><tr><td>Johny janardan</td>

<td>Varanasi</td>

<td>ragaa@in.com</td>

</tr>

</tbody>

</table>

after this code you will get this look for a basic table.

 

HTML5-Responsive-table

 

As this is not very clear we will apply some styles to make look better

 

Below is the code i applied it in before closing <head></head> to make it look like a table.

 

<style>

.mytable{border:2px solid #222; border-collapse: collapse;}

th, td {

border: 1px solid #900;

font-family: arial;

font-size: 14px;

padding: 3px 10px;

}

th{ color:#333;}

td{color:#444;}

</style>

Now it will give a cool look as shown in the image below.

 

HTML5-Responsive-table-style

 

 

Now comes When we look it on a small resolution we will get this type of look and We can see a scroll bar at the bottom of the image in a red box

 

html5-free-responsive-table

 

Now we will code it to make responsive, where after applying the below code we can see that we have our Responsive table Ready. and here is our media query wisth full style applied.

 

<style type=”text/css”>.mytable{border:1px solid #222; border-collapse: collapse;}th, td {border: 1px solid #900;font-family: arial;font-size: 14px;padding: 3px 10px;}th{ color:#333;}td{color:#444;}@media only screen and (max-width:768px){table, thead, tbody, th, td, tr {display: block;}table tbody tr td{border: none;border-bottom: 1px solid #eee;position: relative;padding-left: 40%;

font-size:13px;

}

table tbody tr td:before {

position: absolute;

/* Top/left values mimic padding */

top: 6px;

left: 6px;

width: 45%;

padding-right: 10px;

white-space: nowrap;

font-weight:bold;

 

}

table thead tr { display:none; background: #000;}

table tbody tr{position: relative; width:100%;}

 

table tbody tr td:nth-of-type(1):before { content: “First Name”;  }

table tbody tr td:nth-of-type(2):before { content: “Last Name”; }

table tbody tr        td:nth-of-type(3):before { content: “Email Id”; }

}

</style>

Trick Applied for HTML5 Responsive table

Here is the final result.

Click Here to view the HTML5 Responsive table

What we did in converting simple table to make it responsive was that we

1) First changed the position of table, tr, tied to relative so that we can view it one under another.

 

2) We applied pseudo element :before, changed the position to absolute  so that we can view it from left and applied other style .

 

3) Than we hide the <th></th> tag from <thead></thead>

 

4) In the last step we again applied pseudo element :before and made our custom header and style it to give the same look as before.

 

It is really fun to play with the html5 and css3. What we need to do is to apply some tricks and we will see that we have our own custom file for every UI components for website.

Html5 free Responsive table is one of the most important point one should know, this free html5 responsive table tutorial adds a plus point to your css tricks…

You can also check for Tutorial on HTML5 free css3 slider menu. and its demo : click here

Source taken from: www.w3.org , www.google.com, www.developer.mozilla.org

 

Html5 responsive table tutorial is specially for all. You can create html5 responsive table and use in minute if you concept cleared.

You Might Also Like

92 Comments

  1. 4

    Nice tutorial, and has learned so much from http://www.html5beginners.com, that i cannot explain. Thanks for providing stufffs, that can be easily used in any website. I have more than 20 website but still in learning process, and this site is a awesome for people like us.
    Thanks

  2. 5

    Though we don’t see things the same way, thanks a lot for writing the post.
    Moreover, could I ask what platform this web site is built on top?
    Before I begin to blog, I wawnt to be sure that I
    will be using the best platform. Thnk you so much.

  3. 6

Comments are closed.