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: 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 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://techforu.in/wp-content/litespeed/localres/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
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.
Post a Comment