When you add a table to a post on blogger (as we did with the previous two posts) it gets rendered with a bunch of annoying additional spaces before it. That’s because the line breaks in your table’s HTML are turned into <BR> tags when you save the post.

So, a workaround is to define a style that suppresses the breaks for the span of the table. To do that, go into the HTML view of the blogger window and paste this code before your <table> tag:

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

Then, post the end div tag after your end table tag, like so:

</table><div>

All together, an example would look like this:

<style type=”text/css”>.nobrtable br { display: none }</style>
<div class=”nobrtable”>
<table>
<tbody><tr>
<td>My Cell Content</td>
</tr>
</tbody></table>
</div>

If you do this, you can’t use a <BR> tag to make a line break in your table. You have to use <P> tags or put your content in lists.

This is not an original solution. I got it from this guy. But he got it from somewhere else too. So, mostly I’m just posting it here so that the next time that I post a table, I know where to find it.