How to add Responsive Table in Blogger | Create SEO Friendly Tables 2021

How to Add Responsive Table in Blogger

Add Responsive Table in Blogger

Sometimes when writing a post in our blog, we may need to add table to explain things in a better way. Adding tables in blogpost/article gives clear understanding for the readers.

In blogger, there is no option to add Tables automatically. So, if we want to add a table then we need it to add manually So, in this article, i will share how to create a Responsive Table in a Blogger Post with the help of HTML and CSS code.

What is Responsive table and how does it works ?

The table that can change its size automatically according to the device screen size is called the Responsive table. For Example: If you open the website in the mobile, it will appear as per mobile size and if you open the same site in the desktop/laptop, it will fit as per desktop size. Thus the Responsive tables are very useful and has lot of benefits.

If your website is on blogger and using responsive template, then you can easily create user friendly tables in Blogposts in just single step.

How to Add Responsive Table inside Blogger/Blogspot ?

You can easily create a Responsive Table in Blogger with the help of HTML and CSS code. The code for creating HTML Table in blogger is provided below in this article. Read all the steps given below and add those codes to your blogger as per given instruction.

Here are the Steps to add Responsive Table in Blogger:

Step-1: Login in to Blogger.com and Go to Posts Section.

Step-2: Go to the Post which you want to add Table of Contents

Step-3: Switch to HTML Mode and Add the below code where you want to Display Table.

<style>
table.GeneratedTable {
width: 100%;
background-color: #ffffff;
border-collapse: collapse;
border-width: 2px;
border-color: #ffcc00;
border-style: solid;
color: #000000;
}
table.GeneratedTable td, table.GeneratedTable th {
border-width: 2px;
border-color: #ffcc00;
border-style: solid;
padding: 3px;
}
table.GeneratedTable thead {
background-color: #ffcc00;
}
</style>

<table class="GeneratedTable">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>

Step-4: Now Switch to Compose Mode and Change the table data with the information you want to display. That’s it.

Alternative way to add Customized Tables in a Blogger & Blogspot Pages:

  1. Go to Quackit HTML Table Generator Website
  2. Now You can customize the Table as per your need like changing number of rows and Columns, You can change Table Color & Border.
  3. Finally Copy the Code and Paste in your Blogger Post.

Also Read:  How to add responsive table of contents in Blogger & Blogspost ?

Conclusion: 

I hope this post helped you to create and add responsive css styled html tables to your blogger posts. Thanks for visiting Tenowl.com. Still if you have doubts, please comment below. We definitely reply as soon possible.

Leave a Comment