How to add a Table in Blogger Posts

Add a Table in Blogger Posts

In this, we discuss how to add a table in blogger posts. Many times when you write a post for your blog, you need to put a table on your post to show the content more efficiently. There are many plugins available in WordPress that can create tables in just a few clicks. But if your blog is hosted on Blogger (Blogspot) then there is no external plugin available to create tables for your posts.

So in this post, I am going to share with you two of the most useful ways to insert tables on your blogger blog posts.

How to add a Table in Blogger Posts Step By Step [Guide]

Below I have shared two possible ways through which you can easily create and insert tables in your blog posts hosted on the blogger

Method 1:

If you have a little knowledge about HTML and CSS, then you can easily create a table for your blogger posts. But if you don't know how to write HTML and CSS code for tables then there is a solution for you. In this post, I am going to show how you can write table code for your blogger posts and how to insert code in posts.

Example:

<style>

.MyHTML_Table {

border:3px solid #C0C0C0;

border-collapse:collapse;

padding:5px;

}

.MyHTML_Table th {

border:3px solid #C0C0C0;

padding:5px;

background:#F0F0F0;

}

.MyHTML_Table td {

border:3px solid #C0C0C0;

padding:5px;

}

</style>

<table class="MyHTML_Table">

<caption>My HTML Table</caption>

<thead>

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

<th>Header 4</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

</tr>

<tr>

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td>13</td>

<td>14</td>

<td>15</td>

<td>16</td>

</tr>

</tbody>

</table>{codeBox}

Copy all the code above and then open the blogger dashboard and then click on Posts > All, then edit the post where you want to insert the table.

How to add a Table in Blogger Posts

Select HTML on the top left corner. Now suppose you want to insert the table after the highlighted text as shown in the screenshot then first paste the HTML table code between <br/> tag. (see the second screenshot)

How to add a Table in Blogger Posts

Now you can replace the header text A, B, C, D, and data with your own. After all, have you made a table for your blogger post? Your table will look like this

How to add a Table in Blogger Posts

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


Method 2:

To add a table in a blogger post, you can use HTML Table Generator which automatically generates your HTML table code within a second . this is the easiest process, you need to just copy HTML code paste it in your blogger post. the process is the same as mentioned above in method 1.

Here I share Some Table Generator Websites which provides a responsive table for blogger

  1. HTML Table Generator - HTMLTable.Org
  2. HTML Tables generator – TablesGenerator.com
  3. HTML Table Generator - Quackit.com
The above mentioned all websites are good but for bloggers, I recommend 1st one i.e, HTML Table Generator - HTMLTable.Org

How to generate Table code For Blogger Post
  1. First Goto HTMLTable.org
  2. Then Enter No. of  Rows and Columns
    How to add a Table in Blogger Posts

  3. Select Colors like header color, background color, text color, etc
  4. then if you want to give a caption of your table then enter the name
  5. when data filled 
  6. just click on generate button
    How to add a Table in Blogger Posts

  7. below your, we are successfully generated our table code
    How to add a Table in Blogger Posts

  8. just copy all the code and paste it into your blogger post .
this is the easiest process, you need to just copy HTML code paste it in your blogger post. the process is the same as mentioned above in method 1.
if you don't familiar with these two processes I have 3rd one which is also good

Method 3:

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

  •  Open Any Version of PowerPoint With a Blank Presentation
  • Click INSERT > Table, then select the cells according to the need of your table
    How to add a Table in Blogger Posts

  • After creating the table, click on File > Export > Change File Type > Choose Image Format PNG or JPEG
    How to add a Table in Blogger Posts

  • Select the file location and click on the Save button
    How to add a Table in Blogger Posts

  • 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 the upload is complete, click on the Add Selection button.
    How to add a Table in Blogger Posts

The main drawback of this method is that you cannot edit the data in 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 upload it to the blogger server and change the old image to the new one.

Using these two methods discussed, you can easily add a table in Blogger posts. The first method is more efficient than the second.

Lastly, if you like to read our blog posts you can share them on social platforms - Facebook, WhatsApp, Twitter, etc. Also, I would be grateful to have you on our next blog post.

2 Comments

Post a Comment
Previous Post Next Post