HTML Help

John B · Joined: 31 Jul 2009 Posts: 4

I need to have two tables arranged vertically, one above the other, with no vertical space between them. No problem with all Mac browsers and all Windows browsers except IE. In IE the two tables are side by side, with the second table to the right of the first.

<table width="900" border="0" align="left" cellpadding="0" cellspacing="0">
... table stuff ...
</table>
<table width="900" border="0" align="left" cellpadding="0" cellspacing="0">
... table stuff ...
</table>

What do I have to do to get these two tables arranged vertically with no space between them?

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Tables are always problems. Take a read of the following.

Images, Tables, and Mysterious Gaps

IE always gets it wrong because it calculates dimensions incorrectly. See the box model hack.

To get both of those tables vertically, try:

Code: <div style="width: 900px; margin: 0 auto;">
Tables here and
here
</div>

John B · Joined: 31 Jul 2009 Posts: 4

PayneLess Designs wrote: To get both of those tables vertically, try:

Code: <div style="width: 900px; margin: 0 auto;">
Tables here and
here
</div>
Nope, didn't work.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

You have to float one table left and one right plus make sure the tables combined are not greater than the width of the div container.

Working in the "dark" here with no link to problem page.

John B · Joined: 31 Jul 2009 Posts: 4

PayneLess Designs wrote: You have to float one table left and one right plus make sure the tables combined are not greater than the width of the div container.

Working in the "dark" here with no link to problem page.
Not sure what you mean about floating tables left and right. They need to be arranged vertically.

http://www.americananaerobic.com/

There are three tables stacked vertically. Looks right in everything but Win IE, although I just tried it in IE 8 and it looks good there too. But apparently some users with older versions see the side-by-side tables. It doesn't seem to be version-specific though, as some with the same version see the problem and some don't.

FWIW, this is my wife's job. She's a graphic designer and doesn't know HTML. Unfortunately, I don't know much more than she does. I know tables are probably not the best way to do this page, but don't really know a better alternative. And I'm not a Windows user, so don't know all the various tricks for the various IE versions.

sticks464 · Joined: 31 Dec 2006 Posts: 2631

You nees a container to contain the tables and keep them stacked.
Code: <div id="container">
<table cellspacing="0">
blah...blah
</table>
<table cellspacing="0">
blah...blah
</table>
<table cellspacing="0">
blah...blah
</table>
</div>

Style the div and have the tables clear each other with css
Code: #container {
width:900px;
margin:0 auto;/*to center content on screen*/
}
table {
width:900px;
border:0;
clear:both;
}