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