valign a table?

Why can't I do this?

[Nick_W]

Hi all,

I have to build a site with tables and get the 'in the centre of the screen effect'.

I thought by nesting the content table within an outer container table would work but it's failing miserably. Can anyone see what I'm doing wrong?

[pre]
    <table width="100%" height="100%">
      <tr>
        <td>
          <table width="750px" height="400px" align="center" 
            valign="middle" bgcolor="#818286" cellspacing="0" 
            cellpadding="0">
            <tr>
              <td colspan="2"><img src="top-banner.jpg" alt="" /></td>
            </tr>
            <tr>
              <td height="240px" width="400px"
                bgcolor="#FFFFFF">&nbsp;</td>
              <td height="240px" width="350px" >&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2"><img src="bottom-banner.jpg" alt="" /></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
[/pre]

Many thanks...

Nick

[caine]

Nick,

According to the HTML4.0 pocket reference valign is default middle. hence you don't need the tag.

[Nick_W]

Hmmm.... but it's not valigning....

Cheers...

Nick

[Iguana]

The table does not accept the height="100%"

If you turn the border on you will see the table only expands height accoring to its content

[Nick_W]

Right! Testing on Moz and Opera. It does accept it in IE though right?

Nick

[Iguana]

Try putting a

<div style="height:100%; background-color:red">

around the table and then <table valign="middle">

[ppg]

yes, IE does accept that.

I think the problem is that valign is an attribute for cells, not tables. Put it in your td tag and it should work
<td valign="middle">

[Iguana]

I'm in IE and the height=100% doesn't work there either

[ppg]

thats odd iguana - which version of IE?

[Iguana]

I've tested and

<div style="height:100%; background-color:red">

...your html above...

</div>

works fine in IE.

The table height=100% only works when the table is in another container - but the div height=100% works within the browser

[Iguana]

version 6.0, ppg

<edit>I'm talking rubbish again - the html above did work in IE</edit>

[4eyes]

hee hee

Nick_W using tables

There is a story behind that one I bet;)

[ppg]

Sorry Nick, I'm talking a certain amount of rubbish too - missed caine's post - the default for valign is indeed middle, so you don't need to add it to your TD tag.

FWIW, I just copy/pasted your code and the inner table was vertically aligned in the middle for me.

stumped.

[4eyes]

Nick

I just tested in Mozilla, Opera and IE - it seems to be vertically centred OK in all of them.

[Barry]

Hi Nick,

It could be that the <td> in which your 2 table is nested is defaulted align=left.

Try aligning it to the center:

<table width="100%" height="100%">
<tr>
<td align="center">
<table width="750px" height="400px" align="center" valign="middle" bgcolor="#818286" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><img src="top-banner.jpg" alt="" /></td>
</tr>
<tr>
<td height="240px" width="400px" bgcolor="#FFFFFF">&nbsp;</td>
<td height="240px" width="350px" >&nbsp;</td>
</tr>
<tr>
<td colspan="2"><img src="bottom-banner.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>

Blessings,
Barry

[tedster]

Don't you want to have the align="center" attribute in the <td> of the OUTER table? That would center the entire nested table, horizontally at least.

<added>Whoops - I just reread, and I see that's exactly what Barry was saying.</added>

[Nick_W]

hee hee

Nick_W using tables

You behave 4eyes! Sheesh, this is odd work, I've not done such a rigid design in ages... fixed pixel fonts, <shudder>tables</shudder>.. takes me back to my DW days ;)

Oh well, it's all experience and good to brush up on this kind of thing from time to time...

Thanks all, I think I've got it now ;)

Nick

[moonbiter]

Part of the problem might be that you are using unit lengths in your height and width attributes and this is incorrect [w3.org]. For example, it should be

height="200"

, not

height="200px"

.

You have been doing markup in CSS for too long. ;)

[edited by: moonbiter at 7:42 pm (utc) on Oct. 24, 2002]

[Nick_W]

True, true, I'll redo that and see what happens, thanks!

Nick

[fashezee]

try this:

<table cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%">
<div align="center">
<table border="0" cellspacing="0">
<tr>
<td width="91">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>