Hello Friends, Welcome to AS Theme World. In today's article we are going to learn How to Add Pros Cons Table to Blogger Website using HTML and CSS.

What is Pros Cons Table

A pros and cons table is a quick and easy decision-making tool. Pros are arguments FOR taking a particular path. Cons are arguments AGAINST. Once you develop a list detailing both sides of the argument you can make more sensible, informed decisions.

Benefits of Adding Pros Cons Table

Adding of Pros and Cons table can speed up the decision-making process, improve your understanding of the situation, and help you avoid decision-making paralysis . Using a simple "pros" and "cons" list encourages you to approach your decision objectively, without letting your "gut feeling" impact your choice.

Pros Cons Table Demo

Steps to Add Pros Cons Table to Blogger

This is divided into two steps, the first step is adding the CSS code to blog template and the second step is adding the HTML codes in post/page where you want to add Pros and Cons Table.

Download Codes

Step 1. Adding CSS Codes

First of all search for the code ]]></b:skin> and add the following CSS code above it.


/* Pros Cons Table CSS */
.pros-cons-container {
  font-family: "Roboto", sans-serif;
  display: flex;
  max-width: 700px;
  margin: 32px auto;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.4);
}

.pros-cons-container .heading {
  font-size: 20px;
  text-align: center;
  color: #fff;
  margin: 0;
  padding: 16px 24px;
}

.pros-cons-container .pros-container .heading {
  background: #02c39a;
}

.pros-cons-container .cons-container .heading {
  background: #e63946;
}

.pros-cons-container .pros-container ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 16px;
  color: #02c39a;
  display: block;
}

.pros-cons-container .cons-container ul li::before {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 16px;
  color: #e63946;
  display: block;
}

.pros-cons-container .pros-container,
.pros-cons-container .cons-container {
  flex: 1;
}

.pros-cons-container .pros {
  border-right: 1px solid #eee;
}

.pros-cons-container ul {
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

.pros-cons-container ul li {
  padding: 16px 32px;
  font-size: 16px;
  line-height: 2;
  display: flex;
}

@media (max-width: 530px) {
  .pros-cons-container {
    flex-direction: column;
  }

  .pros-cons-container ul li:nth-of-type(2n) {
    background: #eee;
  }
}

If you are facing problem in finding the code ]]></b:skin> to put the CSS code. You can search for the code </head> and put the css code right above the code </head> with notes must be squeezed in the code <style> ---- </style>. It looks like this:

<style>
<!-- Put CSS Codes Here -->
</style>

Step 2. Adding HTML Codes

Now copy following HTML codes and paste to post/page where you want to add Pros Cons Table.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <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"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="pros-cons-container">
      <div class="pros-container">
        <h2 class="heading">Pros</h2>

        <ul class="pros">
          <li>Amazing Performance</li>
          <li>Free For 1 Month</li>
          <li>Unlimited Storage Space</li>
          <li>Email Support</li>
          <li>Additional Add-ons</li>
        </ul>
      </div>

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

        <ul class="cons">
          <li>No Phone Support</li>
          <li>Complicated UI</li>
          <li>No SSDs</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Change the highlighted parts as per your liking.

At this point, your Pros and Cons Table has been completely created, if you follow all the steps correctly we can guarantee that the Pros and Cons Table is working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.

MORE INFORMATION

How to Add Pros Cons Table to Blogger Website | Pros Cons Table

What is Pros Cons Table

Benefits of Adding Pros Cons Table

Steps to Add Pros Cons Table to Blogger

Step 1. Adding CSS Codes

Step 2. Adding HTML Codes