Wednesday, November 01, 2006

[html] Table Trouble

There are likely newer, better ways to build a table but I found a Tables 101 tutorial somewhere and built one that to my eyes looks not bad, thank you, given its architect :-) ... ... except that once it's published (vs previewed) a large space has appeared between the title and the table, appearing in both Firefox and IE. Is anyone able to help close the gap? Here's the trouble.

Many thanks from Alanna at A Veggie Venture

5 comments:

Anonymous said...

All those "<br />" tags you have in between your table closing tags (like "</td><br /></tr>") are causing the breaks to be rendered at the top of the table since all content in a table should be within td or th tags.

Trig said...

Even without explicit line break tags you will still get a lot of space if you simply include carriage return breaks within the table. Close up everything from the opening <table> to the closing </table> onto a single line. Then the spaces should disappear.

Alanna Kellogg said...

Jack ~ I think I caught them all, definitely reduced the space, thanks.

Trig ~ Would you mind explaining that a bit more? I wrote - by rote - the table from a tutorial so am following these instructions some by rote too. Specifically, what ARE the carriage return breaks, and then, what do you mean by a single line? (I know, I know ...)

Anonymous said...

Aaah, tables. I remember those. Back before the web design community banished them as a tool of evil. I'm joking of course since, as I teach and evangelize web standards and CSS, my food blog is still laid out with tables.

Alanna's use of a table here is a perfectly valid use, so don't believe anyone that tells you there should be no tables in your web pages.

The newer, better way would include styling the table and its elements within a style sheet, which gives you a bit more control over them.

People with tons of time on their hands might attempt to make these rows and columns with floating divs.

Trig said...

One type of break is an explicit tag <br />, so your table text (very much simplified) looks, for example, like this:

<table><tr><br /><td>

By a line break or non-exlicit break I mean code that looks like this:

<table><tr>
<td>

Both of these will result in blank lines.