cell height problem

An issue setting definate height in <th>

[matttt]

Table:

<table id='outter'>
 <tr>
 <th><img id='logo'></th>
 <th><h1>Login</h1></th>
 <th width='150px>&nbsp;</th>
 </tr>
 <tr>
 <td class='tips'>*content*</td>
 <td class='content'>*content*</td>
 <td class='rightnav'>*content*</td>
 </tr>
</table>

CSS:

table#outter{
 width:780px;
 height:580px;
 border:0;
 margin:0 0 0 0;
 position:absolute;
 top:10px;
 left:10px;
 }
table#outter th{
 border:0;
 margin:0 0 0 0;
 }
img#logo{
 width:130px;
 margin: 10px;
 }
td#content{
 width:500px;
 background-color: white;
 color: inherit;
 border: 1px solid black;
 padding: 10px 10px 50px 10px;
 vertical-align:top;
 }

Okay, there's the info, now the problem. When the browser displays this it wants to stretch both the header and the content to acheive the total table height. How do i convince it to leave the header as small as possible and only expand the content row's height to acheive the total table height? Explicitly defining the height of any or all TH's, or the TR that contains the TH does nothing. This is the case when defined in the html or the css.

I am new to the whole CSS thing, so i don't really understand much more than the basics. If you see other problems with my style or code, let me know AFTER my major malfunction is ironed out, please.

[abulafia]

Somewhat puzzled why you're using a table structure for information that isn't meant to be structured as a table?

But aside from the argument that you could just use divs to lay this out, the main thing is that unless the image and Login h1 are really meant to be headers for a table, you can just set these cells as td instead of th.

table#outter{
width:780px;
height:580px;
border:0;
margin:0;
position:absolute;
top:10px;
left:10px;
}
table#outter tr#loginrow {
height: 130px; background-color: #999; }
table#outter tr#contentrow {
height: inherit; }

img#logo{
width:130px;
margin: 10px;
}
td.content{
width:500px;
background-color: white;
color: inherit;
border: 1px solid black;
padding: 10px 10px 50px 10px;
vertical-align:top;
}
h1 { padding: 0; margin: 0; }

<table id='outter'>
<tr id="loginrow">
<td id="logocell"><img id='logo' src="/i.gif" width="130" height="130" /></td>
<td><h1>Login</h1></td>
<td width='150px'>&nbsp;</td>
</tr>
<tr id="contentrow">
<td class='tips'>*content tips*</td>
<td class='content'>*content*</td>
<td class='rightnav'>*content rightnav*</td>
</tr>
</table>