How To Create Table Inside Blogger Post Using HTML?

Inserting a list of content into a blogger post table is an efficient way to display the content. Learn how to create a table In a blog article?

Are you struggling to know how to add a table In Blogger Post? 

Many plugins are available in WordPress that allows you to build tables with just a few clicks. Regrettably, if your blog is hosted on Blogger (Blogspot), you would not be able to build tables for your posts using an additional plugin.

A table is often necessary for writing any comparison or representing any statistic data on the Blog site. However, officially in Blogger doesn't have any table widget, for this reason, Google Blogger platform user unable to use Table inside Blog post.

Though I have published before that how we can embed a table from Microsoft word but that was a bit complicated for new user. For this reason, In this tutorial, we will show you how to easily create tables in blogger by using HTML code.

How To Create A Table In A Blogger Post


Recommended: 

You can conveniently build a table for your blogger post if you have a basic understanding of HTML and CSS. Don't worry, if you do not know how to write HTML and CSS code for a table then here is the solution.

However before proceed I will explain the meaning of basic HTML tag. We need to use 3 types of HTML code for creating a Table. <table>...</table> , <tr>...</tr>, <td>...</td>


HTML Code
Explanation 
<table>......</table>
This command will help to create a table.
<tr>..............</tr>
And this command will help us to make the line.
<td>..............</td>
For creating columns we will use this command.

How to Create a Basic 1 row X 5 column Table by Using HTML tag?

We will now create a 5 column table in a 1 row (1 row X 5 column) by using a basic HTML tag. So the code has given below:


1 row table


<table border="1"> <tbody> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4</td> <td>Column 5</td> </tr> </tbody> </table>

How to Create a Basic 2 row X 5 column Table by Using HTML tag?

We have learned about creating a 1 row X 5 column and now I will show you 2 row X 5 column.


2 row table

<table border="1" style="width: 500px;"> <tbody> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> </tbody> </table> Customization
  • Change 1 with 2/3 for increasing the thickness of the table border.
  • Change 500px to increase or decrease the table width.

How to Create a 4 row X 5 column with colour Heading Table?

In this time we will create a 4 row X 5 column table with a colour heading. generally, in Headline we can add Particulars and on other fields, we can write statistic data.


statistic table

<table border="1" style="width: 500px;"> <tbody> <tr bgcolor="#E73A3A"> <td style="text-align: center;"><span style="color: white;">Column 1</span></td> <td style="text-align: center;"><span style="color: white;">Column 2</span></td> <td style="text-align: center;"><span style="color: white;">Column 3</span></td> <td style="text-align: center;"><span style="color: white;">Column 4</span></td> <td style="text-align: center;"><span style="color: white;">Column 5</span></td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> </tbody> </table> Customization
  • Change 500px to increase or decrease the table width.
  • Change 1 with 2/3 for increasing the thickness of the table border.

How to Create a 4 row X 5 column with a multicolour colour row Table?

In this stage, we will create a multicolour table with more customization.


multicolored table


<table border="1" style="width: 500px;"> <tbody> <tr bgcolor="#E73A3A"> <td style="text-align: center;"><span style="color: white;">Column 1</span></td> <td style="text-align: center;"><span style="color: white;">Column 2</span></td> <td style="text-align: center;"><span style="color: white;">Column 3</span></td> <td style="text-align: center;"><span style="color: white;">Column 4</span></td> <td style="text-align: center;"><span style="color: white;">Column 5</span></td> </tr> <tr bgcolor="#0092FF"> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr bgcolor="#00FFA8"> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr bgcolor="#FCFF00"> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> </tbody> </table>

Customization
  • Change 500px to increase or decrease the table width.
  • Change 1 with 2/3 for increasing the thickness of the table border.
  • Change color code #E73A3A, #0092FF, #00FFA8,  #FCFF00 for altering row background color

How to implement the table on a Blog post?

To make this code work you have to adopt a simple technique.

Step 1: Sign in to your Blogger account and go to Dashboard

Step 2: From the Dashboard, Click + New Post.

Step 3: Just create a New post and compose your post.

Step 4: And from Post Editor Select HTML view. Now add any table code from above.




How To Create Table Inside Blogger Post Using HTML?


Step 5: After applying the table code changes the view, Compose view to HTML view.



applying the table code changes the view, Compose view to HTML view


Step 6: Finally Publish your Blog post.


Now check your post and see the table that has directly created by HTML code. If you know more customization idea then share with us.

We tried our hardest in this guide to make all ways of including a table in a blogger article as simple as possible. Simply giving your blog a professional appearance by attempting it yourself. If you have any problems or difficulties inserting a table into a blogger article, please leave a comment. We will make every effort to assist you as soon as possible.

You may like these posts

4 Comments

  1. Unknown
    Sir,3D Mug temlpete a kono post a jekono link ar photo dile ta Related Posts a blank dekay.ki kori.Ba jekono image copy past korleo Related Posts& moble ta noimage dekay.Help k korle copy past ba jekono link ar photo dile ta show korbe?
    • BloggerSpice
      Ata no image dekhabei. Karon photo upload korte hobe newly. Karon onno post theke photo copy korle ooi post er ekta backlink hishabe show korbe. ajonno new post a kono image Related Post physically read korte parbe na. R atate arekta problem hobe jodi old image delete koro tahole copied image shobgola auto delete hoye jabe.
  2. M Kamruzzaman
    Thanks, nice post.
    • BloggerSpice
      Welcome Zaman.. Keep in touch
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up