Creating a table in blogger posts can help blog visitors easily understand the main points of your explanation. In addition, it can also make your post look neater and look professional.

There are various kinds of tables with different shapes & styles. Starting from a dynamic look, stylish, and some are simple. All can be applied via CSS code or without CSS code. If you want to use tables in your blog posts, you can choose the type of table you want below.

How to Make Cool Tables in Blogger Posts

I will show 3 tables with different styles. For the first display is to use CSS code.

Cool 2 Column Table

Go to blogspot dashboard
Select Theme > Edit HTML
Press CTRL + F key to bring up the search field.
Find the code ]]></b:skin>
Copy the CSS code below, then paste it just above ]]></b:skin>

CSS Code

/* Table Post */
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) &gt; td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) &gt; 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=&quot;_blank&quot;]: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 you can select the Save option.

How to Use Cool 2 Column Table in Blogger Posts

Create a new post
Select HTML display option
Copy the HTML code below

HTML Code

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>FEATURES</th>   <th>AVAILABILITY</th> </tr>
<tr> <td>Responsive</td>   <td>Oke</td> </tr>
<tr> <td>Multi Author Template</td>   <td>Good</td> </tr>
<tr> <td>Free Blogger Templates</td>   <td>Oke</td> </tr>
<tr> <td>Featured Slider</td>  <td>True</td> </tr>
<tr> <td>Recent Posts Widget</td>   <td>Yes</td> </tr>
<tr> <td>Unlimited Sidebar widgets</td>   <td>True</td> </tr>
<tr> <td>Ads Ready</td>  <td>True</td> </tr>
<tr> <td>Customizable Color and Fonts Options </td>  <td>True</td> </tr>
<tr> <td>Social Icons Widget</td>  <td>True</td> </tr>
<tr> <td>Author Widget</td>   <td>True</td> </tr>
<tr> <td>Featured Post Style</td>  <td>True</td> </tr>
<tr> <td>Clean Elegant Design</td>   <td>True</td> </tr>
<tr> <td>SEO Optimized</td> <td>True</td> </tr>
<tr> <td>Fully responsive</td>  <td>True</td> </tr>
</tbody> </table>

Use the HTML code above to create a style 1 table post in your blog post.

The result is like this

Cool 3 Column Table

If you want to create 3 horizontal columns, you just need to change the HTML code. The CSS code is still the same as above. So just use the HTML code below.

HTML Code

<table>
    <tbody>
<tr>
            <th>Name</th>
            <th>Age</th>
            <th>Field of work</th>
        </tr>
<tr>
            <td>Michael</td>
            <td>19 years old</td>
             <td>Trader</td>
        </tr>
<tr>
              <td>Jhon Bass</td>
            <td>30 years old</td>
             <td>Teacher</td>
        </tr>
<tr>
               <td>Beckham</td>
            <td>40 years old</td>
             <td>Footballer</td>
        </tr>
<tr>
            <td>Justin Bieber</td>
            <td>27 year old</td>
             <td>Singer</td>
        </tr>
</tbody>
  </table>

The result is like this

Replace all the sentences above with your own sentences. If you feel that the row box is lacking, you can add it manually. On the other hand, if you feel there are more row boxes, you can delete them.

Simple 2 Column Table

Creating a simple table is very different from the cool version of the table above. Because of this simple table there is no need to use CSS. Simply use the HTML code that you can apply in blogger posts.

Copy the HTML code below and paste in a new post the HTML View option.

<table width="500" border="1">
<tr>
<td>Name </td>
<td>Michael </td>
</tr>
<tr>
<td>Age </td>
<td>25 years old </td>
</tr>
<tr>
<td>Field of work </td>
<td>Trader </td>
</tr>
<tr>
<td>Since </td>
<td>2010 </td>
</tr>
</table>

The result is like this

Name	Michael
Age	25 years old
Field of work	Trader
Since	2010

Simple 3 Column Table

<table border="1" style="width: 500px;">
<tbody><tr>
  <td><b>Name</b></td>
<td><b>Age</b></td>
<td><b>Field of work</b></td>
</tr>
<tr>
<td>Michael</td>
<td>25 years old</td>
<td>Trader</td>
</tr>
<tr>
<td>Ronaldo</td>
<td>35 years old</td>
<td>Footballer</td>
</tr>
</tbody></table>

The result is like this

Name	Age	Field of work
Michael	25 years old	Trader
Ronaldo	35 years old	Footballer

Simple 3 Column Table

<table border="1" style="width: 500px;">
<tbody><tr>
  <td><b>Name</b></td>
<td><b>Age</b></td>
<td><b>Field of work</b></td>
  <td><b>Since</b></td>
</tr>
<tr>
<td>Michael</td>
<td>25 years old</td>
<td>Trader</td>
  <td>2010</td>
</tr>
  <tr>
<td>Ronaldo</td>
<td>35 years old</td>
<td>Footballer</td>
  <td>2005</td>
</tr>
</tbody></table>

The result is like this

Name	Age	Field of work	Since
Michael	25 years old	Trader	2010
Ronaldo	35 years old	Footballer	2005

You can add a large number of rows and columns according to your needs. Please change the shape and position of the table above if the layout does not suit your taste.