Avoid large white space above table in Blogger Part 2

I have previously published a post Avoid large white space above table for Blogger. That is an easy but messy way of doing it because you cannot type your table in a standard format that is easy to follow and debug, for example, like this (if you want an easier way to create tables without problems, refer to How to easily create table with Windows Live Writer:

<table border="1">
<tr>
<td>Heading 1</td><td>Heading 2</td><td>Heading 3</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>

If you do this, you will get large white space above the table because Blogger adds a <br /> tag for each time you press the EMTER key to start a new line, causing a line break to be created.

To avoid this, add this before HTML for your table or tables if you have more than 1:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">

Then type the HTML for the table or tables. At the end of the table or tables, add this:

</div>

I have tested the method and you can see the result here:
Testing another way of avoiding large white spaces above the table in Blogger. To make things clearer, I will put the script to display that test post with a short description, 2 headings and two tables in the scroll box below:

I have previously posted about <a href="http://blogger-tricks.blogspot.com/2006/08/how-to-avoid-large-white-space-above_21.html">How to avoid large white space above tables in Blogger</a>.

Got some information from one of my blog reader about another way to do it, so will test it here to see if it works:
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">

<h3>First table</h3>
This is the first table I am using for the test. The "data" in the table are actually hyperlinks.

<table border ="1">
<tr>
<td>My First Blogger blog</td>
<td>My Second Blogger blog</td>
<td>My Third Blogger blog</td>
</tr>
<tr>
<td><a href="http://bloggerfordummies.blogspot.com" target="_blank">Blogger for Dummies</a></td>
<td><a href="http://blogger-tricks.blogspot.com" target="_blank">Blogger Tips and Tricks</a></td>
<td><a href="http://dummies-guide-to-google-blogger.blogspot.com" target="_blank">Dummies Guide to Google Blogger</a></td>
</tr>
</table>

<h3>Second table</h3>

<table border="1">
<tr>
<td>Heading 1</td><td>Heading 2</td><td>Heading 3</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>

</div>

Update: As you can see, there are not large white space above the table.

Acknowledgement: This post was prepared thanks to an alert from a blogger Nitin of Problems with table formatting with Blogger or blogspot whose information I used with some modification.

Update 2011: For an even easier method of publishing tables without creating unwanted blank space, see How to easily create tables with Windows Live Writer

Update 2: Nitin said in his blog he got the information from another site. He didn't give the link to the site. I was contacted by another blogger saying he probably got it from his site Table formatting in Blogger. This post was dated Saturday, January 13, 2007 while Nitin's post was dated Wednesday, June 27, 2007.