[Responsive] How to add Pros and Cons Table in Blogger

In this article, I tell you How to add a Pros and Cons Table on Blogger. 

There are lots of plugins are available in WordPress to create responsive tables. But in Blogger we can not use any plugin to create tables.

Tables are very useful if you want to show compassion, pros, and cons, etc... In this article, we create a table with basic HTML and CSS.

Follow the below steps to add the Pros and Cons Table in Blogger.

1.Create any post and open it in HTML view in Blogger Post Editor.

2.Now copy the below code and paste it into the HTML view. Here you can add your Pros and Cons data according to your post. Place your pros one by one in place of Pros 1, Pros 2, Pros 3, etc... and cons in place of cons 1, cons 2, cons 3, etc...

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

        <ul class="pros">
          <li>Pros 1</li>
          <li>Pros 2</li>
          <li>Pros 3</li>
        </ul>
      </div>

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

        <ul class="cons">
          <li>Cons 1</li>
          <li>Cons 2</li>
          <li>Cons 3</li>
        </ul>
      </div>
    </div>
<style>
.K2-pros-cons {
  font-family: "Century Gothic", Century Gothic;
  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;
  }
}
</style> 

3.Save the post and you are done with the pros and cons table.

If you like this post about how to add a responsive pros and cons table in blogger, consider sharing this article with friends.