html alignment problem - updated

problem getting the html tables to align correctly

[zRonin]

The problem:
I have a problem with HTML alignment. If you cannot understand me, or it is not clear, please tell me and I will try to improve my description.

What I want:
I have one main table that takes up 80% of the screen and is located in the center of the page. That table has 4 rows and 4 columns. The first row has two columns that each span two columns, and they are split 50/50. The next row has three columns (think of it as a middle and two sides). Each side has a width of 10 pixels (fixed) and a rowspan of 2. The center has a width of 100%, because I want it to take up the entire rest of the page and the page should expand to fit the users browser/whatever is in the content. The third row has only one table that has a span of two columns (think of this as the center, and the two sides for the row above as the sides for this as well). The last row is split down the center just like the first row.

Here is a char image for you:

________________________________________________________
¦---------------------------¦--------------------------¦
¦--<img>-----50%--------X---¦---Y-------50%-----<img>--¦
¦---------------------------¦--------------------------¦
¦______________________________________________________¦
¦A¦-------------------------Z------------------------¦B¦
¦-¦__________________________________________________¦-¦
¦-¦-------------------------C------------------------¦-¦
¦-¦--------------------------------------------------¦-¦
¦-¦-<=10px------------------------------------10px=>-¦-¦
¦-¦----------------------content---------------------¦-¦
¦-¦--------------------------------------------------¦-¦
¦-¦--------------------------------------------------¦-¦
________________________________________________________
¦---------------------------¦--------------------------¦
¦--<img>----------------D---¦---E---------------<img>--¦
¦---------------------------¦--------------------------¦
¦______________________________________________________¦

What happens:
Instead of having the second and third rows have two side columns of ten pixels each and a center column filling the rest of the table, it is distorted.

In firefox, the left column works fine, so does the center, except for some reason the right side expands to be the size of an image that is in the right cell of the top row.

________________________________________________________
¦---------------------------¦--------------------------¦
¦--<img>-----50%--------X---¦---Y-------50%-----<img>--¦
¦---------------------------¦--------------------------¦
¦______________________________________________________¦
¦A¦---------------------Z-----------------¦B-----------¦
¦-¦_______________________________________¦------------¦
¦-¦---------------------C-----------------¦------------¦
¦-¦---------------------------------------¦----~30%----¦
¦-¦-<=10px--------------------------------¦------------¦
¦-¦-----------------content---------------¦------------¦
¦-¦---------------------------------------¦------------¦
¦-¦---------------------------------------¦------------¦
________________________________________________________
¦---------------------------¦--------------------------¦
¦--<img>----------------D---¦---E---------------<img>--¦
¦---------------------------¦--------------------------¦
¦______________________________________________________¦

In internet explorer, both the left and the right sides of the second and third rows are expanded to be about 30% of the page, and I cannot stop it.

________________________________________________________
¦---------------------------¦--------------------------¦
¦--<img>-----50%--------X---¦---Y-------50%-----<img>--¦
¦---------------------------¦--------------------------¦
¦______________________________________________________¦
¦A-----------¦--------------Z-------------¦B-----------¦
¦------------¦____________________________¦------------¦
¦------------¦--------------C-------------¦------------¦
¦----~30%----¦----------------------------¦----~30%----¦
¦------------¦----------------------------¦------------¦
¦------------¦-----------content----------¦------------¦
¦------------¦----------------------------¦------------¦
¦------------¦----------------------------¦------------¦
________________________________________________________
¦---------------------------¦--------------------------¦
¦--<img>----------------D---¦---E---------------<img>--¦
¦---------------------------¦--------------------------¦
¦______________________________________________________¦

Why do i need to user percentages:
Because it must expand to fit the content or the browser window.

Why do i need to use the two side colums:
Because I have a design that calls for them to be there, and I cannot make them the background of the center table because they will stretch when the entire table stretches.

Below is the html:

<table width="80%" border="0" cellpadding="0" cellspacing="0">
 <tbody>
 <tr>
 <td colspan="2" background="top_bg.gif"><img src="top_left.gif" width="230" height="70"></td>
 <td colspan="2" background="top_bg.gif"><div align="right"><img src="top_right.gif" width="340" height="70"></div></td>
 </tr>
 <tr>
 <td width="10" rowspan="2" background="mid_left.gif"></td>
 <td width="100%" colspan="2" height="22" background="mid_bg.gif"></td>
<td width="10" rowspan="2" background="mid_right.gif"></td>
 </tr>
 <tr>
 <td colspan="2" width="100%">testtesttesttesttesttesttesttesttesttesttesttest<br>
 testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttest<br>
