Ticker

6/recent/ticker-posts

How to Add Responsive Tables to Blogger Posts

 
Responsive Table



How to Create Responsive Tables in Blogger Posts

Hello Friend! Welcome to the blog. So, in today's article we are going to talk about how to create a responsive table. So what is it and how can I use it? So we will know all this in this article. So, learn more in this article.

What is a table?

As you know, we read about tables in childhood. But it is the language of the book. Now we are talking about blogs. So the table is also used in the blog area.

If you don't know about the tables in the blog area. So, let me tell you that the table is a way to decorate the article. If you have seen it on many sites. Articles on that website or blog have many tables with text. So the article looks very good too.

What is a responsive table?

Above we learned about tables. Do you know what a responsive table is? If you don't know, let me know that there are sites that only respond then. Your website or blog opens properly on both mobile and desktop. Similarly, when a table opens properly on both mobile and desktop, it is said to be a responsive table.


Using Responsive Tables in Blogger Posts

If you are a blogger. So, you probably know that creating responsive tables in WordPress is very easy. However, many people don't know how to put the same responsive table in blogger's posts. Blogger does not come with a separate plugin. Whatever you need to do as a blogger, you should do it all with the help of coding. So in this article I've shared all that coding with you. Easy to use in Blogger posts. Also, whatever coding I've shared, all the code is perfectly ready. You only need to change a few words.

Responsive Table Implementation Steps

Now it's time to learn how to use this responsive table in your Blogger blog posts. So, I have explained it step by step below. Therefore, you must follow all the steps given below. So keep reading.

  • First, you need to log in to your Blogger dashboard.
  •  You will now see your CDN code in the box below. You need to copy this code.
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

  • Now you need to go to Themes and click on Edit HTML. Now paste the copied code under the <head> tag and click Save Theme.
  •  In the next step you will see the HTML code in the box below. Copy this code.
HTML
​<div dir="ltr" style="text-align: left;" trbidi="on">
<table class="full">
<tbody>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Download Gold PicsArt Mod APK</span></th></tr>
</tbody>
<tbody>
<tr><td><b>App Name</b></td><td>PicsArt Gold [Mod]</td></tr>
<tr><td><b>App Size</b></td><td>40 MB</td></tr>
<tr><td><b>Version</b></td><td>v13.0.6</td></tr>
<tr><td><b>Supported On</b></td><td>Android 4.4+</td></tr>
<tr><td><b>Root Required</b></td><td>No</td></tr>
<tr><td><b>Available On</b></td><td>Playstore</td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<div style="text-align: left;">
<br /></div>
</div>

  • Now you need to go to your new post, click on HTML and paste this code.

Conclusion 

Did you like the Add Responsive Tables article on the Blogger Post? Please let us know in the comments section below. Or if you would like to make some kind of suggestion, you can share your opinion in the comment box below.

Post a Comment

0 Comments