How to Create a Cool Responsive Table on a Blog | Blogger Tutorial

Making a table on a blog is perhaps the most important thing in explaining the terms, details, usability, etc. depending on the topic you are discussing. This is useful to make it easier for visitors to understand the explanation of the components that you write.

Creating a table on a blog will also make the appearance of blog posts that we make neat and not messy. So other people can understand the explanation in the table without having to explain at length. In the following, I will give you a way to create a cool responsive table on the blog.

How to Make a Cool Responsive Table on a Blog

To create a table on a blog, this is definitely related to html and css code. So as usual, go to the blogger dashboard, then choose a theme and choose edit html.

• Press CTRL + F to bring up the search field
• Look for Code ]]></b:skin>
• Then save the css code below right above ]]></b:skin>

/* Table Post By SEOLOADING */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.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) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.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;}
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%}

Then save the template. If so, now I will explain how to use this table in your blog post. Copy all the code below, and then choose a new entry / new post. Select the HTML section, not compose.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>FEATURES</th>   <th>AVAILABILITY</th> </tr>
<tr> <td>Responsive Tabel</td>   <td>Yes</td> </tr>
<tr> <td>This table is good</td>   <td>Good</td> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
<tr> <td>Fill in your writing here</td>  <td>OK</td> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
</tbody> </table>

Then the results from the above table are as below.

FEATURES	AVAILABILITY
Responsive Tabel	Yes
This table is good	Good
Fill in your writing here	OK
Fill in your writing here	OK
Fill in your writing here	OK
Fill in your writing here	OK

You can replace all of the writing above according to your wishes or better according to the topic that you discuss in your post. For example like this.

FEATURES	AVAILABILITY
Size	50 MB
Version	112.50.1.1.0
Android minimum	4.4 Kit Kat
Root	No
End of Update	1 January 2020
Expired	31 December 2020

You can also add / subtract table rows. The way is very easy, just copy the code one by one above, save it directly above the closing code </tbody> </table>. For example like this.

2 rows

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>FEATURES</th>   <th>AVAILABILITY</th> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
</tbody> </table>

The results of 2 lines of code are like this

FEATURES	AVAILABILITY
Fill in your writing here	OK
Fill in your writing here	OK

3 rows

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>FEATURES</th>   <th>AVAILABILITY</th> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
<tr> <td>Fill in your writing here</td>   <td>OK</td> </tr>
</tbody> </table>

The results of 3 lines of code are like this

FEATURES	AVAILABILITY
Fill in your writing here	OK
Fill in your writing here	OK
Fill in your writing here	OK

And so on. You can increase or decrease the number of tables as needed. The important point, it must end with a closing code </tbody> </table>.

Share :