How to create a responsive table?
In this post , you will learn how to create a Responsive Table with the help of HTML and CSS code inside Blogger. And together you will also learn what is the Responsive Table and how it works .
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 Responsive Table. Responsive table looks different in different size devices, such as if you open it in mobile, it will show the size of the mobile and if you open it in the tablet, then its size will appear 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 in mobile, then 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 Simple Table In Blog Using HTML?
Actually, to create a simple table we only need a few of html code, namely:
<table> and </table> code to wrap the entire table
<tr> and </tr> code to make a drop column once wrap the sideway column area
<td> and </td> code to create sideway column on the table and a place to fill the post.
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.
CSS Code For Responsive Table in Blogger
/* CSS Post Table by www.newsonhy.online*/.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. You can add CSS code to Blogger either of the two ways. If the first method does not work, then you can use the second method.
Ways to add CSS code to Blogger
1st way to add CSS code to Blogger
- First click on the Theme option inside Blogger.
- Then click on the Edit HTML option.
- 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.
- Now you have to copy the CSS code above and paste it above]]> </b: template-skin> code. Remember you have to paste the CSS code before]]>.
- After doing so, click on Save theme and save the theme.
2nd way to add CSS code to Blogger
If your CSS code doesn't work in the first way or if you can't 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.
First click on the Theme option inside Blogger
After that a new page will open inside it, you will get an option called "Customize", click on it.
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.
After clicking on the Advanced option, you will see an option called "Add CSS" and click on it.
After clicking on 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.
After that, click on the option "Apply to Blog". By doing so, the CSS code will be added to your blogger.
How to use HTML code to create 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 within the page or post where you want to create a Responsive Table, you have to add the HTML code given below. The method of 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>
- After that, click on the "New post" option.
- After that you have to click on the HTML option.
- 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 Responsive Table inside the post.
- 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 reduce them.
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 question, you can ask it by commenting below.