Mysterious Space above tables
At my job I need to do most of my web layouts using tables (not the latest fancy shmancy CSS) - yes, I know I’m a dying, hated breed - but blame it on our customers who refuse to download a newer browser, yet still, in some round-about fashion, pay my salary…
In any case, if you are designing a layout with a table, and for some reason have a huge chunk of space ABOVE the table, and can’t for the life of you figure out WHERE that space is coming from… go look at your HTML code VERY carefully. Specifically, make sure your code follows the format of:
<table>
<tr>
<td>
ANYTHING YOU WANT
</td>
</tr>
</table>
etc…
if you have any “text” or anything else other than TABLE related tags OUTSIDE of a TD, yet INSIDE your TABLE tags - you’ll get a mysterious space above your table.
Here’s an example of BAD code (that will cause space above a table)
January 28th, 2004 at 3:11 pm
yeah, i hate tables too, yet still find myself having to use them…
try using valign=”top” as an attribute to the
January 28th, 2004 at 3:12 pm
oops, i meant to say <td> tags
January 28th, 2004 at 3:26 pm
if you have text outside a td tag (but still within table tags) - NOTHING will get rid of that “mysterious space”…. I’m not talking about space INSIDE the table - this would be space ABOVE the beginning of where the table is supposed to go - it’s basically the browser having an error because of bad code…
January 28th, 2004 at 10:02 pm
The biggest culprit in my tenure is the dreaded form tag nestled somewhere between the table and td tags.
January 29th, 2004 at 3:10 am
Great Tip!
Funny enough I had my own mysterious space saga just the other day. Was using tables to hold some images together like below, and couldn’t for the life of me work out why there were spaces in between the images:
<table width=”300″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><img src=”image.gif” width=”150″ height=”33″></td>
<td><img src=”image.gif” width=”150″ height=”33″>
</td>
</tr>
<tr>
<td><img src=”image.gif” width=”150″ height=”33″></td>
<td><img src=”image.gif” width=”150″ height=”33″></td>
</tr>
</table>
If anyone falls for this trap, the trick is to keep all the <td></td> tags together, dont put them on a seperate line. like so
<table width=”300″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><img src=”image.gif” width=”150″ height=”33″></td>
<td><img src=”image” width=”150″ height=”33″></td>
</tr>
<tr>
<td><img src=”image.gif” width=”150″ height=”33″></td>
<td><img src=”image” width=”150″ height=”33″></td>
</tr>
</table>
cheers
January 29th, 2004 at 4:10 am
I ran into a very similar thing while posting tables in a blog message — turns out I had the “Convert Line Breaks” option turned on for Movable Type. Bad idea!
February 5th, 2004 at 8:01 pm
Hmm, it’s quite bizarre. I found the opposite to be true. I really don’t know why, but jamming the form tag between <table> and <tr> made the space disappear. I also only got the space on IE.</tr></table>
February 5th, 2004 at 8:04 pm
Whoops. I meant between <table> and <tr>