tables in blogger

Unfortunately there is no table function in the blogger editor, you have to insert tables by hand by writing out the html code. Unless you have turned off the automatic new line generation you then will have to put the table construction in one single line.

<table><tr><td>one</td><td>two</td><td>three</td></tr></table>

Which renders like this:

one

two

three

For a small table this is not too much of a problem but for a larger one this is unworkable. On top of that you must provide all the styling either by inline css or via your template.

jquery to the rescue

If we insert our table like this

<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>

then blogger will put all of the br tags in front of the table.
By wrapping our table in an extra div we can use jquery to remove those br tags.

<div class='jqtable'>
table ...
</div>

Only one little line of code is needed to solve this problem:

$('.jqtable br').not('td br').remove();

This line removes all the br tags that are not in a td.
We execute the code when the document has loaded and add the script tags.

<script type="text/javascript">
$(document).ready(function() {
$('.jqtable br').not('td br').remove();
});
</script>

You can put this code in a html widget.I added a html widget to the footer section of the template for this purpose.

The jquery library has first to be loaded somewhere like this:

<script src="http://path/to/jquery-1.2.6.min.js" type="text/javascript"></script>

You can get it from google:
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

Now we can insert tables in a more readable way but we still have to type all the code...

Fun with Open Office

In OO calc you can export your spreadsheet as a html page. All you have to do is take care of a nice layout, OO will do the rest. Save your document as html and via a simple text editor (like notepad) cut out the table portion.

Paste in blogger, don't forget to wrap the table in a div.

<div class='jqtable'>
<TABLE FRAME=VOID CELLSPACING=0 COLS=7 RULES=NONE BORDER=0>
<COLGROUP><COL WIDTH=86><COL WIDTH=86><COL WIDTH=86><COL WIDTH=120><COL WIDTH=74><COL WIDTH=86><COL WIDTH=86></COLGROUP>
<TBODY>
<TR>
<TD STYLE="border-bottom: 1px solid #000000" WIDTH=86 HEIGHT=18 ALIGN=LEFT BGCOLOR="#CCFFFF"><B>Band</B></TD>
<TD STYLE="border-bottom: 1px solid #000000" WIDTH=86 ALIGN=LEFT BGCOLOR="#CCFFFF"><B>Frequency</B></TD>
<TD STYLE="border-bottom: 1px solid #000000" WIDTH=86 ALIGN=LEFT BGCOLOR="#CCFFFF"><B>Code</B></TD>
<TD STYLE="border-bottom: 1px solid #000000" WIDTH=120 ALIGN=LEFT BGCOLOR="#CCFFFF"><B>Station name</B></TD>
<TD STYLE="border-bottom: 1px solid #000000" WIDTH=74 ALIGN=LEFT BGCOLOR="#CCFFFF"><B>Language</B></TD>
<TD STYLE="border-bottom: 1px solid #000000" WIDTH=86 ALIGN=LEFT BGCOLOR="#CCFFFF"><B>Schedule</B></TD>
<TD STYLE="border-bottom: 1px solid #000000" WIDTH=86 ALIGN=LEFT BGCOLOR="#CCFFFF"><B>Online</B></TD>
</TR>
<TR>
<TD HEIGHT=17 ALIGN=LEFT BGCOLOR="#CCCCFF">AM</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">620 kHz</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">WVMT</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">WVMT</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">English</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Schedule</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Listen</TD>
</TR>
<TR>
<TD HEIGHT=17 ALIGN=LEFT BGCOLOR="#CCCCFF">AM</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">690 kHz</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">CINF</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Info 690</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">French</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Schedule</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Listen</TD>
</TR>
<TR>
<TD HEIGHT=17 ALIGN=LEFT BGCOLOR="#CCCCFF">AM</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">730 kHz</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">CKAC</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">CKAC</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">French</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Schedule</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Listen</TD>
</TR>
<TR>
<TD HEIGHT=17 ALIGN=LEFT BGCOLOR="#CCCCFF">AM</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">800 kHz</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">CJAD</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">CJAD</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">English</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Schedule</TD>
<TD ALIGN=LEFT BGCOLOR="#CCCCFF">Listen</TD>
</TR>
</TBODY>
</TABLE>
</div>

Typing this in blogger, no thanks.
The table renders like this:

Band	Frequency	Code	Station name	Language	Schedule	Online
AM	620 kHz	WVMT	WVMT	English	Schedule	Listen
AM	690 kHz	CINF	Info 690	French	Schedule	Listen
AM	730 kHz	CKAC	CKAC	French	Schedule	Listen
AM	800 kHz	CJAD	CJAD	English	Schedule	Listen live

Tested in firefox and ie7.

If you switch to blogger in draft you don't need this.