How To Add Simple Table In Blogger Post




Hey there! How you doing today?

I hope you all doing good in your life.

Now let's talk about your blog.
▪️ Are you using Google’s blogger?
▪️ Are you trying to publish a new post today on your blog but it got stuck just because you want to add a simple table in your post to show some data to your readers.
▪️ Are you trying to find out the simple way to add such a table having N x M size?
Where,
N = Number of Row (as per your requirement)
M = Number of Column (as per your requirement)
▪️ Are you looking for the HTML code for such kind of table?

If you are trying to find out the solution of above questions, then you are looking into the right post. Keep reading this post and at the end you will get complete idea to do it properly.

Check out : How to use custom Google-fonts on your blogger blog 

So, without wasting time let's find out the trick to add simple looking table in your blog post.





Adding Simple Table In Blogger Post || HTML Code For Adding Simple Table In Blogger Post


Step 1 - First of all sign-in to blogger (ignore if already signed-in) and click on posts to see the list of your posts (published as well as unpublished).

Step 2 - Now open up the post in which you want to add a table. You have to click on Edit under that post to make changes into your post.

Step 3 - Once you open up the post, you will see Compose and HTML option at the top left corner of your page. Click on HTML and it will show you HTML code of your written post.

Step 4 - Now, in order to add a table in your post, you have to add below HTML code in HTML of your post.

<!--  Code for simple table -->

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
</style>
<body>
<table>
  <tr>
     <th>Column 1 Title</th>
     <th>Column 2 Title</th>
     <th>Column 3 Title</th>
  </tr>
  <tr>
     <td>Data 1</td>
     <td>Data 2</td>
     <td>Data 3</td>
  </tr>
  <tr>
     <td>Data 4</td>
     <td>Data 5</td>
     <td>Data 6</td>
  </tr>
</table>
</body>

<!-- End of the code -->


Example of the table created by using above HTML code is given below.

Column 1 Title Column 2 Title Column 3 Title
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6


Note 1: When you add above code in HTML of your post, make sure that you add it at the right place. You can add it wherever you want but be careful with surrounding code.

Note 2: One thing I found that when we go back to Compose mode after adding above code in HTML of our post, we can not see that table there (This may be a bug, I don't know).

But don't worry,
The table is there, we just can't see it. But when you will try to see the preview of your post, you can see that table and also when you publish your post, the table will be visible.



Adding more Rows and Columns

In above table we have 3 rows and 3 columns but if you want to add more rows and columns, then you can do it by simply modifying above code.
For adding column, add <th>column data</th>
For adding row, add <td>row data</td>


That's all guys,

If you have any questions at any point, then feel free to ask me in the comment section.

Good Bye 👋🏻, see you in the next post.


Post a comment

1 Comments