How to create table in blogger



 Hello fiends !! how are you all ?? 

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

Steps 1:

Here is a website for create table:

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

In the website you will see like the below picture: 

first of all write how many rows and columns you need. 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 in this table. I added some content. Then you will see the table with your table content. Its 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 to some css code with table code.

Now go to you blogger account. Then theme and then click edit html


Past 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 dont need to add this css code every time. only for the first time you have to add this ccs code in your theme. 


Steps 3:
Now go to the table generator website. then copy the table html code from <table class="demo"> to </table>. Dont 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 table write 123. then change the view mode from compose view to html view. Search 123 then delete 123 and past the table code. 

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

now go to compose view again or simply preview your post with a responsive table.
thank you for reading this tutorial. If you face any problem let me know in comment section.






Post a Comment

0 Comments