How to Create Responsive Table for Blogger

 

How to Create Responsive Table for Blogger?

In this post you will learn how to create Responsive tables using CSS and HTML code in Blogger. You will also learn what’s a Responsive table and it works.

What is a responsive table and it works?

A table that can automatically resize a device according to its screen size is called a changing table. Responsive table looks different in different sized devices, such as if you open it in mobile, it will appear in mobile size and if you open it in tablet, it will appear in size and if you open it in computer when I open it, the size of the computer will appear. This is how the accept table works.
If the theme of your website or blog is a responsive theme, you should use a responsive table within it. If you don't use Responsive Tables within Responsive Themes, then when someone opens your website or blog in Mobile, your desk will not be fully visible and this will have a very bad effect on your site, so you should always use a responsive table within a responsive theme.

How to create responsive table for blogger?

With the help of HTML and CSS code inside Blogger, you can easily create a responsive table. The HTML and CSS code that you will need to create a Responsive Table in Blogger; both codes are given below, as well as where to apply the code and how to apply it. So you should read all the steps below and add these codes to your blogger just like they said.

How to add CSS code for Blogger?

How to create a Responsive Table in Blogger, you will first need to add the following CSS code to your Blogger.

CSS code for Responsive Table

/* CSS Post Table by www.murskills.com*/

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

There are two ways to add CSS code to Blogger. Either way you can add CSS code to Blogger. If the first method does not work, you can use the second method.

First way to add CSS code to Blogger

First, click on Theme Options within Blogger.

Then click on the Edit HTML option.

After that, Blogger's HTML will open in front of you. Now you have to click once inside HTML and then press Ctrl + F from the keyboard. Pressing Ctrl + F will open the search box in the upper right corner of the HTML. In this search box you must quickly type ]]></b:template-skin>. If you can't find anything in the code, type </b:template-skin> in Search. When you type and search for this code, it will appear anywhere in the HTML.

All you have to do now is copy and paste the CSS code at the top. </b:template-skin>  Code Note that you must paste the CSS code first.

After doing so, save the theme and save the theme.

Another way to add CSS code to Blogger

If your CSS code doesn't work the first way or if you can't add the first way CSS code within Blogger, there is still another way you can add CSS code to your Blogger. This method is much easier than the previous method.

1. First, click on Theme Options in Blogger.
2. Then a new page will open inside it, you will get an option called "Customize", click on it.
3. Then Blogger Theme Designer will open in front of you. Now you will get an option called "Advanced", you have to click on it.
4. After clicking on the advanced option, you will see an option called "Add CSS" and Click on it.
5. After clicking on the Add CSS option, a Custom CSS box will open in front of you. Inside this box, you can add whatever CSS code you want to add inside Blogger. Now you need to copy and paste the above CSS code into this custom CSS box.
6. Then, click on the "Apply to Blog" option. By doing so, the CSS code will be added to your Blogger.

How to use HTML code in Blog post to create responsive tables in Blogger?

After adding the above CSS code to your Blogger, you can now easily create responsive tables using HTML code. Now see that inside the page or post under which you want to create a responsive table, you have to include the following HTML code. How to add HTML code to a post or page is also described below.

<table border=1><tr><th>No.</th><th>Social Media</th></tr><tr><td>1.</td><td>YouTube</td></tr><tr><td>2.</td><td>Facebook</td></tr><tr><td>3.</td><td>Twitter</td></tr><tr><td>4.</td><td>Instagram</td></tr> </table>

1. Then, click on the "New Post" option.
2. Then you have to Click on the HTML option.
3. After clicking on the HTML option, the HTML of the post will open in front of you. Now paste the HTML code above where you want to place the accept table inside the post.
4. Doing so will create a response table within your Blogger post or page. The HTML code in the table above has 4 rows and 2 columns, you can shorten them.