</td>
 </tr>
 <tr>
 <td colspan="2" background="bot_bg.gif"><img src="bot_left.gif" width="30" height="41"></td>
 <td colspan="2" background="bot_bg.gif"><div align="right"><img src="bot_right.gif" width="30" height="41"></div></td>
 </tr>
 </tbody>
</table>

[edited by: tedster at 3:51 pm (utc) on June 8, 2005]

[rocknbil]

Put this as your first row:

<tr>
<td width="10"><img src="transparent1x1px_spacer.gif" width="10" height="1" alt=""></td>
<td width="50%"><img src="transparent1x1px_spacer.gif" width="1" height="1" alt=""></td>
<td width="50%"><img src="transparent1x1px_spacer.gif" width="1" height="1" alt=""></td>
<td width="10"><img src="transparent1x1px_spacer.gif" width="10" height="1" alt=""></td>
</tr>

Although logically your columns add up to 4, they overlap. Set the border=1 to see the effect. This does some weird stuff unless you "lock it" with the first row, using spacers as necessary.

The 50% value may or may not work, you might have to use a fixed width on the spacer (like 300px wide for cols 2 and 3) to get the center two to divide correctly.

Using a spacer instead of &nbsp; limits the cell height to 1 px. Using &nbsp; would make the height of row 1 the height of whatever the page text is, but you can bet it will be more than 1px.

Also putting a &nbsp; or spacer in these
<td width="10" rowspan="2" background="mid_left.gif"> &nbsp; </td>

will allow you to see more of what's happening when you turn the borders on. The same effect applies; if the &nbsp; is wider than 10px you'll wish you'd used a spacer:

<td width="10" rowspan="2" background="mid_left.gif">img src="transparent1x1px_spacer.gif" width="1" height="1" alt=""></td>

And yes, I know spacers and tables are deprecated, but sometimes you must do what you must do. :-)

[zRonin]

Ok, it works perfectly in firefox, but still fails in internet explorer. I have turned on boarders, and they are still the same as the ones I showed you earlier (the side tables are taking up about 30% each).

The 50% value may or may not work, you might have to use a fixed width on the spacer (like 300px wide for cols 2 and 3) to get the center two to divide correctly.

I think I might have to do this, but I really need to use percentages. I guess I could set the pixel value while PHP is running, but it would be great if there was a way around this.

Thanks for your fast reply.

[tedster]

I think that the colspans on the first row are going to make it hard to get constent cross-browser rendering. Browser internal code has a bit of latitude in how it will assign size here. As many people often comment on these forums, the table element was not originally conceived as a layout tool, so using tables that way has been a kludge - a very useful kludge I would add - for many years.

Have you considered making the top row into an independent table? That would free up the browser's rendering engine from one constraint when it lays out the second row - you may get better results.

[zRonin]

Have you considered making the top row into an independent table? That would free up the browser's rendering engine from one constraint when it lays out the second row - you may get better results.

Perfect.

- works with percentages
- works with IE and firefox and mozilla

Thanks to rocknbil for getting it to work with firefox and getting me basically 75% there. Thanks to tedster for picking up the pieces with IE and percentages.

Heres what I did:

<center>
<table width="60%" border="0" cellpadding="0" cellspacing="0">
 <tbody>
 <tr>
<td width="10"><img src="spacer.gif" width="10" height="1" alt=""></td>
<td width="50%"><img src="spacer.gif" width="50%" height="1" alt=""></td>
<td width="50%"><img src="spacer.gif" width="50%" height="1" alt=""></td>
<td width="10"><img src="spacer.gif" width="10" height="1" alt=""></td>
 </tr>
 <td colspan="4">
 <table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="50%" background="top_bg.gif"><img src="top_left.gif" width="230" height="70"></td>
 <td width="50%" background="top_bg.gif"><div align="right"><img src="top_right.gif" width="340" height="70"></div></td>
 </tr>
 </table>
 </td>
 <tr>
 <td rowspan="2" background="mid_left.gif"></td>
 <td colspan="2" height="22" background="mid_bg.gif"></td>
<td rowspan="2" background="mid_right.gif"></td>
 </tr>
 <tr>
  <td colspan="2" width="100%">content</td>
 </tr>
 <tr>
 <td colspan="4">
 <table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td width="50%" background="bot_bg.gif"><img src="bot_left.gif" width="30" height="41"></td>
 <td width="50%" background="bot_bg.gif"><div align="right"><img src="bot_right.gif" width="30" height="41"></div></td>
 </tr></table></td>
 </tr>
 </tbody>
</table>
</center>

[rocknbil]

Use table align="center" at least. :-)The center tag has been long depricated.