How To Create Tables In Blogger

As in any other publishing / blogging platforms, sometimes we need to create tales in Blogger. However, many users find that unexpected spaces are added inside the table. This problem is caused by the line change conversion setting. Turning it off will not solve the matter, as all of the post will be influenced and potentially causes bigger problems. Here is a simple trick to overcome the issue.

As common HTML programming, to create a table in Blogger, first we need to put these codes in “edit HTML” section:


<td>Line 1 Col 1</td> <td>Line 1 Col 2</td> <td>Line 1 Col 3</td>

<td>Line 2 Col 1</td> <td>Line 2 Col 3</td> <td>Line 2 Col 3</td>

<td>Line 3 Col 1</td> <td>Line 3 Col 2</td> <td>Line 3 Col 3</td>


Then, as the default setting of Blogger will add a <br/> to every “enter” key usage (line change), we need to remove every line change inside the table codes to avoid unexpected blank space additions. Therefore, the codes will appear as:

<table><tr><td>Line 1 Col 1</td><td>Line 1 Col 2</td><td>Line 1 Col 3</td></tr><tr><td>Line 2 Col 1</td><td>Line 2 Col 3</td><td>Line 2 Col 3</td></tr><tr><td>Line 3 Col 1</td><td>Line 3 Col 2</td><td>Line 3 Col 3</td></tr></table>

This codes look very complicated may be, therefore, it is more efficient to finish editing the codes in the spacious form (first box above) before we remove the line changes. You can also use third party HTML editing software like Dreamweaver or Notepad++ to help in editing the codes.

However, this adaptation is only to optimize the table with line change conversion. If you do not enable it, you do not need to apply the adaptation. This setting is accessible through Dashboard >> Setting >> Format.

As in any HTML table, you can also apply these codes to set the table further:

<table width=”400px” border=”1” cellspacing=”2” cellpadding=”2”>
<tr align=”center” bgcolor=”grey”>

You can search for another supported table codes using HTML editor softwares such as Macromedia Dreamweaver.

Do you find any difficulties in applying it? Feel free to share in the comments.


360Jewels said...

I feel like I start to become an html expert after reading your blog! Two thumbs up to you!

360Jewels said...

Isaac! You should be very proud of yourself! I am able to create the table in my site!!!

Hooray!!! I don't know how to thank you enough! I guess I'll just tweet the world again to announce about you! :-)

Let's Eat Cheap said...

WOW! Thank you! I didn't actually end up needing to do all the br stuff, I just fiddled around with the html of the first part until it was exactly what I needed. Thank you!

krithika manohar said...

I found a easy and smart way of doing it in this Site and i think we can design a table with different style too without much hassale

Isaac Yassar said...

@K.M.: I've tried that method. So how would you deal with the default setting of blogger that adds a <br/> for every line changes there? There are lots of them, and they will screw up your design.

ahmad said...

hay isaac i made this simple script to remove enter key

Qodam said...

cellpadding doesnt work after published x_X

Skarlett said...

Thank you! Thank you! That was going to drive me nuts!!

samuel said...

there is a Elegant way of creating table in blogger but only down fall of this method is boxes look pretty large in firefox but if you can over come this this is pretty easiest way of doing it

ThaiLottoResults said...

Thanks a lot! I've been struggling with this thing for awhile now. The blogger editor always messes up my HTML code.

mary said...

thank you very much

dreamsforever said...

thanks buddy.

Madan Mohit said...

thank you very much for your guidelines

Elfina Twine said...

TY TY TY! Simple and easy, even I could understand. ;)