HomeBloggingHow To Add Table In Blogger Post

How To Add Table In Blogger Post

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)


How To Add Table In Blogger Post


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


How To Add Table In Blogger Post

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

How To Add Table In Blogger Post

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.

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

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


How To Add Table In Blogger Post


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

How To Add Table In Blogger Post


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

How To Add Table In Blogger Post


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.

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

    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.
    Pranjyoti Patgiri
    Hi, myself Pranjyoti Patgiri founder and fountainhead of PatgiriDigital. A passionate Blogger who like to share tech guide, online money making tips, best gadgets, deals & offers, etc on this Blog.
    RELATED ARTICLES

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here

    Most Popular