Sunday, April 26, 2009

Problem with HTML table in blogspot post

Problem: Every time I try to insert a table, I create a huge space between the last line of text and the table. How do I prevent the space gaps?
This article will give solution for this problem.

Example of HTML table with empty space between the last line of text and the table when blogspot post is published:










A B
C D



This is problematic HTML code for table:

<table border="1" cellspacing="0" cellpadding="3" width="50%" align="center">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>



Problem is new lines. When you publish this code blospot will every new line represent with </br>. To resolve this problem in "Edit Posts" you should write all HTML table code in one line.

HTML code for table in blogspot post without unwanted empty space:

<table border="1" cellspacing="0" cellpadding="3" width="50%" align="center"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>


Example without empty space:

AB
CD


This rule also apply for writing javascript inside blogger post and jquery inside blogger post.



9 comments:

ofisofi** said...

hello, i would like to know...if you know...how can i have one post in my labels without this appear in my main page..i mean,for example,i have one foto with tag "my fotos"..and i want to appeares this foto only in my labels and not in my page.. thank you.
ofisofiii@hotmail.com (i prefer you to answer in my e-mail, if it's possible)

Mark said...

One suggestion is to create post and set in Post options "Post Date" before any of your posts. After this your post will be last so it will be very hard to see it. Hope this workaround help.

web design quote said...

I am also facing these problem in my blog. Thanks for your post on this issue. I hope this time i will solve out this problem.

KarthikPrabhu said...

hey thanks a lot man..i tried al possible ways to get rid of the space but never found until i chk out this post..thank u once again ..u saved my time:)

Anonymous said...

hey thanks alot buddy
very useful post for me:)

Anons said...

Thanks! Blogger helping bloggers!

Mahesh Chander Kaushik said...

thanks a lot i try my best to resolve this problem but this post solve my problem

Anonymous said...

Hello All,
First let you say thanks for publishing this beautiful post. But I've found a easy way to insert the tables in web pages by google doc's as I'm also a programmer. As this section can easily done by novice programmer. I hope u like it
1. login to gmail a/c
2. select document which will be top left side of the navigiate bar or login to docs.google.com
3. You will notice at left side of the bar u have "Create New" option, select new SpreadSheet
4. Add all your data which will be in excel format.
5. Remove extra Columns & rows from google SpreadSheet.
6. Save the file with your relevant name.
7. Now go to Share option which will be at the right side, top near to navigiate bar.
8. Now in Share option select Sheets to publish. Publish your file.
9. Next to the below you find "Get a link to the published data". Below this section you find dropdown menu -> Select HTML section
10. You get the embedded HTML code. Copy this section & paste it in your web page.
My blog - http://www.buildtraffic4site.blogspot.com

Ranjit said...

thanks for tutorial about table in blogger it relay help me..thank again..