How Put or Add HTML Tables In Blogger Blog Posts

In this tutorial, I will show you how to quickly add or create an HTML table. HTML table is the comfortable tables that give out a summary of a something and again, which is mostly used by those bloggers who that own or blogs on about money, so they tell their content like, information about ad networks in the form of tables. Not all THE bloggers know how to add HTML tables in blog posts and in blogger blog platform does not have any option to create HTML tables so, in this blog post, I will disclose it to you how to add it or embed it manually. And that's actually the reason for writing this post. I will tell you how, you can add this simple one because there various numbers of types of HTML tables and I can't share each and every kind of HTML table but, I will share with you a simple HTML table with text in the form of this! So lets quickly get this started! How to Add HTML Table In Blogger Blog Posts?

1.) Make sure you copied the followed code of HTML table from below:

<style>

#mytable{

width:100%

}

#mytable, th, td {

border: 1px solid black;

border-collapse: collapse;

}

#mytable th, #mytable td {

padding: 5px;

text-align: left;

}

</style>

<table id="mytable">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Rekcyber</td>

<td>Tech</td>

<td>50</td>

</tr>

<tr>

<td>David</td>

<td>Eric</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

The output will reproduce the below look: 

Firstname	Lastname	Age
Rekcyber	Tech	19
David	Eric	94
John	Doe	80

 2.) Goto  blogger.com, log in your associated account with your blogger blog account. Create the new post, or you want to edit your post and click on the "HTML" Like the below screenshot.

 3.) Got where you paste the HTML code and copy and paste the duplicated code after a specific text or at the beginning of the post or
after an image, where you ever want to show your HTML table in your blog posts. Make sure you edit the code to your choice.

4.) Edit the tags according to your choices and publish your post to see your HTML table. The Output of the post will be this!

Now, after adding above the code for HTML Table you have to make some changes in the text with the table code and for that you need to understand the system because without it you can't add a new row in your table that you need to add and can't add custom info in the rows and columns of your table. So read out below to know what the code can do!

Below is the CSS code of your table:

Here is the CSS code of your table:

<style>

#mytable{

width:100%

}

#mytable, th, td {

border: 1px solid black;

border-collapse: collapse;

}

#mytable th, #mytable td {

padding: 5px;

text-align: left;

}

</style>

It gives your table the borders for each row and column and if you

want, you can add your own decorations to your table for example

to add a background color you need to add this:

background: yellow;

You have to add above piece of code in this part of code:

#mytable{

width:100%;

background: yellow;

}

Now its time to make changes in the info which is added in your

table's row and columns. Here is the overall code for your table:

<table id="mytable">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Rekcyber</td>

<td>Tech</td>

<td>50</td>

</tr>

<tr>

<td>David</td>

<td>Eric</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

  It gives your table the borders for each row and column and if you want, you can add your own decorations to your table for example to add a background color you need to add this: background: yellow; You have to add above piece of code in this part of code: #mytable{ width:100%; background: yellow; } Now its time to make changes in the info which is added in your table's row and columns.

Below is the overall code for your table:

Firstname	Lastname	Age
Rekcyber	Tech	19
David	Eric	94
John	Doe	80

In the code above the blue one is the first row of the table, Orange the second, green the third while the yellow is the fourth row of the table. You can now change the text to your choices. In other to add a new row, you need to add a simple piece of HTML code just as below and edit it to your preference.

The Green one, here is the simple piece of code that is need to be added for new row as below:

<tr>

<td>David</td>

<td>Eric</td>

<td>94</td>

</tr>

You can study such HTML tables by visiting w3schools. Or you can search for online "HTML table generator" and create one for you. I hope you found this blog post helpful and motivated. If you have any question ask, please use the comments or contact me. Thank for visiting Rekcybertech