How To Create Table Inside Blogger Post Using HTML?

How To Create Table Inside Blogger Post Using HTML?

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.
How To Create Table Inside Blogger Post Using HTML?
4 Stars stars - "How To Create Table Inside Blogger Post Using HTML?" A table is often necessary for writing any comparison or representing any statistic data in Bl...

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 Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *