In this post, you will learn how to create a Responsive Table inside a blogger with the help of HTML and CSS code. And together you will also learn what is the Responsive Table and how it works.

How to create a responsive table inside Blogger?

What is a responsible table and how does it work?

The table which can change its size automatically according to the screen size of the device is called the Responsive Table. The responsive table looks different in different size devices, such as if you open it in mobile, it will appear in the mobile size and if you open it in the tablet, it will appear in the size and if you open it in the computer, the size of the computer Will appear. So this is how the Responsive Table works.

If the theme of your website or blog is a Responsive Theme, then you should use a Responsive Table inside it. If you do not use the Responsive Table inside the Responsive Theme, then when someone opens your website or blog on mobile, your table will not be fully visible to it and this will have a very bad effect on your website. So you should always use a Responsive Table within a Responsive Theme.

How to create a Responsive Table inside 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 the codes have been given below and along with that, it has also been told that the code has to be said and how to apply it. So you read all the steps given below and add those codes to your blogger in the same way as spoken in them.

How to add CSS code to Blogger?


To create a Responsive Table in Blogger, first, you need to add the below-given CSS code to your Blogger.
Read: How to Change Number of Posts Displayed on Blogger Home Page

CSS Code For Responsive Table-


/* CSS Post Table by https://estudydcp.blogspot.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 td, .post-body th{vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;border:1px solid #010101;}

.post-body table caption{border:none;font-style:Arial;}
.post-body table{}
.post-body th{background:#007874;color:#ffff;}


.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}

.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}


table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}

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.tr-caption-container{padding:4px;margin-bottom:.5em}

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}


td.tr-caption{font-size:80%}

There are two ways to add CSS code to Blogger. You can add CSS code to Blogger in either of these ways. If the first method does not work, then you can use the second method.

The first way to add CSS code to create a responsive table inside Blogger

  1. First, click on the Theme option inside Blogger.
  2. Then click on the Edit HTML option.
  3. After that, Blogger's HTML will open in front of you. Now you have to click inside the HTML once and then press Ctrl + F from the keyboard. Pressing Ctrl + F will open a search box in the upper right corner of the HTML. In that search box you have to search by typing]]> </b: template-skin>. If you do not get anything from this code, then search by typing </b: template-skin>. As soon as you write and search this code, this code will be highlighted inside the HTML wherever it is.
  4. Now you have to copy the CSS code above and paste it over]]> </b: template-skin> code. Remember you have to paste the CSS code before]]>.
  5. After doing so, click on Save theme and save the theme.

Another way to add CSS code to  create a responsive table Inside Blogger

If your CSS code does not work firstly, or if you cannot add CSS code inside Blogger in the first way, then there is another way you can add CSS code to your Blogger. This method is also easier than the previous one.
  1. First, click on the Theme option inside Blogger.
  2. After that a new page will open inside it, you will get an option called "Customize", click on it.
  3. After that 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 box of Custom CSS will open in front of you. Within this box, you can add whatever CSS code you want to add inside Blogger. Now you have to copy the above CSS code and paste it into this Custom CSS box.
  6. After that, click "Apply to Blog" option. By doing so, the CSS code will be added to your blogger.

How to use HTML code to create a Responsive Table in Blogger?


After adding the above CSS code to your blogger, now you can easily create a Responsive Table with the help of HTML code. Now see that the page or post under which you want to create a Responsive Table, within that page or post, you have to add the below-given HTML code. The method of how to add HTML code to a post or page is also described below.
Read: MEANING OF BLOG, BLOGGER & BLOGGING - ESTUDYDCP

<table border=1>

<tr>


<th>Social Media</th>

<th>No.</th>


<td>1.</td>

</tr>
<tr>


</tr>

<td>YouTube</td>
<tr>


<td>Facebook</td>

<td>2.</td>
</tr>
<tr>


</tr>

<td>3.</td>
<td>Twitter</td>
<tr>


</tr>

<td>4.</td>
<td>Instagram</td>


</table>


  1. After that, click on the "New post" option.
  2. After that, 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 a Responsive Table inside the post.
  4. By doing this, a Responsive Table will be created inside your blogger's post or page. 4 Row and 2 Column have been created inside the HTML code given for the table above, you can reduce or decrease them.
  5. If you want to learn how to edit the table, you can watch the video by clicking on the link given below and if you have any questions, you can ask by commenting below.
Also, Read This: 

Tags

8 Comments

Post a Comment

Previous Post Next Post