How To Add Table In Blogger 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.

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).

Method 1

If you have a little bit of knowledge about HTML and CSS then you can easily create a 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.

Simple HTML Codes for Table

<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 Insert The HTML Codes In Post

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

Select HTML on 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)

Now you can change the header texts A, B, C, D, and also the data with your own. After all, 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.

Table Color

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

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 be looks like

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

If you are 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.

Method 2

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

1. Open any version of PowerPoint with a blank presentation

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

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

4. Select a file location and click on the Save button

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.

The main drawback of this method is you can not edit data of the table and unable to insert a link within the table. If you want to edit or change any data of 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.