How to add responsive HTML table in Blogger.

 Are you still struggling to add a responsive HTML table to your Blogger blog post?

In this article, I will share you with the easiest way to insert a responsive HTML table to your blogger website without using any javascript. 

How to add responsive HTML table in Blogger

You just need a simple HTML table generator that will help you generate the code required to create the table. 

Table of Contents: 🔎

I have seen multiple tutorials on the internet that shows how to add a table in blogger, but they are not responsive and the design is outdated. 

That’s why I prepared this article to guide you on how to insert a responsive and beautifully designed HTML table into the blogger using an online table generator. 

You can also set the background color, set different fonts, animated hover effects, and more. So, let’s start. 

How to create a responsive table in Blogger?

You can easily create a stylish and responsive table and add it to the blogger [Blogspot] blog post by following this guide.

  1. Open the Blogger dashboard and Add a new Post or open any existing Blog post.
  2. Now switch to HTML View and Paste the Below HTML and CSS code.
  3. Change the data according to your Need
  4. Now publish the page and your Responsive HTML table is added to your Blogger website.
Code for HTML Table
<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Abhishek</td>
        <td>Padhi</td>
        <td>90</td>
        <td>96</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>2</td>
        <td>Udit</td>
        <td>Narayan</td>
        <td>95</td>
        <td>98</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>3</td>
        <td>Rohit</td>
        <td>Thakur</td>
        <td>90</td>
        <td>93</td>
        <td>89</td>
      </tr>
      
    </tbody>
  </table>
</div>


<style> 
.table {
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-behavior: smooth;
} 
  
 .table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    color: white;
    background: darkcyan;
}
  
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
  
 table th {
    padding: 16px;
    text-align: inherit;
    border-bottom: 1px solid black;
   color:white!important;
}
  
  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
  
 table:not(.tr-caption-container) {
    min-width: 100%;
    border-radius: 3px;
}
</style>
No Column_1 Column_2 Column_3 Column_4 Column_5
1 Abhishek Padhi 90 96 99
2 Udit Narayan 95 98 99
3 Rohit Thakur 90 93 89

Video Guide

Here, you can watch the Updated Tutorial on Responsive HTML table in Blogger. 

Advanced HTML CSS Responsive Table Generator

In this advanced Responsive HTML table generator, you have more flexibility on how the table looks like. Here you can customize cell padding, cell color, text color for desktop and mobiles.

You can also use this tool to generate a pricing table for your blogger website. 

You can also merge two-row or two-column within the table. By using HTML Table Generator with Colspan and Rowspan, we can add two or more columns under one header in the same HTML table.

Here is a preview image of this table. 

Responsive-HTML-Table-Generator-with-Colspan-and-Rowspan

But most of the time we need the simple HTML & CSS table for Blogger. You can also remove the hover effect by unticking the option in the tool. 

If you want to Add an HTML table with a different look then you can use the below code. 

 <div class="table-container">
      <h2 class="table-heading">Sample HTML Table 2</h2>

      <table style="white-space: nowrap;">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Percentage</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td data-heading="First Name">Abhishek</td>
            <td data-heading="Last Name">padhi</td>
            <td data-heading="Percentage">90</td>
          </tr>

          <tr>
            <td data-heading="First Name">Happy</td>
            <td data-heading="Last Name">singh</td>
            <td data-heading="Percentage">85</td>
          </tr>

          <tr>
            <td data-heading="First Name">Virat</td>
            <td data-heading="Last Name">kohli</td>
            <td data-heading="Percentage">80</td>
          </tr>
        </tbody>
      </table>
    </div>
    
<style>    
    .table-container {
  font-family: system-ui;
}
  
 .table-container table {
    width: 100%;
    background: #fff;
    color: #222;
    box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4);
    border-collapse: collapse;
}

.table-container h2.table-heading {
  text-align: center;
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.table-container table {
  width: 100%;
  background: #fff;
  color: #222;
  padding: 24px;
  box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4);
  border-collapse: collapse;
}

.table-container table thead tr {
  background: #222;
  color: #fff;
}

.table-container table td,
.table-container table th {
  padding: 16px 32px;
  text-align: center;
}

.table-container table tr {
  border-bottom: 1px solid #eee;
}
  
  table thead th {
    color: white!important;
  }
</style>

You can check the screenshot attached below to know how it looks.

responsive HTML table in Blogger

⏺️ Last Updated 01-10-2022

Conclusion

Most of the HTML table generator for Blogger that I found online doesn’t works perfectly. That’s why you need to use the Table code and modify the data according to your need. It is super responsive on all types of devices. I use this method to add the table in my blogger post. 

I hope you like this method. What is your thought about this HTML table, let me know in the comment section. Also, don’t forget to share this with your friends on social media. 

Leave a Reply

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

One Comment