How To Create A Stylish CSS Table In Blogger Posts

Blogger post editor comes with a number of features which help bloggers to give their posts a stylish and professional look. But when it comes to compare something or creating a table in the post, we don't find any option in post editor to insert a table. We may create an HTML table but it has some limitations and its not easy to give it a stylish look. Another option is to create tables on MS word and copy their code in our blog posts but that inserts an extra chunk of codes in our post thus slowing our page. In order to avoid these difficulties we will create a CSS table to add in blogger posts. The table which we are going to share also gives hovering effect and easily loads in posts without slowing your page. Below is the demo of this table.

Demo:

In this tutorial, we will learn how to add table like this in blogger post.

Add Stylish CSS Tables In Blogger Posts:

First of all you will have to make slight changes in your blog template so then you will be able to make the tables like this.
For this go to your blogger dashboard > Template > Edit HTML.

This will open blogger template editor in front of you. Click any where inside the template and press CTRL+F to open search bar inside template editor. Type ]]></b:skin> inside search bar and press enter. Paste following piece of code just above the ]]></b:skin> tag and click on save template.

table {
color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;
}

td, th {
height:30px;
transition:all .3s;
text-align:center;
width:auto;
}

th {
background:#B1B6AF;
font-weight:700;
border-radius: 5px;
}

td {
background:#FAFAFA;
}

tr:nth-child(even) td {
background:#F1F1F1;
}

tr:nth-child(odd) td {
background:#E1DDDD;
}

tr td:hover {
background:#666;
color:#FFF
}

(Note: In some custom templates, there is already CSS coding present for table, td and th. In that case, replace your existing table coding with the above one. Read introduction to most important web design languages to learn how to place CSS coding in webpage or template.)

This coding will work when you will add a table in your blogger post. To add a table in post, follow the below steps.

1. In post editor window, click on HTML tab above the text area so you will see HTML coding of your post in front of you.

2. Where you want to add a table, write your content in the following format. (Below is an example of the demo table's content)

<table>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>

 To add a row, insert new content in following format inside <tbody> tags.

<tr>
<td>SEO</td>
<td>Search Engine Optimization</td>
<td>Google</td>
</tr>

To add a column, make an addition within <th> tags in first section for example if we want to add a new column in above table, we will add new heading within <th> tags as illustrated below.

<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</tr>

Similarly add a new line in each section for addition of the content to be written under its appropriate heading. For example,

<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
<td>Designing</td>
</tr>

You can add or remove columns and rows in the similar way.

Customizations:

1. To increase space between borders, increase the value of border-spacing from 1px to your desired one. Remove border-spacing attribute if you are going to apply second customization.

2. To eliminate space between borders, change the value of border-collapse from "separate" to "collapse".

3. Change the values, highlighted in green to change color combinations according to your requirement.

Hope it helps adding a table in your blog. If you face any problem in creating a table, feel free to ask us in comments.