Saturday, January 13, 2007

Table Formatting in Blogger

I'm pretty new to Blogger but one of the first snags I hit was with formatting tables due to the way Blogger automatically inserts line breaks. You can disable that behavior under Settings but it's a global option so it affects all posts. Another option is to write your tables without line breaks, but that's a maintenance problem.

Here's another approach that works (tested with Firefox 1.5 and IE 6; anyone have other browser results?). At the top of your post add this:

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

Then place your table within that class:
<div class="nobr">
<table border="1">
<tr>
<td>GOOG</td>
<td>505.00</td>
<td>2006-01-12</td>
</tr>
<tr>
<td>BRK-A</td>
<td>110,000.00</td>
<td>2006-01-12</td>
</tr>
</table>
</div>
That has the effect of turning off the display of the Blogger-generated line breaks within the div, causing the table to be rendered properly.

Here's how that table looks in your browser:













GOOG 505.00 2006-01-12
BRK-A 110,000.00 2006-01-12


I think it should be possible to move the CSS declaration into the template so you don't have to repeat it in each post.

Note from reader S.B.:
Unfortunately, both the "Compose" and "Preview" views of a post still render incorrectly, but when you actually publish, the table does come out right!

41 comments:

Soundwave said...

I used this code in my blog and it works like a charm. Tested it in Firefox 2, looks great!

S. B. said...

I also used this code in my blog and it works great. Unfortunately, both the "Compose" and "Preview" views of a post still render incorrectly, but when you actually publish, the table does come out right!

Anonymous said...

Wow thank you for this article that was exactly what I was looking for. Great!

Gopi said...

This worked really well. Thanks a lot. I still ended up spending a lot of time with a problem with preview, where the HTML table borders were not seen. I gave up and published my blog and realized that in the blog view the table borders were seen as expected. Hopefully someone is looking at this and will fix this bug in preview.

Ihar Filipau said...

Here is little bit improved my version of your style. (I additionally make table cells vertical aligned.)

<style type="text/css">
.nobr br { display: none }
td { vertical-align: top }
.table-br tr td br { display: inline }
</style>
<div class="nobr">
<table border=1 class="table-br">
[...]
</table>
</div>

Biggest difference, is that now brs in table itself will show up as expected.

Probably you haven't guessed where problem with the spaces are coming from. It comes from browser workaround for HTML bug when some content found in between table tags. And that's precisely what Blogger generates.

e.g. for:
</tr>
<tr>

Blogger would generate that:
</tr> <br/> <tr>

What is invalid HTML, since in table content can be only inside <td> tag.

Common workaround (most browsers do implement) is to push out the non-cell content right before table. This explains - if you ever wondered - why applying class to table itself doesn't work: illegal content (the br's) is right before table, not in table itself. The div catches it - but table itself doesn't.

Joel Badinas said...

Thanks for this, it really help me in adding tables in my post.

I have a blogger's corner campaign. I would appreciate if you join. Thanks.

Andriy P. said...

Thanks for great advices!

Ron Southern said...

I waited a long while, but finally tested what sounded like it would work, and it does work!

First I placed the following line of code in my CSS:

.nobr br { display: none }

And placed my table as below in the post:

<div class=nobr>
<table border=2>
<tr>
<td>PICTURE</td>
<td>OR TEXT</td>
</tr>
</table>
</div>

I hope all is settled with that now!

Rat, Renegade Blog*Star
Rattling my saber at: http://20stickyposts.blogspot.com/ Most Frequent Blogger Questions
Also a trifle frivolous at: http://rodentia.blogspot.com/" The Rat Squeaks"

Tim Turner said...

Sounds good, I've been pulling hair all day"! But I've never been able to edit CSS. I always get denied that it can't save the changes because they are incorrect or something to that effect.
I'll keep looking, I've never seen an HTML Editor that would not recognize tables exactly as coded.
Tim

Aju Chacko said...

You saved me..Lot of thanks

Bynchen said...

Thank you so much for your help! My table looks now very beautiful! :-)

Anonymous said...

Exactly what I was looking for - thanks!

M. Simon said...

Tables have been making me crazy for months.

Sanity has returned.

Kudos!!!!!!!!!!!!!!!

Écrivain Humaniste said...

THANKS A LOT !!!

I knew I would find some people to help me with my table issue !!

Big thumb up guys !!!

Suwarnaadi said...

Thanks for a simple but great tip. It works.
Bravo!!

Robert Mark Bram said...

Nice one! I found a different work-around, slightly more suitable for my situation. I wrote it up at Blogger: Convert Line Breaks Setting - I reference your post in mine because you deserve it!

Rob
:)

Tricahyo Abadi said...

I got a bug (?) or sth wrong with hte code. That is, when i put that code i got mark "<" above my table. Anybody can help me?

Here:
http://srimulat-crew.blogspot.com/2008/07/srimuat-crew-members-update.html

mla said...

tc-a: yeah, I think you have some markup issues.

I viewed the source and I see your <div class=nobr>, but I don't see where you define the nobr style.

You might try running your page through a validator: http://validator.w3.org/

Karthik Kumar said...

Thanks a lot!
I used to removed all line breaks in my table to avoid he white spaces.
But thanks to your code, I dont have to do that cumbersome task.

gibby said...

Implemented it, and it works instantly! Thanks man!

Buckle Affiliate Manager said...

How do I get rid of the darn borders in all of my posts? I add the images and ensure I have the border="0" tag. When I preview, everything looks fine but - when I actually post - the borders are there and I hate them! I'm using Firefox . . .

Thank you!

mla said...

You mean the borders around your photos?

Buckle Affiliate Manager said...

Yes . . . exactly! I've tried to put in the border="0" tag within the image tags themselves and the darn borders STILL show up.

Thanks!

Admin said...

thank you!!!

Byte64 said...

Hi,
interestingly enough your workaround seems to get rid of another problem that was the main cause of my concern, that is a poor vertical alignment of the whole table.
Without your CSS tip i was getting the table aligned all the way to the bottom, with a huge gap between the last line of text and the beginning of the table.


Kind regards,
Flavio

runninginthefog said...

MLA Wire - can i use the 'table formatting' info you've provided with an excel, or google doc 'sheet' ? Meaning, if i copy a table from either and paste it into my blogspot it doens't retain it format or shape. if i use the tips and code editting you suggested will it remain as a table ? ( yes, i'm quite novice and new to this ) thanks

Niramit Soonthawong said...

great, I had looking for this option.
My previous solution was to turn the whole blog without br but that is not quite what I need.
Thank a million

ChangLooGrace said...

Another satisfied customer!
Works like a charm.
Thanks

4im said...

thank for your solution. it's very help me to fixed my table layout. ;-)

Tamil Songs said...

Hey i got it , thanks..
veryuseful to me

Japie Bosch said...

Try Tableizer at http://tableizer.journalistopia.com/.

Neat and fast. Great aid.

exp said...

Thank you for your code.
If I hadn't this code, my blog might be very ugly.

Cuffmasters said...

Thanks saved me a lot of head scratching........

Anonymous said...

Very informative article, thank you for your suggestions and tips.
Web Designer Web development

Alex said...

Thanks! I now wrap my entire posts in the magic nobr div, and I can get HTML with gratuitous line breaks to show up according to spec.

Jamile said...

Works great as long as I never view it in "compose" or try to edit it after posting. Any attempt to edit after posting or to view in "compose" takes out the style line, puts the space back in, and screws up the colors in the table! I have one shot to get it right.

mla said...

@Jamile: interesting. What browser are you using? I'm on Firefox and no matter what I do in composer the style line seems to be preserved for me.

Anonymous said...

Hello all,
First let you say thanks for publishing this beautiful post. But I've found a easy way to insert the tables in web pages by google doc's as I'm also a programmer. As this section can easily done by novice programmer. I hope u like it
1. login to gmail a/c
2. select document which will be top left side of the navigiate bar or login to docs.google.com
3. You will notice at left side of the bar u have "Create New" option, select new SpreadSheet
4. Add all your data which will be in excel format.
5. Remove extra Columns & rows from google SpreadSheet.
6. Save the file with your relevant name.
7. Now go to Share option which will be at the right side, top near to navigiate bar.
8. Now in Share option select Sheets to publish. Publish your file.
9. Next to the below you find "Get a link to the published data". Below this section you find dropdown menu -> Select HTML section
10. You get the embedded HTML code. Copy this section & paste it in your web page.

My blog - http://www.buildtraffic4site.blogspot.com

nitin said...

Thanks! it really works!

Terence R. Gaylord said...

Thanks! you really work good

Terence R. Gaylord said...
This comment has been removed by the author.