HOW TO ADD | CREATE RESPONSIVE HTML TABLE IN YOUR BLOGGER

Creating responsive html table is very useful especially if you got a blogger or website. This will allow you to show case all the information or images in a very organize way. In this page we will provide you of the codes that you will need in order to build your responsive html table. Watch our video for the step by step tutorial and leave your comments below about your thoughts about it....

Be the first to be notified of our new place to travel  SUBSCRIBE now! Click here

Below ⇩ are the basic codes that you need in order to make your html table:

<table style="color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;">
<tbody>
<tr>
<th style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#B1B6AF;
font-weight:700;
border-radius: 0px;">Heading 1</th>
<th style="height:0px;
transition:all .3s;
text-align:center;
width:auto; background:#B1B6AF;
font-weight:700;
border-radius: 0px;">Heading 2</th>
<th style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#B1B6AF;
font-weight:700;
border-radius: 0px;">Heading 3</th>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Table A</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Table B</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Table C</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Facebook</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Youtube</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Blogger</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Resolution</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Filesize</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Download</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background: #E1DDDD;">1080 p</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">1000 MB</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Download</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Resolution</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Filesize</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Download</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background: #E1DDDD;">1080 p</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">1000 MB</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Download</td>
</tr>
</tbody>
</table>

Hope guys you have done it all well. Any query or comments just write it down in the comment box below... Please share it to your family and friends, simply by clicking the social icon below ⇩