scriptygoddess

28 Jan, 2004

Mysterious Space above tables

Posted by: Jennifer In: Lessons learned

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)

<table>
<tr>
<p>I don't belong here!</p>
<td>
ANYTHING YOU WANT
</td>
</tr>
</table>

8 Responses to "Mysterious Space above tables"

1 | umair

January 28th, 2004 at 3:11 pm

Avatar

yeah, i hate tables too, yet still find myself having to use them…
try using valign="top" as an attribute to the tags, that should get rid of the white space…

2 | umair

January 28th, 2004 at 3:12 pm

Avatar

oops, i meant to say <td&gt tags

3 | Jennifer

January 28th, 2004 at 3:26 pm

Avatar

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…

4 | Anna

January 28th, 2004 at 10:02 pm

Avatar

The biggest culprit in my tenure is the dreaded form tag nestled somewhere between the table and td tags.

5 | Chungh

January 29th, 2004 at 3:10 am

Avatar

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

6 | andy

January 29th, 2004 at 4:10 am

Avatar

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!

7 | Carey

February 5th, 2004 at 8:01 pm

Avatar

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>

8 | Carey

February 5th, 2004 at 8:04 pm

Avatar

Whoops. I meant between <table> and <tr>

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements