How to Add Responsive Table in Blogger Post

A table makes it easy to provide information on our website. Through which the user also gets all the information, in less time and very briefly. As you know that if the user is happy with your content, then Google is also happy with your website and your ranking is good.

So through this article I will tell you how you can put a responsive table in your blogger article. You just have to follow some steps, in which you have to copy and paste the CSS and HTML code, so that you can make a stylish table. 

So let us know how to put a responsive table step-by-step in the article of your website.

Step-by-Step Add Responsive Table in Blogger Post

By following the steps mentioned below, you can easily add a responsive table to your blogger post.

Step by Step Add CSS Code in Blogger Theme-

STEP 1: Copy the CSS Code Given Below.

STEP 2: Go to Your Blogger Dashboard

STEP 3: Click on Theme Section

STEP 4: Open Edit HTML

STEP 5: Search </head> Tag

STEP 6: Paste all CSS Code Above </head> and Save

CSS Code

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
  
  <style>
  /*CSS for Responsive Table By technicalarp.com*/
  .restable
   {border-collapse:collapse;
   width:100%;
   overflow: hidden;
   }
   .rescap{
     border-left:4px solid #009879;
     padding:15px;
 font-family:georgia;
 font-weight:bold;
 font-size:20px;
 background-color:#dddddd;
 color:#990a00;
 text-align:left;
 overflow:hidden;
 margin-bottom:4px;
 width:100%;
 }
.resth{ 
    padding:12px 15px;
    background-color:#009879;
    color:#ffffff;
    font-family:georgia;
    font-size:20px;
    font-weight:bold;
    border:1px solid #dddddd;
    text-align:center;
    }
.restr{
    border:1px solid #dddddd;}
 .restd{padding:12px 15px;
    font-family:arial;
    font-size:20px;
    text-align:center;
    border:1px solid #dddddd;
    }
.restr:last-of-type{
    border-bottom: 2px solid #009879;
    }
.restr:nth-of-type(even){
    background-color: #f3f3f3;
    } </style>

Step by Step Add HTML Table Code in Blogger Theme-

STEP 1: Copy The HTML Code Given Below.

STEP 2: Create a New Post or Open Your Existing Post.

STEP 3: Paste The Copied Code Where You Want to Add The Table.

STEP 4: Now Save or Publish Post.

Table HTML Code

<table class="restable">
<caption class="rescap"><span style="font-family: Hind;">This is Your Caption</span></caption>
<tbody>
<tr>
<th class="resth"><span style="font-family: Hind;">1st Text Here</span></th>
  <th class="resth"><span style="font-family: Hind;">2nd Text Here</span></th>   
  </tr>
  
<tr class="restr">                                      
  <td class="restd" data-label="Name"><span style="font-family: Hind;">Name<span>&nbsp; &nbsp;</span></span></td>
  <td class="restd" data-label="Marks"><span style="font-family: Hind;">Table</span></td>
  </tr>
<tr class="restr"> 
  <td class="restd" data-label="Name"><span style="font-family: Hind;">Article Type</span></td>
  <td class="restd" data-label="Marks"><span style="font-family: Hind;">Script</span></td>
  </tr>
<tr class="restr"> 
  <td class="restd" data-label="Name"><span style="font-family: Hind;"> Shared by</span></td>
  <td class="restd" data-label="Marks"><span style="font-family: Hind;">Hindibuddy COIN</span></td>
  </tr>
<tr class="restr"> 
  <td class="restd" data-label="Name"><span style="font-family: Hind;">Downloads</span></td>
  <td class="restd" data-label="Marks"><span style="font-family: Hind;">13,000</span></td>
  </tr><tr class="restr">                                      
  <td class="restd" data-label="Name"><span style="font-family: Hind;">Published date</span></td>
  <td class="restd" data-label="Marks"><span style="font-family: Hind;">8 April</span></td>
  </tr>
<tr class="restr"> 
  <td class="restd" data-label="Name"><span style="font-family: Hind;">Acharya</span></td>
  <td class="restd" data-label="Marks"><span style="font-family: Hind;">29 April</span></td>
  </tr>
</tbody></table>

As soon as you save the post, your table will be added to your blogger post. Now whenever you want to add a new table in a new post just use HTML code, and your responsive table will be added.