# HTML Question or How My damn table's cells won't line up without gaps

**URL:** https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676
**Category:** Factual Questions
**Created:** [December 2, 2004, 9:25am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676 "2004-12-02T09:25:00Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)
#### Post date: [December 2, 2004, 9:25am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/1 "2004-12-02T09:25:00Z")

</div>

On my website, I’m using a table that has 4 cells. 1 that spans across the lower three. Anyways, there’s a gap between the top table and the bottom ones. Here’s the url (there’s no actual images, but that shouldn’t matter as the gap is still there):

[http://www.advancegb.com/upload/sdtest.htm](http://www.advancegb.com/upload/sdtest.htm)

You can see the gap if you highlight the top left image and the one right below it. The idea being, in the finale website, that those two images will lineup to create one seamless image. Oh, and as you’ll see, I turned borders off and am also using the Valign command, yet they haven’t solved the problem.

Any ideas?

---

<div class="post-metadata">

### Author: ![Caught\_Work](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@Caught\_Work](https://boards.straightdope.com/u/Caught_Work)
#### Post date: [December 2, 2004, 9:31am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/2 "2004-12-02T09:31:07Z")

</div>

Your \</td\> is on the next line.

```auto

<TD ALIGN="left" VALIGN="TOP" COLSPAN="3"><img src="">

</TD>

```

HTML reads that as being a SPACE before the \</td\>

Put the \</td\> on the same line as the \<td\> and the problem will go away.

---

<div class="post-metadata">

### Author: ![Caught\_Work](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@Caught\_Work](https://boards.straightdope.com/u/Caught_Work)
#### Post date: [December 2, 2004, 9:32am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/3 "2004-12-02T09:32:09Z")

</div>

```auto

<TD ALIGN="left" VALIGN="TOP" COLSPAN="3"><img src=""></TD>

```

That’s what I mean.  
The problem will go away.

---

<div class="post-metadata">

### Author: ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)
#### Post date: [December 2, 2004, 9:42am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/4 "2004-12-02T09:42:45Z")

</div>

That worked great for that test page, but when I tried to apply it to my actual site (which is a bit more complex) it didn’t work. Here, I’ll just link directly to my site:

[www.gamexplain.com](http://www.gamexplain.com)

The problem is in the same spot.

Thanks though, as I did not know a gap such as that will cause a space, and it should have solved the problem on my actual page. I have no idea why it didn’t.

---

<div class="post-metadata">

### Author: ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)
#### Post date: [December 2, 2004, 9:51am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/5 "2004-12-02T09:51:07Z")

</div>

Note to the mods: I just realized that my above post could be mistaken for me whoring my website. I can assure you it’s not, the site isn’t even functional and you guys aren’t even my target demographic 😛

---

<div class="post-metadata">

### Author: ![Caught\_Work](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@Caught\_Work](https://boards.straightdope.com/u/Caught_Work)
#### Post date: [December 2, 2004, 10:19am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/6 "2004-12-02T10:19:28Z")

</div>

Same type of problem on this line.

```php
<map id="headline" name="headline">

```

By setting the line down you introduce an explicit space at the end of the image which causes the additional line.

Even though HTML is not terribly whitespace aware, tags that break over lines will have an apparent space at the end.

Try this HTML:

```php
<table border="0" cellspacing="0" cellpadding="0" width="900">
 <tr>
  <td align="left" valign="TOP" colspan="3"><img src="http://www.gamexplain.com/images-main/headline.jpg" usemap="#headline" alt style="border-style:none" / width="745" height="63"><map id="headline" name="headline">
   <area shape="rect" #archived videos coords="452,29,522,53" href="http://www.gamexplain.com/archive.htm" title="Archived Videos" />
   <area shape="rect" #frequently asked questions coords="540,30,620,53" href="http://www.gamexplain.com/questions.htm" title="Frequently Asked Questions" />
   <area shape="rect" #contact coords="636,28,706,52" href="http://www.gamexplain.com/contact.htm" title="Contact" />
   <area shape="rect" #why use game xplain? coords="347,29,436,55" href="http://www.gamexplain.com/whyxplain.htm" title="Why Use Game Xplain?" />
   <area shape="rect" #main page coords="64,23,337,54" href="http://www.gamexplain.com/" title="Main Page" />
   <area shape="default" nohref="nohref" alt /></map></td>
 </tr>
 <tr>
  <td align="left" valign="TOP" width="55"><img src="http://www.gamexplain.com/images-main/sideline.jpg" width="55" height="694"></td>
  <td align="center" valign="TOP" width="619"><br><img src="http://www.gamexplain.com/images-topstory/halo2.jpg" width="544" height="144"><br><br><br><img src="http://www.gamexplain.com/images-main/sample.jpg" width="514" height="278"></td>
  <td valign="TOP" align="center" width="226">
   <IFRAME ALIGN="left VALIGN="TOP" HEIGHT="600" WIDTH="250" SRC="http://www.gamexplain.com/sidebar.htm" FRAMEBORDER="0"></IFRAME></td>
 </tr>
</table>

```

---

<div class="post-metadata">

### Author: ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)
#### Post date: [December 2, 2004, 5:57pm UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/7 "2004-12-02T17:57:24Z")

</div>

Well, I replaced the code with what you provided, but the gap is still there. I even tried deleting the white space in front of the cell commands to see if that made a difference, but it didn’t.

Thanks for the help, odds are I messed the code up somewhere. 😉

---

<div class="post-metadata">

### Author: ![Punoqllads](https://avatars.discourse-cdn.com/v4/letter/p/d2c977/32.png) [@Punoqllads](https://boards.straightdope.com/u/Punoqllads)
#### Post date: [December 2, 2004, 8:40pm UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/8 "2004-12-02T20:40:48Z")

</div>

You’re specifying that the top image is to have a height of 63 pixels, but the picture is only 62 pixels high, so the browser is attempting to resize the image.

---

<div class="post-metadata">

### Author: ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)
#### Post date: [December 2, 2004, 11:00pm UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/9 "2004-12-02T23:00:00Z")

</div>

Thanks, I didn’t catch that. Sadly, it still hasn’t solved my problem ☹

---

<div class="post-metadata">

### Author: ![Caught\_Work](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@Caught\_Work](https://boards.straightdope.com/u/Caught_Work)
#### Post date: [December 3, 2004, 6:50am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/10 "2004-12-03T06:50:40Z")

</div>

Actually what you have (after a few hours of experimentation) is a problem with Internet Explorer.

If you view your website through Opera or Netscape 7.1, that additional space between the two tables is not there.

It seems to be related specifically to the map tag. When I remove all the map attributes the problem goes away in IE.

If this really bothers you, you will probably need to seek an alternative to using maps.

Given your hyperlink areas are discrete, maybe you should consider making each one an image in its own right and using the image as a hyperlink rather than setting map coords.

Sorry I can’t help more, but this look like the browser issue rather than your HTML.

---

<div class="post-metadata">

### Author: ![Duderdude2](https://avatars.discourse-cdn.com/v4/letter/d/cdc98d/32.png) [@Duderdude2](https://boards.straightdope.com/u/Duderdude2)
#### Post date: [December 3, 2004, 6:55am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/11 "2004-12-03T06:55:41Z")

</div>

> [@Caught@Work](#):
>
> Actually what you have (after a few hours of experimentation) is a problem with Internet Explorer.
> 
> If you view your website through Opera or Netscape 7.1, that additional space between the two tables is not there.
> 
> It seems to be related specifically to the map tag. When I remove all the map attributes the problem goes away in IE.
> 
> If this really bothers you, you will probably need to seek an alternative to using maps.
> 
> Given your hyperlink areas are discrete, maybe you should consider making each one an image in its own right and using the image as a hyperlink rather than setting map coords.
> 
> Sorry I can’t help more, but this look like the browser issue rather than your HTML.

Wow, you really didn’t have to invest so much time into it, though I really appreciate it. Very interesting that the map is causing the problem in Internet Explorer and not other browsers.

Anyways, I’m thinking I might just learn, and subsequently use CSS as I’ve heard it’s better suited to what I’m doing than tables are.

Again, thanks so much for the help.

---

<div class="post-metadata">

### Author: ![Joools](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@Joools](https://boards.straightdope.com/u/Joools)
#### Post date: [December 3, 2004, 7:02am UTC](https://boards.straightdope.com/t/html-question-or-how-my-damn-tables-cells-wont-line-up-without-gaps/277676/12 "2004-12-03T07:02:06Z")

</div>

Instead of getting rid of the maps, you could just move them. They don’t need to be physically near the image they describe in order to work. Simply take everything between the \<map\> and \</map\> tags and place those in another part of your document (preferably closer to the top of the document.)