Add a Responsive Table in Blog Post Using Bootstrap Design, HTML, and CSS Code

Jack SEO

18 Nov, 2023

Add a Responsive Table in Blog Post Using Bootstrap Design, HTML, and CSS Code

Hey there, bloggers! In this post, we'll dive into the nitty-gritty of adding a responsive table to your Blogger post. Whether you're a coding pro or a novice, we've got you covered with three simple methods. Let's make your content pop with a visually appealing and user-friendly table.

Why Add a Table to Your Blogger Post?

Tables offer a clear and concise way to present information. Whether it's data, comparisons, or simply organizing content, a well-designed table enhances the reader's understanding. So, let's get started on adding that much-needed table to your Blogger post.

What is a Responsive Table?

A responsive table is an HTML table that adapts to various screen sizes, providing an optimal viewing experience on devices like desktops, laptops, tablets, and mobiles. It's not just about fitting the table; it allows users to interact with and navigate the data seamlessly.

In simple terms, a responsive table in Blogger changes its size dynamically based on the device screen size. Let's explore the benefits of incorporating such tables into your blog.

Benefits of Adding a Responsive Table in Blogger

Enhanced Visibility: A responsive table ensures your content is fully visible, even on mobile devices, within a responsive theme.
Engagement: Keep visitors engaged as the table adjusts effortlessly to their screen, providing a seamless browsing experience.
Interactivity: Allow users to sort, filter, and search rows directly, enhancing their overall experience.
Time-Saving: No more waiting for content to load; enjoy a consistent experience on both desktop and mobile views.

How to Create a Responsive Table in Blogger

Method 1 - Easiest Way: Bootstrap Design

Open your Blogger Dashboard.
Navigate to Theme Options and click on Edit HTML.
Add Bootstrap CDN in your template by pasting the following code below the <head> tag: (Press Ctrl + F And Search For Bootstrap if bootstrap CDN is already present then you can skip this step else search for <head> tag.) <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Open the desired post, switch to HTML view, and paste the HTML table code. <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Heading 1</th> <th scope="col">Heading 2</th> <th scope="col">Heading 3</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> <tr> <th scope="row">2</th> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> <tr> <th scope="row">3</th> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> </tbody> </table>
You Can Edit The Code And Add Whatever You Want To Add Inside Table
At last Click On Publish And You Have Successfully Added a Beautiful Table in Blogger Post using Bootstrap CDN.

Method 2 - HTML and CSS Code

Open the post where you want to add the table.
Switch to HTML view and paste the provided HTML and CSS code for a responsive table.

CSS Code 1

  <style type="text/css">
    table {
      border: 1px solid #eee;
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      width: 100%;
      color: #555;
    }

    table caption {
      font-size: 1.5em;
      margin: .25em 0 .75em;
    }

    table tr {
      background: #eee;
      border: 1px solid #ccc;
      padding: .35em;
    }

    table th,
    table td {
      padding: .625em;
      text-align: center;
      border: 0;
    }

    table th {
      font-size: .85em;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: #ddd;
    }

    table td img {
      text-align: center;
    }

    @media screen and (max-width: 600px) {
      .post table {
        border: 0;
      }

      .post table caption {
        font-size: 1.3em;
      }

      .post table thead {
        display: none;
      }

      .post table tr {
        border-bottom: 3px solid #ccc;
        display: block;
        margin-bottom: .725em;
      }

      .post table td {
        border-bottom: 1px solid #ccc;
        display: block;
        font-size: .8em;
        text-align: right;
      }

      .post table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }

      .post table td:last-child {
        border-bottom: 0;
      }
    }
  </style>

Presently open Blog post switch to HTML see And Paste The Following HTML Codes

HTML Code 1

  <table>
    <caption>Caption Table</caption>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Address</th>
        <th scope="col">Email</th>
        <th scope="col">Phone Number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Name" scope="row">Infinite Insights</td>
        <td data-label="Address">Manchester, England</td>
        <td data-label="Email">Infinite_Insights@example.com</td>
        <td data-label="Phone Number">021-01010xxx</td>
      </tr>
      <tr>
        <td data-label="Name" scope="row">leo xxxx</td>
        <td data-label="Address">New York, US</td>
        <td data-label="Email">zzzzzzzzzz@example.com</td>
        <td data-label="Phone Number">01-999999xxxx</td>
      </tr>
      <tr>
        <td data-label="Name" scope="row">xxxx Bieber</td>
        <td data-label="Address">New York, US</td>
        <td data-label="Email">xxxxxxxxxx@example.com</td>
        <td data-label="Phone Number">01-333333333333333</td>
      </tr>
      <tr>
        <td data-label="Name" scope="row">Selena xxxx</td>
        <td data-label="Address">Texas, US</td>
        <td data-label="Email">hhhhhhhhhhhh@example.com</td>
        <td data-label="Phone Number">01-222222222222222</td>
      </tr>
    </tbody>
  </table>

Now If the above table work for you then congrats, and if not why not try another code from below to insert table in google blogger.

CSS Code 2

  /* CSS for Responsive Table By https://infiniteinsightsonline.blogspot.com/ */
  .restable {
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
  }

  .rescap {
    border-left: 4px solid #009879;
    padding: 15px;
    font-family: georgia;
    font-weight: bold;
    font-size: 20px;
    background-color: #dddddd;
    color: #990a00;
    text-align: left;
    overflow: hidden;
    margin-bottom: 4px;
    width: 100%;
  }

  .resth {
    padding: 12px 15px;
    background-color: #009879;
    color: #ffffff;
    font-family: georgia;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid #dddddd;
    text-align: center;
  }

  .restr {
    border: 1px solid #dddddd;
  }

  .restd {
    padding: 12px 15px;
    font-family: arial;
    font-size: 20px;
    text-align: center;
    border: 1px solid #dddddd;
  }

  .restr:last-of-type {
    border-bottom: 2px solid #009879;
  }

  .restr:nth-of-type(even) {
    background-color: #f3f3f3;
  }

Now Open Blog post and paste below second table html code.

HTML Code 2

  <div>
    <table class="restable">
      <caption class="rescap">Simple Responsive Data Table</caption>
      <tbody>
        <tr>
          <th class="resth">Name</th>
          <th class="resth">Score</th>
          <th class="resth">Status</th>
        </tr>

        <tr class="restr">
          <td data-label="Name" class="restd">Ravi</td>
          <td data-label="Marks" class="restd">178</td>
          <td data-label="Status" class="restd">Pass</td>
        </tr>

        <tr class="restr">
          <td data-label="Name" class="restd">Prem</td>
          <td data-label="Marks" class="restd">169</td>
          <td data-label="Status" class="restd">Pass</td>
        </tr>

        <tr class="restr">
          <td data-label="Name" class="restd">Alex</td>
          <td data-label="Marks" class="restd">97</td>
          <td data-label="Status" class="restd">Fail</td>
        </tr>

        <tr class="restr">
          <td data-label="Name" class="restd">Gale</td>
          <td data-label="Marks" class="restd">120</td>
          <td data-label="Status" class="restd">Pass</td>
        </tr>
      </tbody>
    </table>
  </div>

That’s it, you'll customize the responsive table agreeing to you. At last, in case you discover this post supportive or in the event that you confront any issues, if it's not too much trouble don’t disregard to comment underneath.

Creating a Responsive Table with HTML and CSS3 (Without Script)

Sign in to your Blogger Dashboard.
Open the Template page and click on Edit HTML.
Insert the provided CSS3 code above the </head> tag.
Save the template setting.
Paste the HTML table code into your blog post in HTML view. Customize the content as per your requirements.

Method 3 - Free and Fastest: Advanced Table Generator Tool

So at long last legitimate direct on how to insert table in blogger and make a delightfully outlined HTML table within the blog post utilizing an progressed online table generator.

Go to Quackit HTML Table Generator Website
You can now Customize the table as needed such as changing the number of rows and columns, and you can change the color of the table and its borders.
Copy the generated HTML code and paste it directly into your Blogger post.

Using an advanced Responsive HTML table generator you can customize cell padding, cell color, text color for desktop and mobiles. 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.

Now, your responsive table is ready to impress your readers!

Frequently Asked Questions (FAQs)

Q1: Why is a responsive table important for a Blogger post?: A1: A responsive table ensures optimal visibility and engagement across various devices, providing a seamless user experience.
Q2: Can I customize the table design?: A2: Absolutely! Follow the provided methods and feel free to customize the table's appearance to match your blog's style.
Q3: Are these methods suitable for any Blogger template?: A3: Yes, these methods are versatile and can be applied to most Blogger templates without affecting the overall design.

Conclusion

Congratulations! You've successfully learned multiple ways to add a responsive table to your Blogger post. Choose the method that suits your needs and enhance your content presentation. Engage your readers with visually appealing tables, and remember to share your thoughts in the comments.

Add a Responsive Table in Blog Post Using Bootstrap Design, HTML, and CSS Code

Add a Responsive Table in Blog Post Using Bootstrap Design, HTML, and CSS Code

Why Add a Table to Your Blogger Post?

What is a Responsive Table?

Benefits of Adding a Responsive Table in Blogger

How to Create a Responsive Table in Blogger

Method 1 - Easiest Way: Bootstrap Design

Method 2 - HTML and CSS Code

Creating a Responsive Table with HTML and CSS3 (Without Script)

Method 3 - Free and Fastest: Advanced Table Generator Tool

Frequently Asked Questions (FAQs)

Conclusion

Popular Posts

Categories

Native Banner

Follow The Blog

Follow us on News

Add a Responsive Table in Blog Post Using Bootstrap Design, HTML, and CSS Code

Why Add a Table to Your Blogger Post?

What is a Responsive Table?

Benefits of Adding a Responsive Table in Blogger

How to Create a Responsive Table in Blogger

Method 1 - Easiest Way: Bootstrap Design

Method 2 - HTML and CSS Code

Creating a Responsive Table with HTML and CSS3 (Without Script)

Method 3 - Free and Fastest: Advanced Table Generator Tool

Frequently Asked Questions (FAQs)

Conclusion

Popular Posts

Instagram Fonts Generator

YouTube Thumbnail Download HD

QR Code Generator Text Or URL

iFrame Generator - Free Online iFrame Code Maker Tool

Mastering Visual Appeal: Elevate Your Blog with SVG Icons and Graphics

Categories

Native Banner

Follow The Blog

Follow us on News