How To Create Table Inside Blogger Post Using HTML?

A table is often necessary for writing any comparison or representing any statistic data in 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 bit complicated for new user. For this reason in this tutorial I will show you how we can add a beautiful table by using HTML tag.

Recommended: Embed Microsoft Word Tables In Google Blog and WordPress Posts

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.

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 basic HTML tag. So the code has given below:

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

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

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

<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 for increase or decrease the table width.

Create a 4 row X  5 column with color Heading Table

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

<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 for increase or decrease the table width.
• Change 1 with 2/3 for increasing the thickness of the table border.

Create a 4 row X  5 column with multicolor color row Table

In this stage we will create a multicolor table by more customization.

<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 for 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 Blog post?

To make this code work you have to adopt 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.

Step 5 After applying the table code change 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.