How to Make Responsive Tables on a Blog

Hello friends, bloggers, in this article I will share a tutorial on How to Make Responsive Tables on a Blog .

The function of the table on a blog is something that is very important to implement. This is because the table tag on a blog page will make it look neater and also cool, especially for pages that present information in the form of data.

How to make a blog table is actually very easy, we can make it using Microsoft Word or Excel. However, this method is less effective, where the format contained in Microsoft Word or Excel will be carried over so that the table display that is applied to our blog is not responsive or static.

So how do we make the tables on our blog responsive? Well, for those of you who are having trouble making it, just follow the Tutorial on How to Make Responsive Tables on a Blog.

Tutorial on How to Make Responsive Tables on Blogspot

Add CSS code

Login to the Blogger Dashboard, Select Template, Edit HTML.
Then place the code below right above the code ]]> </ b: skin> . [To make the search easier press Ctrl + F]

/ * CSS Table Responsive By 24Dzgn * / .post-body table td, .post-body table caption {border: 1px solid # e9e9e9; padding: 5px 10px; text-align: left; vertical-align: top;} .post-body table th {border: 1px solid # e9e9e9; padding: 10px; text-align: left; vertical-align: top;} .post-body table.tr-caption-container {border: 1px solid # e9e9e9;} .post- body table caption {border: none; font-style: italic;} .post-body table {} .post-body td, .post-body th {vertical-align: top; text-align: left; font-size: 13px; padding: 3px 5px;} .post-body table tr: nth-child (even) & amp; gt; td {background-color: # f9f9f9;} .post-body table tr: nth-child (even) & amp; gt; td: hover {background-color: # 0082d8;} .post-body th {background: #bcdbfe; font-weight: bold; text-transform: uppercase; font-size: 14px} .post-body th: hover {background : #fdfdfd;} .post-body td a {color: # 768187; padding: 0 6px; font-size: 85%; float: right;

3. Make sure that the css code above has been placed correctly as shown in the example image below:

1. Examples of Blogger Table CSS Code Placement
4. Finally, click Save / Save .

How to Make Responsive Tables on Blog Posts

To create a table for a blog post, it's very easy, we just need to paste the code below in the post area where we will install the table, namely in HTML mode. As shown in the example image below:
Tutorial on How to Make Responsive Tables on a Blog

Responsive table 2 columns 5 rows

<table cellpadding = "0" cellspacing = "0" style = "text-align: left;">
<tbody>
<tr> <th> Column Header 1 </th> <th> Column Header 2 </th> </tr>
<tr> <td> Row 1 Column 1 </td> <td> Row 1 Column 2 </td> </tr>
<tr> <td> Row 2 Column 1 </td> <td> Row 2 Column 2 </td> </tr>
<tr> <td> Row 3 Column 1 </td> <td> Row 3 Column 2 </td> </tr>
<tr> <td> Row 4 Column 1 </td> <td> Row 4 Column 2 </td> </tr>
<tr> <td> Line 5 Column 1 </td> <td> Line 5 Column 2 </td> </tr>
</tbody> </table>

Responsive Table 3 Column 7 Rows

<table cellpadding = "0" cellspacing = "0" style = "text-align: left;">
<tbody>
<tr> <th> Column Header 1 </th> <th> Column Header 2 </th> <th> Column Header 3 </th> </tr>
<tr> <td> Line 1 Column 1 </td> <td> Row 1 Column 2 </td> <td> Line 1 Column 3 </td> </tr>
<tr> <td> Row 2 Column 1 </td> <td> Row 2 Column 2 </td> <td> Line 2 Column 3 </td> </tr>
<tr> <td> Row 3 Column 1 </td> <td> Row 3 Column 2 </td> <td> Row 3 Column 3 </td> </tr>
<tr> <td> Row 4 Column 1 </td> <td> Row 4 Column 2 </td> <td> Row 4 Column 3 </td> </tr>
<tr> <td> Line 5 Column 1 </td> <td> Line 5 Column 2 </td> <td> Line 5 Column 3 </td> </tr>
<tr> <td> Line 6 Column 1 </td> <td> Line 6 Column 2 </td> <td> Line 6 Column 3 </td> </tr>
<tr> <td> Line 7 Column 1 </td> <td> Line 7 Column 2 </td> <td> Line 7 Column 3 </td> </tr>
</tbody> </table>

Note:
To increase the number of columns, just copy the html code starting from the <td> to </td> tag then paste it next to the </tr> tag .

And to increase the number of lines, copy the html code starting from the <tr> to </tr> tag then paste it below before the </tbody> tag

Tutorial Closing
Maybe that's enough review articles about Tutorial How to Make Responsive Tables on a Blog . If you have questions regarding the contents of the article above, please leave a trace in the comments column below. Hope it is useful :)