How to Add Pros and Cons Table in Blogger
Hi to all, here I am going to tell you all about how to add pros and cons table in blogger website easily in just few minutes by using HTML and CSS.
You can also use this table for product comparisons and other uses
Here I have added media query to create table mobile, tablet, desktop responsive.
So lets learn how to add the pros and cons table in your blogger website.
Read the below provided steps carefully and completely, if you miss any one step then you can't understand on adding the table in your blogger post.
Steps to Add Pros and Cons table in Blogger
Step-1: First of all you need to login to your blogger dashboard by using your login credentials.
Step-2: Click on New Post button.
Step-3: Now switch to HTML View.
Step-4: Copy the below provided HTML Code.
Step-5: Paste the copied HTML code in the post.
Step-6: Now copy below provided CSS code.
Step-7: Paste the copied CSS code in the same post where you pasted HTML code.
Step-8: Now add title and other setting in the post.
Step-9: Click on publish button.
Step-10: Now you have successfully added pros and cons table in your blogger website easily in just few minutes.
Demo Pros & Cons Table
Pros
- Free Productivity Apps
- Better performance
- Simple UI
- Better security
- Integrated Ecosystem
Cons
- Restricted Availability of Apps
- Very Expensive
- Not for gamers
Note:
If you don't see the icons in the pros and cons table then your theme doesn't support to the icon or font. For this you have to go to the theme section and click on Edit HTML and you have to copy the below provided link tag and paste the tag just below the head tag or <head> tag and save your theme.
You can also change the font, background color and font style etc. by modifying CSS code and for color changing you can use color picker from google for color codes.
Some Unicode's for pros and cons table icons:
Circle Icon:
- For Pros: content:\f058;
- For Cons: content:\f057;
Check Icon:
- For Pros: content:\f00c;
- For Cons: content:\f00d;
You can add your own selected icon in this table, by changing the CSS code.
Conclusion
I hope that you have understood about how to add pros and cons table in blogger website easily in just few minutes by using HTML and CSS.
