How do I set one cell in a table as the only one that expands if the table grows?

sheepfest
sheepfest used Ask the Experts™
on
I have a HTML problem in a page I am creating using tables.
I've set a table up as follows:

<TABLE>
<TR>
 <TD HEIGHT="25">BUTTON 1</TD>
  <TD ROWSPAN="4">MAIN AREA COLUMN 1</TD>
  <TD ROWSPAN="4">MAIN AREA COLUMN 2</TD>
</TR>
<TR>
 <TD HEIGHT="25">BUTTON 2</TD>
</TR>
<TR>
 <TD HEIGHT="25">BUTTON 3</TD>
</TR>
<TR>
 <TD><FORM ACTION="somewhere.asp" METHOD="post">
      <INPUT TYPE="...........
      ............(etc)
     </FORM>
 </TD>
</TR>
</TABLE>

The idea is to create a menu of buttons on the left, and a two column content area to the right.

The buttons are images of height 25 pixels that fit together to form a bigger image, so they must be totally together. This works fine until the main content area forces the table to stretch. I understand that HEIGHT only sets the minimum height for the <td>, but I need the button fields to stay at 25 pixels high. Currently, all button areas are stretching, causing gaps. The form area underneath the buttons can stretch as much as it needs.

Is it possible to do this? I have achieved this by joining the buttons up as one image and using an image map, but I'd rather keep them in a table if possible.

I'm using IE6 at present, and for now, would be happy with a solution that works even if just for IE...

Any help would be greatly appreciated.

Neil
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013

Commented:
You probably need a nested table.  Maybe something like this:
<TABLE>
<TR>
<td valign="top"><table><tr>
<TD HEIGHT="25">BUTTON 1</TD>
</tr><tr>
<TD HEIGHT="25">BUTTON 1</TD>
</tr><tr>
<TD HEIGHT="25">BUTTON 1</TD>
</tr><tr>
<TD HEIGHT="25">BUTTON 1</TD>
</tr><tr> <td> &nbsp;</td></tr>
</table>
<TD>MAIN AREA COLUMN 1</TD>
<TD>MAIN AREA COLUMN 2</TD>
</TR>
<TR>
<TR>
<TD><FORM ACTION="somewhere.asp" METHOD="post">
<INPUT TYPE="...........
............(etc)
</FORM>
</TD>
</TR>
</TABLE>



Cd&
try this

<TABLE border=0 cellpadding=0 cellspacing=0><TR>

<TD HEIGHT="75">
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>button1</td></tr>
<tr><td>button2</td></tr>
<tr><td>button3</td></tr>
</table>
</TD>

 <TD ROWSPAN="2">MAIN AREA COLUMN 1</TD>
 <TD ROWSPAN="2">MAIN AREA COLUMN 2</TD>
</TR>

<TR>
<TD><FORM ACTION="somewhere.asp" METHOD="post">
     INPUT TYPE="...........
     ............(etc)
    </FORM>
</TD>
</TR>
</TABLE>

Commented:
Nest your tables, BUT make sure to make the outermost one PERCENTAGES, and the ones inside that you DON'T want to change PIXELS. DO NOT mix percentage and pixel in the same table.

Something like this

<table width="100%">
<tr>
<td width="1%">
   <table width="150">
     <tr>
      <td width="50">something</td>
      <td width="50">something</td>
      <td width="50">something</td>
     </tr>
   </table>
</td>
<td width="98%">
   <table width="100%">
    <tr>
     <td>someting</td>  
    </tr>
    </table>
</td>
<td width="1%">
 <table width="150">
     <tr>
      <td width="50">something</td>
      <td width="50">something</td>
      <td width="50">something</td>
     </tr>
   </table>
</td>
</td>
</table>

This creates an outer table of 1 row, 3 cells, which fills the window. The first cell will fit the content only (it's set at 1%, but will expand to fit the table inside), the center cell will expand to fit the window (no width on the cell, and the inner table is set for 100% -- of the containing cell), and the third cell will also expand to fit the content, since it's set the same as the first one.

So you wind up with a column 150 px on the left and right, and expanding content in the center.

Works for everything.
         

Author

Commented:
Thanks all...
I guess the answer I was looking for included parts of all of your responses, but bansidhar's code almost slotted in and did exactly what I needed (with the addition of the VALIGN="TOP" to the first TD).

Thanks again.

Neil.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial