Fixing cell height and define a flexible one in a Table

Question

Hi guys! I have this problem on my website's layout, and it's basically preventing me from continue it, it's destroying everything.

here goes the HTLM code:

    <table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
     <td valign="top" colspan="2" height="110">
     <p align="center">Banner</td>
    </tr>
    <tr>
     <td valign="top" height="95">I want this cell to have a fixed height</td>
     <td valign="top" rowspan="3" width="305">
     <p align="center">Text goes here - if the text is too long, I want the 
     stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
     <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
     <td height="89" width="141" valign="top">Stretching/Flexible cell - I 
     want this one to vary in height if the text on the right cell is too 
     long</td>
    </tr>
</table>

As you can see, if I write a text that is larger than the "Text Cell" height, all the cells in the right column stretch, and I only want the last one to do so. Can you help me?

Thanks in advance

Answer 1

Make the height of the bottom-left cell "*" like this:

<table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="*" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

This won't let you define the minimum height of the cell, but it works. Best of course would be to use css.

Actually, as I think about this, you can set the height of your right column to "257" (the sum of your left heights, and that will mean that your * will default to 89 if the right column does not stretch.

I am sure this is not cross-browser compatible however... Yup, just dusted off IE6, and it doesn't behave as one would expect. Firefox works great, though.

This probably means that css would be your best bet.

Answer 2

If you try to make a website with tables, then welcome to 21sst century. Table layout is very outdated. Try a site like http://www.pmob.co.uk/temp/3colfixedtest_4.htm. There you find a web standard layout.

Answer 3

As noted above, although it is not really an answer to your question, the best way to do what you want to do is to learn how to create CSS layouts using <DIV> tags. This will give you much more control of your page layout, and although requires some learning up front, will save you tremendous amounts of headaches in the future using tables.

Actually, looking at your example again. a based layout here would be very simple.

<div id='container'>
   <div class='banner'>Banner</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>   
</div>

This will give you the same layout as your table with some CSS styling.

EDIT: One last word on the matter. For me personally, if I know that an area is going to be a grid type area with no special formatting needs for different areas a <table> is fine, otherwise I will always use a CSS based layout.

Answer 4

I would at least try to learn some CSS and use it to style and size your tables, instead of using HTML. There are many good tutorials out there, but for example:

table {
   width: 600px;
}

table td {
   padding: 5px;
}

will make your table 600px wide and give every <td> 5px of padding. Assign any cells or rows ids (unique) and classes (apply to a group) for more precise control.

Answer 5

Thanks for the responses guys. I tried for the last few hours to built this with divs, but i'm going nowhere. I have lots of rowspans ans colspans, and I can't put them in CSS. Actually the design is WAY more complicated that the simple table I posted here:

<table cellpadding="0" cellspacing="0" width="750" height="871">
     <!-- MSTableType="layout" -->
     <tr>
      <td valign="top">
      <p style="margin-top: 0; margin-bottom: 0">Banner</td>
      <td valign="top" rowspan="3">
      <p style="margin-top: 0; margin-bottom: 0">Banner</td>
      <td valign="top" rowspan="3" colspan="2">
      <p style="margin-top: 0; margin-bottom: 0">Banner</td>
      <td height="154"></td>
      </tr>
     <tr>
      <td valign="top">Banner</td>
      <td height="24"></td>
      </tr>
     <tr>
      <td valign="top" rowspan="3">Fixed Menu Cell</td>
      <td height="122"></td>
      </tr>
     <tr>
      <td valign="top" colspan="3">
      Banner</td>
      <td height="29"></td>
      </tr>
     <tr>
      <td valign="top" rowspan="6" colspan="2"><p>&nbsp;</p>
      <p>CONTAINER AREA, Text goes Here</p>
         </td>
      <td valign="top" rowspan="6">
      &nbsp;</td>
      <td height="102"></td>
      </tr>
     <tr>
      <td valign="top">
      Fixed Menu Cell</td>
      <td height="37"></td>
     </tr>
     <tr>
      <td valign="top">
      Fixed Menu Cell</td>
        <td height="44"></td>
     </tr>
     <tr>
      <td valign="top">
      Fixed Menu Cell</td>
        <td height="178"></td>
     </tr>
     <tr>
      <td valign="top">
      Fixed Menu Cell</td>
        <td height="109"></td>
     </tr>
     <tr>
      <td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the 
      Container Area</td>
        <td height="33"></td>
     </tr>
     <tr>
      <td valign="top" colspan="4">
      <p align="center">Bottom</td>
        <td height="38"></td>
     </tr>
     <tr>
      <td width="252"></td>
      <td width="410"></td>
      <td width="56"></td>
      <td width="30"></td>
      <td height="1" width="2"></td>
     </tr>
    </table>

I'm trying to convert this mess to DIV, but I don't think I'm going to make it ^^'' It seems such a simple problem, but I can't see a simple soluction...