Sep 1, 2007

Get rid of blank lines appearing before the table in blogger

I spent quite sometime evaluating my simple table HTML code which was creating lot of blank lines before the table itself. Below is a sample table.












JapanGermanyUSAKorea
ToyotaBMWFordHyundai


I used the following code for table construction.

<table ><tbody><tr>
<tr>
<td >Japan</td>
<td>Germany</td>
<td>USA</td>
<td>Korea</td>
</tr><tr>
<td >Toyota</td>
<td>BMW</td>
<td>Ford</td>
<td>Hyundai</td>
</tr>
</table>

The Html code looks fine. But, from where are these blank lines appearing infront of my table? Reason? Simple. The Formatting section of Settings tab has the below option.

A Yes for this option would mean that, every Enter will be replaced by a line break tag in the HTML and therefore the blank lines before the table.

A quick and easy(or not so) solution would be to construct the table without typing Enter key during the process. My reformatted table here with typing Enter within the table HTML code:
JapanGermanyUSAKorea
ToyotaBMWFordHyundai

There is another CSS solution to fix this.But, the css needs to be applied to every table we add.
Apply the below CSS code to your table and no dirty blank lines anymore.

<style type="text/css">.nobr br { display: none }</style>
<div class="nobr">
Your table HTML code goes here
</div >

CSS solution courtesy blog.

Any other hack? feel free to post a comment!

No comments:

Post a Comment