How to add table in blogger post html and css - Elimufix tech

How to add table in blogger post html css source code

Sometimes when writing a post in our blog, we may need to add table to explain things in a better way. Adding tables in blog post/article gives clear understanding for the readers.

stylish table 

default table

In blogger, there is no option to add Tables automatically. So, if we want to add a table then we need it to add manually So, in this article, i will share how to create a Responsive Table in a Blogger Post with the help of HTML and CSS code.

So i'm gonna show you two methods for adding tables in blogger posts.

1. Firs method is manual method which you can add all the codes to html mode of you post include HTML and CSS. but there is another one which is non styled table only by using HTML/ default table.

2. Second method is navigating to your theme and adding there some CSS codes to avoid many codes in your articles, so in post you will have to place some fewer lines of html codes only styled but you have to insert only html codes to your posts.

What is Responsive table and how does it works ?

The table that can change its size automatically according to the device screen size is called the Responsive table. For Example: If you open the website in the mobile, it will appear as per mobile size and if you open the same site in the desktop/laptop, it will fit as per desktop size. Thus the Responsive tables are very useful and has lot of benefits.

If your website is on blogger and using responsive template, then you can easily create user friendly tables in Blog posts in just single step.

How to Add Responsive Table inside Blogger/Blogspot ?

You can easily create a Responsive Table in Blogger with the help of HTML and CSS code. The code for creating HTML Table in blogger is provided below in this article. Read all the steps given below and add those codes to your blogger as per given instruction.

Here are the Steps to add Responsive Table in Blogger:

Firt method

Step-1: Login in to Blogger.com and Go to Posts Section.

Step-2: Create new Post or existing post which you want to add Table a table

Step-3: Switch to HTML Mode and Add the below code where you want to Display Table

Default table with no styles

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

Stylish table

<style> table.eft { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 2px; border-color: #1c09e5; border-style: solid; color: #000000; } table.eft td, table.eft th { border-width: 2px; border-color: #1c09e5; border-style: solid; padding: 3px; } table.eft thead { background-color: #1c09e5; } </style> <table class="eft"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> </thead> <tbody> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> </tbody> </table>

View demo

Step-4: Now Switch to Compose Mode and Change the table data with the information you want to display if not yet implemented on the code layout. That’s it how to implement table for you blogger post.

Recommended:

If you want to use the styled table you are recommended to use the second method to add table in you blogger post easy way. this will reduce the amount of code in your post and easy styling table at any time.

Second method

Step-1: Login in to Blogger.com and Go to theme Section.

Step-2:on the customize theme click the drop down menu and click on edit html

Step-3: Then click on the code and press Ctrl + F, on the search bar search for ]]></b:skin>  and paste the below code just above ]]></b:skin> 

CSS CODE

table.eft { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 2px; border-color: #1c09e5; border-style: solid; color: #000000; } table.eft td, table.eft th { border-width: 2px; border-color: #1c09e5; border-style: solid; padding: 3px; } table.eft thead { background-color: #1c09e5; }

Step-4: now save your changes and go back to your dashboard

Step -5: Go to posts section then create new post or an existing post which you want to add a table.

Step-6: switch to html  view and paste the below code where you want the table to appear

HTML CODE

<table class="eft"> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> </thead> <tbody> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> <tr> <td>Tech elimufix</td> <td>Tech elimufix</td> </tr> </tbody> </table>

View demo

Step-7: save you work then preview and publish your post.

Now we are ready created the stylish table for our blogger posts. You can choose the one you want between the default table with no CSS or stylish table with CSS.

Conclusion: 

I hope this post helped you to create and add responsive CSS styled html tables to your blogger posts. Thanks for visiting  tech.elimufix.com Still if you have doubts, please comment below. We definitely reply as soon possible.