I've nested three tables inside a 'god' table...

I use CSS to position them but...

[nightva]

Hi all,

I have one 'god' table with a single row with three cells. Three tables are nested inside the 'god' table's three cells. This makes the block-level tables appear side by side in the browser.

The problem is that one nested table on the right side is very tall which naturally makes the cell it's in taller than the other two tables. The other two tables appear VERTICALLY CENTERED in their own cells and vertical-align:top; won't make these two tables move to the top of their cells.

I know if I use negative top margins on the nested tables, they can be moved up BUT I want the browser to determine where the top of the cell is automatically and just move the nested table there.

This way no matter what browser displays it, the top of the 'god' table's cell is the same.

Does this make sense?

PS I still want CSS to tell the browser to move the nested tables. I don't want to use the DEPRECIATED table cell attribute valign="top"...yeeeech!

Nathan

[Lance]

See if this helps:

<style> 
#God td 
{ 
VERTICAL-ALIGN: top; 
} 
</style> 
<table id="God" border="1"> 
 <tr> 
 <td> 
  <table> 
  <tr> 
   <td>Col 1</td> 
  </tr> 
  </table> 
 </td> 
 <td> 
  <table> 
  <tr> 
   <td>Col 2</td> 
  </tr> 
  </table> 
 </td> 
 <td> 
  <table> 
  <tr> 
   <td>Col 3</td> 
  </tr> 
  <tr> 
   <td>Col 3</td> 
  </tr> 
  <tr> 
   <td>Col 3</td> 
  </tr> 
  <tr> 
   <td>Col 3</td> 
  </tr> 
  </table> 
 </td> 
 </tr> 
</table> 

[encyclo]

I don't want to use the DEPRECIATED table cell attribute valign="top"...yeeeech!

But the use of tables for layout is supposedly depreciated too. ;) Once you decide to use them, it's often best to go for a transitional doctype and use the good old

valign="top"

anyway. However, Lance's markup should do the trick if you really want to go CSS-only on this particular point.

[createErrorMsg]

I have my doubts that Lance's proposed solution will help much either. 'Vertical-align' refers to alignment within an inline box and has no effect whatsoever on block level elements (unless they are within an inline block, which is technically - according to html specs - invalid markup). I suspect applying vertical-align: top; to the <td>s will have no effect, although I certainly hope, for nightva's sake, that I am wrong.

<added>My mistake. I'm a table-dolt and this just proves it. According to the specs vertical-align applies to inline boxes AND table-cells. Here's a quote for those who didn't know this (as I didn't)...

The 'vertical-align' property of each table cell determines its alignment within the row. Each cell's content has a baseline, a top, a middle, and a bottom, as does the row itself. In the context of tables, values for 'vertical-align' have the following meanings:

baseline
The baseline of the cell is put at the same height as the baseline of the first of the rows it spans (see below for the definition of baselines of cells and rows).
top
The top of the cell box is aligned with the top of the first row it spans.
bottom
The bottom of the cell box is aligned with the bottom of the last row it spans.
middle
The center of the cell is aligned with the center of the rows it spans.

...so that said, nightva, Lance's code looks like it should give you exactly what you need.</added>