How To Create Table Inside Blogger Post Using HTML?

How To Create Table Inside Blogger Post Using HTML?

Comments: 4
data:blog.title
table

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: 

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:

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>

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.

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

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

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

HTML view

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

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

Speak Your Mind

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?

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.

Thanks, nice post.

Welcome Zaman.. Keep in touch

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *