Blogger posts + tables = where has the rest of my text gone?

May 12, 2007 7:44 AM

I have a blog. In that blog, I post some data to a very simple table. 3 columns, up to 5 rows. However, I can't make the HTML work so that the text in the 3rd column wraps correctly.

Column 1 and 2 have maybe 10 letters of data in each. Column 3 contains the explanation of the data in 1 and 2, which can (theoretically) be any length of data. I have the table set up so:

screenshot

The table columns will automatically adjust to give column 3 enough space, but sometimes the text in #3 goes "off the page". How do I set things up so the text doesn't need more space than is available.

Another problem I have is that every single posting with the above code has a huge gap between the heading of the post, and the start of the table. Why is this?

I'm using the Minima template, on the new Blogger, with Firefox 2. Nobody else ever views the blog, so I'm not concerned about making it work with any other browser than Firefox.

posted by Solomon to computers & internet (16 comments total)

As you can see, I really need to learn HTML.
posted by Solomon at 7:45 AM on May 12, 2007

Well, just from a glance, you're closing the <td> for Column 2 and Column 3 when you should be opening it.

In other words:

</td>Column 2</td>
</td>Column 3</td>

should be

<td>Column 2</td>
<td>Column 3</td>
posted by L. Fitzgerald Sjoberg at 8:23 AM on May 12, 2007

For one thing, that's a screenshot of your HTML, not the effect you're seeing.

For another, you really do need to learn HTML: you are using closing tags for opening tags, as in
[/td]...[/td]
which should be
[td]...[/td]
Try fixing that and seeing if that solves your problems. In general, it's useful to validate your HTML as a way to diagnose problems.

Finally, I clicked through to your blog, so now a non-Firefox browser has looked at it.
posted by adamrice at 8:25 AM on May 12, 2007

I've edited the tags, and the table is behaving normally, ie, everything is laid out correctly, in the right place.

However, I'm still getting the odd "white space" thing, and the text still isn't wrapping correctly with the new HTML. The complete sentence in C3 R4 says "C3 R4 testing some really long text to see if it wraps round OK...............".

Picture of the effect.
posted by Solomon at 10:25 AM on May 12, 2007

Well, you are setting the width to be 550 pixels... if that is more pixels than you have to work with, then yes, it will go off the page. Try setting your width to fewer pixels, or to "100%" which will fill the horizontal space available.
posted by CaptApollo at 11:05 AM on May 12, 2007

I am a table fiend.

Try adding border=1 to the original table tag, to see exactly what the problem is, that you can remove later. You probably need to add width=400 (or how many ever pixels) to the specific column you want to wrap. Generally one cell per column will do it (as the rest will follow suit unless specified in another of the same column to be wider).

Ex.
[table][tr][td width=400]stuff that wraps after 400 pixels wide[/td][/tr][/table]
posted by vanoakenfold at 11:07 AM on May 12, 2007

in/re: width=550 on the main table tag -- 550 will only be 550 total width. you've got to cite individual cell widths once per column. longer text in an unspecified column (especially when all are unspecified) will result in a really wide column for that bit.
posted by vanoakenfold at 11:11 AM on May 12, 2007

I have tried viewing the table in Firefox and it does wrap if you magnify the font size. The problem is that the table seems to be too wide to fit in the column it's in. Have you tried deleting the "width=550"? Then it should automatically adjust.
posted by euphotic at 12:57 PM on May 12, 2007

Have you tried deleting the "width=550"? Then it should automatically adjust.

It does! Thank you very much.

However, I'm still getting the weird "white space" thing going on. The only HTML in the posting, is simply for the table. I haven't added any spaces etc before the HTML. It also does it irrespective of whether there is text above or below the table.
posted by Solomon at 1:31 PM on May 12, 2007

When you view the source on the tags are you seeing any <br> tags after your table, tr, and td tags? You could try putting everything on one line, like so:

<table><tr><td>1<td><td>2<td></tr><tr><td>3<td><td>4<td></tr>...</table>

and see if you still get the lines. If you don't, the blog is probably automatically adding break tags to your line breaks (which would appear before the table, hence the whitespace).
posted by backwards guitar at 10:46 PM on May 12, 2007

I knew I was going to mess that up..... after the digits, those should be </td> not <td>
posted by backwards guitar at 10:48 PM on May 12, 2007

Since the blank space only appears above tables and not with ul or p elements, I think there is some style sheet information hidden somewhere that says that all tables should have padding on the top edge. It doesn't show on the web page source code, so it must be on the blogger server. Or it may be related to the template you are using. Try a different template. Or try changing the table tag to something like
posted by euphotic at 12:13 AM on May 13, 2007

Correction to the last sentence: try changing the table tag to something like < table class='mytable' >
posted by euphotic at 12:15 AM on May 13, 2007

Why do you have < br /> in every table element? I ran the page through a validator and it said that < br /> is not allowed in a td. I think what may be happening is the browser is taking all the < br /> out of the table and placing them above the table, resulting in the blank lines. There is no reason to put the < br /> in the table so just delete them all.
posted by euphotic at 3:24 AM on May 13, 2007

I confirmed the solution by taking a copy of your page and removing all the < br /> That removed all the extra white space. If you still need to put something in a td element, you can put &nbsp; (no-break space).
posted by euphotic at 5:07 AM on May 13, 2007

Thanks to everyone who responded.

When I put the HTML all as one long line, the
tags were automatically removed, which put the table in the correct place.

Thanks again! :)
posted by Solomon at 8:50 AM on May 13, 2007