How to Create Responsive Table in Blogger Post or Page

In this post, I want to show you how to create responsive table in blogger post or page. A responsive table allows to blog author to arrange their blog data like text, image and other related things in understandable format. You can create a table manually through HTML and CSS, but if you have lack of knowledge of these languages, then it may not a feasible option for you. So, follow this tutorial to design a flexible table in blogger without having CSS and HTML knowledge. Let’s start.

How to create responsive table in blogger post or page

  1. Login to your blogger account
  2. Go template >> edit HTML
  3. Search </head> tag copy the below CSS code and paste just above it.
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:16px 6px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:16px 6px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;}
.tg .tg-2ktp{font-size:16px;vertical-align:top}
.tg .tg-rd2y{font-size:16px}
.tg .tg-3w8c{background-color:#f9f9f9;font-size:16px;vertical-align:top}
.tg .tg-9d7p{background-color:#f9f9f9;font-size:16px}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}</style>

And then click on save theme button.
Now, whenever you need to add a table in blogger post or page, then only just past the below HTML code in post HTML section and write your data in the table cells.

<div class="tg-wrap"><table class="tg" style="undefined;table-layout: fixed; width: 586px">
<colgroup>
<col style="width: 75px">
<col style="width: 170px">
<col style="width: 170px">
<col style="width: 170px">
</colgroup>
 <tr>
 <th class="tg-rd2y">1</th>
 <th class="tg-rd2y">Write Text Here</th>
 <th class="tg-2ktp">Write Text Here</th>
 <th class="tg-rd2y">Write Text Here</th>
 </tr>
 <tr>
 <td class="tg-9d7p">2</td>
 <td class="tg-9d7p">Write Text Here</td>
 <td class="tg-3w8c">Write Text Here</td>
 <td class="tg-9d7p">Write Text Here</td>
 </tr>
 <tr>
 <td class="tg-rd2y">3</td>
 <td class="tg-rd2y">Write Text Here</td>
 <td class="tg-2ktp">Write Text Here</td>
 <td class="tg-rd2y">Write Text Here</td>
 </tr>
 <tr>
 <td class="tg-9d7p">4</td>
 <td class="tg-9d7p">Write Text Here</td>
 <td class="tg-3w8c">Write Text Here</td>
 <td class="tg-9d7p">Write Text Here</td>
 </tr>
 <tr>
 <td class="tg-2ktp">5</td>
 <td class="tg-2ktp">Write Text Here</td>
 <td class="tg-2ktp">Write Text Here</td>
 <td class="tg-2ktp">Write Text Here</td>
 </tr>
 <tr>
 <td class="tg-3w8c">6</td>
 <td class="tg-3w8c">Write Text Here</td>
 <td class="tg-3w8c">Write Text Here</td>
 <td class="tg-3w8c">Write Text Here</td>
 </tr>
 <tr>
 <td class="tg-2ktp">7</td>
 <td class="tg-2ktp">Write Text Here</td>
 <td class="tg-2ktp">Write Text Here</td>
 <td class="tg-2ktp">Write Text Here</td>
 </tr>
 <tr>
 <td class="tg-3w8c">8</td>
 <td class="tg-3w8c">Write Text Here</td>
 <td class="tg-3w8c">Write Text Here</td>
 <td class="tg-3w8c">Write Text Here</td>
 </tr>
</table></div>

Adjust the “red #” to Change any column width as per your need.

So, this a quick tutorial for beginners who just want to create awesome responsive table in the blogger post. Hopefully, it will be working great on your blog. However, if you any issue, then share with us in the comment section. Don’t forget to share this post with your friends on social media.

Check Also

How to create a private blog in blogger

How to create a private blog in blogger

When we create a new blog in blogger it is visible for all over the …

Leave a Reply

Your email address will not be published. Required fields are marked *