How To Add Table in Blogger Blog Post

Are you trying to add a table to your Blog post?

Well, it's an easy task to add or insert a responsive editable table to your Blog post that is hosted on Blogger or WordPress.

Today in this short tutorial, I'm going to share with you two easy methods through which you can easily add a table to your Blog post.

So, Let's Begin...

How To Add Table in Blogger Blog: Learn how to add a table in Blogger (BlogSpot) blog post simply using HTML code. If you are also searching for the same topic then simply follow the complete steps mentioned in this blog post.

Many times when you write a post for your blog, you need to insert a table on your post to show the content more efficiently. 

In WordPress, there are many plugins available that can create tables in just a few clicks. 

But if your blog is hosted on Blogger(Blogspot) there is no external plugin available to create tables for your post.

So in this post, I'm going to share with you the two most useful methods to insert tables on your Blogger blog post.

Throughout this blog post, you will learn

• How to add a table in a Blog post?
• How to add a Responsive table in Blogger?
• How to add a table in Blogger using MS Word?

Let's learn...

How to add Table in Blogger (BlogSpot)

Below I shared two possible methods through which you can easily create and insert tables in your blog post hosted on the Blogger (Blogspot). Through the first method, you can easily add a responsive table to the Blogger blog.

If you have a little bit of knowledge about HTML and CSS then you can easily create a responsive designed table for your blogger post. But if you don't know how to write HTML and CSS code for a table then there is a solution for you. 

In this post, I am going to show how you can write table code for your Blogger post and how to insert the codes into the post.

Responsive Table Code for Blogger

<table>
 <style>
 table {width:100%}
 table,th,td {border: 1px solid black;}
th,td{text-align:center;}
 </style>
<tr>
<th> A</th>
<th> B </th>
<th> C </th>
<th> D </th>
</tr>
<td> 001</td>
<td> 002</td>
<td> 003</td>
<td> 004</td>
</tr>
</table>

How to add a Responsive table in Blogger?

Follow all the steps given below to add a responsive table to your Blogger post.

Step 1: Copy all the codes given above and then open the Blogger dashboard and then Post > All, then click on Edit the post where you want to insert the Table.

Step 2: Select HTML in the top left corner. Now suppose you want to insert the table after the highlighted text shown in the screenshot then paste the HTML table codes between the first <br/> tags. (See 2nd screenshot)

Step 3: Now you can change the header texts A, B, C, and D, and also the data with your own. After all, is done you have created a table for your Blogger post. Your table will be shown like

This is a simple HTML-based table. You can change the design of this table using CSS code whatever you want. Here below some CSS codes are given that you can use to change your table's design.

Also read, how to connect a custom domain on Blogger.

Table Color

If you want to change the header background color of the table then you have to insert this CSS code between the <style> and </style> tags.

th{background-color: #4CAF50; color:Black;}

Hoverable Table

If you want to highlight your table rows on mouse-over then you have to insert this CSS code between <style> and </style> tag

tr:hover{background-color:#f5f5f5;}

Striped Table

If you want to use zebra-striped on your table' even(or odd) rows then you have to insert this CSS code between the <style> and </style> tag

tr:nth-child(even){background-color:#f2f2f2;}

After using all of these CSS codes the table will look like the screenshot attached below.

That's done, you have successfully inserted a table in your Blogger (Blogspot) blog post.

If you do not want to use the HTML table code on your blog post, then choose the second method to insert a table on your Blogger blog post.

You may also like to read how to change the font in Blogger

How to add a table in Blogger using MS Word?

You can also insert a table as an image on your Blogger post without writing a line of code. For this first, you need to create a table on MS Word or PowerPoint and save this as an image format, then upload this image to the Blogger server.

Follow all these steps to simply add a table to a blog post.

Step 1: Open any version of PowerPoint with a blank presentation

Step 2: Click on INSERT > Table, then select cells according to the need of your table

Step 3: After you create the table click on File > Export > Change File Type > Select an image format PNG or JPEG 

Step 4: Select a file location and click on the Save button

Step 5: Now come to the Blogger dashboard and edit that post, then click on the image icon to upload the image. Now click on Choose Files and select the image. After uploading is complete, click the Add Selection button.

That's done!

The main drawback of this method is you can not edit the data of the table and are unable to insert a link within the table. 

If you want to edit or change any data in the table then you have to recreate a table with the updated data and then again upload it on the Blogger server and change the old image to the new one.   

Using these two methods discussed, you can easily insert a table on your Blogger (Blogspot) hosted blog post. The first method is more efficient than the second one.

Finally, If you like to read our blog posts then you can share them on social platforms - Facebook, WhatsApp, Twitter, etc. Also, I'll be grateful to have you on our next blog post.