How to create table in blogger

by: Posted on:

How to create table in blogger

create table in blogger

 

 

 Hello friends!! how are you all ?? 

We know that blogger does not have the feature of adding a table directly in your post. For this reason, we need to add table html code for creating a table in blogger. So today I will show you step by step how to make a table in a blogger or how to create a table in a blogger.

Steps 1:

Here is a website for creating table:

https://www.rapidtables.com/web/tools/html-table-generator.html

On the website you will see the below picture: 

first of all, write how many rows and columns you need. the example I need 5 rows and 2 columns. then check and uncheck like the below picture. 

After that settings, you will see a table. Now you need to add your table content to this table. I added some content. Then you will see the table with your table content. It’s my table after adding my table content.

 

 
Steps 2:
See I created a simple table. But we want to create an attractive table. For this, we need some CSS code with table code.
 
Now go to your blogger account. The theme and then click edit html

 

Paste this CSS code right after the <head> tag

CSS code:
456

 

<style>
  table {
  border-collapse: collapse;
}
tr:nth-child(odd){background-color: #f2f2f2}
</style>
then save the html code. You don’t need to add this CSS code every time. Only you have to add this ccs code in your theme for the first time.
 
 

Steps 3:

Now go to the table generator website. then copy the table html code from <table class=”demo”> to </table>. Don’t copy the code from <style> to </style>. Because we will not use this CSS code. we already added the custom CSS code in the theme. 

 

Steps 4:
Now go to your blogger post. Create a new post. then write anything in your post. after that where you want to insert the table write 123. then change the view mode from compose view to html view. Search 123 then delete 123 and paste the table code. 

 
Again search “demo” and erase the demo word. Write “center” at the same position where was written “demo” word.

 

now go to compose view again or preview your post with a responsive table.

thank you for reading this tutorial. If you face any problems let me know in the comment section.

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *