How to Easily Add Attractive Tables in Blogger 2024

5/5 - (1 vote)

 

How to Easily Add Attractive Tables in Blogger: Adding an Attractive and responsive table in Blogger requires some expertise in HTML as well as CSS. You may want to organize your content in a tabular format, arranged well in rows and columns. Unfortunately, Blogger does not provide the tools or options to create the tables for your site. But in this article, you will learn how to easily add an attractive table in Blogger.

How to Easily Add Attractive Tables in Blogger


Checkout: Best keyword research tools in 2023


Method 1:

Install Bootstrap CDN Code to Add Attractive Tables in Blogger

First, you need to install Bootstrap CDN to your blogger blog and for that follow the steps given below

Step 1: Open your blogger dashboard.

Step 2: Click on Theme.

Step 3: Click on Edit HTML.

Step 4: Press on Ctrl+F and find <head> section.

Step 5: Paste the Bootstrap CDN code just after <head>.

Bootstrap CDN Code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

Responsive Table

Use the given below code to Blogger Pages or Posts HTML section to show the table.

<table class="table table-striped">

<thead>

<tr>

<th scope="col">SL No.</th>

<th scope="col">First column</th>

<th scope="col">Second column</th>

<th scope="col">Third column</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">1</th>

<td>TECH</td>

<td>FOR</td>

<td>U</td>

</tr>

<tr>

<th scope="row">2</th>

<td>TECH</td>

<td>FOR</td>

<td>U</td>

</tr>

<tr>

<th scope="row">3</th>

<td>TECH</td>

<td>FOR</td>

<td>U</td>

</tr>

</tbody>

</table>

To make your blogger Tables more Attractive Follow the steps given below

Step 1: Go to Blogger Theme and click on the Customise button.

Step 2: Here click on Advanced and scroll down the option then click Add CSS and paste the CSS Code For Responsive Table here

Step 3. Then click on the “Apply to Blog” button.


Read More: How to Add Web Push Notification on Blogger Blog For Free (Step by step Tutorial)


CSS Code For Responsive Table

/* CSS Post Table by www.techfor.in*/
.post-body table th, .post-body table td, .post-body table caption{border:1px solid #2E2E2E;padding:.2em .5em;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #2E2E2E;}
.post-body th{font-weight:600;}
.post-body table caption{border:none;font-style:Arial;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;border:1px solid #010101;}
.post-body th{background:#007874;color:#ffff;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}

Read:


 

Method 2:

In this method, you just need to visit the given below website:

Advanced HTML CSS Responsive Table Generator

 

Create a table as per your requirements and Copy the respective code and use it in the blogger HTML section. This is the simplest way to create a responsive table for your blogger blog.

Finally, we hope this article can help you to understand “How to Easily Add Attractive Tables in Blogger ”. If you really think this article helps you then don’t forget to appreciate our efforts in the comments below. For more blogging tutorials, stay connected with us.

For the latest tech news & blogging Tutorials, follow TECH FOR U on TwitterFacebook, and subscribe to our YouTube channel.

Leave a Comment