Jul 31, 2016

Add Tables in Blogger Posts! Responsive and Pro Version

Responsive Tables Add To Blogger Posts
Blogger comes with a nice post editor which is nice, but there are certain things that it can not do. Creating tables is one of them. Tables are an important tool to sort and present data in an understandable format. We can create a table on blogger post editor by using HTML tab inside post editor, but we must have to install a style for table. So, today we came up with another stylish widget for blogger blog which can give nice look to your blog posts.

Stylish Table Add to Blogger Post! Responsive Version

You can see here in this post a live demo of this table. See live demo below.

Live Demo
Your NameD.O.B.Position
first Second Third
first Second Third
first Second Third
first Second Third
first Second Third
first Second Third
first Second Third
first Second Third
first Second Third
first Second Third

So, we hope you like above demo of tables and now if you want to add this table to blogger blog then follow below instructions carefully.

How To Add Tables On Blogger Posts?

Note: Before doing any customization must download a backup copy of your blogger template.
  • Go TO Blogger >> Template >> Edit HTML.
  • Now, Search for ]]></b:skin> tag and paste below code just above of this tag.
Responsive Table MBG
@media screen and (max-width: 400px) {
  table {font-size: 70%;}
@media screen and (max-width: 250px) {
  table {font-size: 50%;}
@media screen and (max-width: 150px) {
  table {font-size: 30%;}
table {
  width: 100%;
  border-collapse: collapse;
tr:nth-of-type(odd) {
  background: #eee;

th {
  background: #333;
  color: white;
  font-weight: bold;
td, th {
  padding: 2px;
  border: 1px solid #ccc;
  text-align: center;
.table a

Note:  If you have already CSS coding of Table inside your blogger template then remove it because, if you did not remove it then this CSS codes will not work on your blog.
  •  Now, Save your template.
  • Now, whenever you want to add table on any blogger post then open post editor>> Click on HTML Tab and paste below HTML Table Code inside it.
<tr>   <th>Your Name</th><th>D.O.B.</th><th>Position</th></tr>
</thead>  <tbody>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td> </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
<tr>   <td>first</td>   <td>Second</td>   <td>Third</td>  </tr>
</tbody> </table>

Required Editing Before Publish it

1] This Color = Change Heading Text.
2] This Color = Change First Column Texts as per your need.
3] This Color = Change Second Column Texts as per your need.
4] This Color = Change Third Column Texts as per your need.

  • Now, before publish your post see a preview of your blog post.
  • If preview is correct then simply publish it.

Other Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.


So above guide is about  How To Add Tables On Blogger Posts? We hope you like this post and also the style of widget and you have installed this table on your blog easily. If anyhow problem persist after following all above steps then drop a comment below. We will help you out of sure. Do Share.
Thank You! Stay Blessed!


  1. Bro i have add this code but not working in my blog please check my blog once if any code mistake

  2. Just checked out your blog post. The code is not working because you've not used the HTML code which I've mentioned above in the blockquote section.


We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.