How to add a pros and cons table in Blogger? [Responsive]

In this article, I will show you how to add a pros and cons table to your Blogger website. Here we use HTML and CSS code to generate the table.

If you want to add a Pros and Cons HTML table to your Blogger website then this article is for you. 

Pros and Cons table in Blogger (Techyleaf)

Here I have shown how to add a beautifully designed pro and cons table for Blogger. 

You can also use the same table for product comparison and other purposes. So, here we use only HTML and CSS to create the HTML table.

I have used the media query to make the Table responsive on mobile, tablet, and desktop devices.

So, let's learn how to use it on your blogger website. 

How to add the Pros and Cons table in Blogger?

STEP-1: To add the Pros and Cons table Go to Blogger dashboard > New post and switch to HTML view. 

STEP-2: Now copy the below HTML code, change the table data, and paste it into the blog post. 

<div class="K2-pros-cons">
      <div class="pros-container">
        <h2 class="heading">Pros</h2>

        <ul class="pros">
          <li>Free Productivity Apps</li>
          <li>Better performance</li>
          <li>Simple UI</li>
          <li>Better security</li>
          <li>Integrated Ecosystem</li>
        </ul>
      </div>

      <div class="cons-container">
        <h2 class="heading">Cons</h2>

        <ul class="cons">
          <li>Restricted Availability of Apps</li>
          <li>Very Expensive</li>
          <li>Not for gamers</li>
        </ul>
      </div>
    </div>

STEP-3: Now copy the Below CSS code and paste it below the first code. 

.K2-pros-cons {
font-family: "Raleway", sans-serif; display: flex; max-width: 700px; margin: 32px auto; box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.4); } .K2-pros-cons .heading {
font-size: 20px; text-align: center; color: #fff; margin: 0; padding: 16px 24px; } .K2-pros-cons .pros-container .heading {
background: #02c39a; } .K2-pros-cons .cons-container .heading {
background: #e63946; } .K2-pros-cons .pros-container ul li::before {
content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 16px; color: #02c39a; display: block; } .K2-pros-cons .cons-container ul li::before {
content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 16px; color: #e63946; display: block; } .K2-pros-cons .pros-container,
.K2-pros-cons .cons-container {
flex: 1; } .K2-pros-cons .pros {
border-right: 1px solid #eee; } .K2-pros-cons ul {
padding: 8px 0; list-style: none; margin: 0; } .K2-pros-cons ul li {
padding: 16px 32px; font-size: 16px; line-height: 2; display: flex; } @media (max-width: 530px) { .K2-pros-cons {
flex-direction: column; } .K2-pros-cons ul li:nth-of-type(2n) {
background: #eee; } }

STEP-4: Now add a <style> tag above and below the CSS code as shown in the video. 

Now publish the Blog post and the pros and cons table is added to your Blogger website. 

Here is a sample Comparison table for the demo purpose. 

Pros

  • Free Productivity Apps
  • Better performance
  • Simple UI
  • Better security
  • Integrated Ecosystem

Cons

  • Restricted Availability of Apps
  • Very Expensive
  • Not for gamers

Video Guide: 

If the table is not working perfectly as shown in the demo table then check if your theme support font awesome icons or not. 

If the font-awesome stylesheet is not added to your theme then you can add the below code just below the <head> tag in the theme editor.  Or paste this code directly in the post editor.

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin="anonymous"
    />

Here in this HTML table, I have used my theme font which is Raleway and you can change the font style according to your own.  You just need to change the font family name in the CSS code. 

You can also change the heading color used in the pros and cons by changing the Hex code (Highlighted in CSS code). Watch the video to learn how to do that. 

If you want to find HTML color code (hex code) you can use a chrome extension like Color Zilla or use a website called HTMLColor Codes

Note: If you want to add this table to multiple blog posts then you can paste the CSS code directly in the theme editor instead of pasting it in every blog post. 

You can also change the font awesome icon in the pros and cons table by changing the CSS code as shown in the video. Just change the Unicode of font-awesome icons.  I will leave the codes in the code file given below. 

If you want to add a responsive HTML table in Blogger then you can check this blog post. 

If you have any doubt regarding this pros and cons table in Blogger, feel free to ask me in the comment section.  Also, share your doubts, so that I can cover this in future tutorials. 

Don't forget to subscribe to our YouTube Channel for more awesome Blogger tutorials.