Thursday, May 8, 2008

How to get rid of extra space in blogger when using table

Tips for posting to Blogger. This took me some time to find. The trouble is that when using table in Blogger, I got a lot of spaces (carriage returns) before it.
In fact, the culprit is the carriage returns in my HTML code. Their presences make editing easier, but cause Blogger to display all of them before the table.
A simple solution is to edit it with a different editor first. Before pasting them into Blogger, delete all the carriage returns.
The following is a simple code of before and after posting.

-------------before-------------
HTML Code
<table border="1">
<tbody>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</tbody>
</table>
Result






cell1cell2
-------------after-------------
HTML Code
<table border="1"<tbody><tr><td>cell1</td><td>cell2</td></tr></tbody></table>
Result
cell1cell2

In fact,I have to delete all the carriage returns to make this post as it is.<div> tag and its style attributes helps a lot to write this post too. "&lt;" and "&gt"; are also needed to display the "<" and ">", similarly, <verbose> for "&". For other special character entities, please refer to W3C's references. Wikipedia gives a great summary of List of XML and HTML character entity references.
To my delight, I found out that this solution also applies to any other mysterious spaces, not only just tables. For example, if you have an carriage return after a $lt;div$gt; section, you will get huge gap between the div section and the following paragraph. The solution: go to "Edit Html" mode and delete carriage return.

Here
are some similar tips in Japanese.

No comments:

Search the Web