Aligning tables inside tables by height

[reen.blom]

I am stuck. I have a layout witha table 3 columns. Each column has a table inside of it, with different colour background. I do not seem to be able to make my inlaid tables stretch to the very bottom of the main table. They are formatted according to their content and that makes them all different length.

I have read that it is not appropriate to use "height" tags to put in a fixed number, and 100% does not work. Is there a way for me to align the height?

Hope it is not too confusing.

Thank you

[MidiMagic]

Use CSS.

The height tag is deprecated (due to be discontinued), but the CSS height attribute is not. height: 100%; works in most cases. It does not work in two cases:

- Where you are trying to make the item expand to just fill the browser window (which is always impossible if the page is to work on all computers).

- Where there is no box object to take a height attribute.

In your case, there IS a containing box object (the td tag of the outer table), so a 100% height attribute in a CSS class used in the table tag should work. Unfortunately, not only does it not work, but IE and FF do it different ways.

I have another suggestion: Use a single table.

You can use the colspan and rowspan attributes of the td tag to make stuff line up, like this:

<style type="text/css">
.wfl {width: 100%;}
.pink {background-color: #ffaaaa;}
.blue {background-color: #aaccff;}
.puce {background-color: #eeaaf8;}
.gray {background-color: #cccccc;}
</style>

....

<table class="wfl gray">
  <tr>
    <td colspan="3">Bigtitle 1</td>
    <td colspan="3">Bigtitle 2</td>
    <td colspan="3">Bigtitle 3</td>
  </tr>
  <tr>
    <td class="blue">Big 1 little A</td>
    <td class="blue">Big 1 little B</td>
    <td class="blue">Big 1 little C</td>
    <td class="puce">Big 2 little A</td>
    <td class="puce">Big 2 little B</td>
    <td class="puce">Big 2 little C</td>
    <td rowspan="3" class="pink">Big 3 little A</td>
    <td rowspan="3" class="pink">Big 3 little B</td>
    <td rowspan="3" class="pink">Big 3 little C</td>
  </tr>
  <tr>
    <td rowspan="2" class="blue">Big 1 little D</td>
    <td rowspan="2" class="blue">Big 1 little E</td>
    <td rowspan="2" class="blue">Big 1 little F</td>
    <td class="puce">Big 2 little A</td>
    <td class="puce">Big 2 little B</td>
    <td class="puce">Big 2 little C</td>
  </tr>
  <tr>
    <td class="puce">Big 2 little G</td>
    <td class="puce">Big 2 little H</td>
    <td class="puce">Big 2 little I</td>
  </tr>
</table>

If you really want to get fancy, you can use different border styles to control the outlines of parts of the tables. The table on this page is made using rowspan.

http://geocities.com/[e-mail]/leadlag.htm

[reen.blom]

Thank you midimagic!

I will remember not to mess with the height ever again! Next time I will not to to tie my alignment to the table height!

I have solved the problem by setting a background image to a <td> column containing my table! Took me week to figure that out!!!

I think I should learn how to do without tables!