How to Easily Add Attractive Tables in Blogger 2020

How to Easily Add Attractive Tables in Blogger 2020

How to Easily Add Attractive Tables in Blogger 2020 1

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.

Also Read: Free theme for blogger || Best Premium Blogger theme for Free 2020

Install Bootstrap CDN Code

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

Read More:  How to Create a Sitemap on blogger - Submit to Google & Bing

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

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

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

Read More:  Best Free Video Editing Software 2019 | TECH FOR U

Step3. 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%}

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.

Read More:  100+ High DA PA Guest Posting Sites 2020

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

Updated: August 25, 2020 — 12:40 pm

Comments

Add a Comment
  1. Pingback: Admin

Leave a Reply