Lock table size

Is there any way to lock a table’s size? I am making the template for my site, and there is white space between two images (top and bottom).
The white space (a cell) will expand and condense with the browser window, instead of staying the correct size.

Here you can see what I mean: http://www.southhillsfootball.com/shfootball/new.php

Here is the code I am using:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#003300">
<div align="center">
  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="98" colspan="3"><div align="center"><img src="style/header.jpg" width="876" height="96"></div></td>
    </tr>
    <tr>
      <td width="60" height="437" align="center">&nbsp;</td>
      <td width="876" align="left" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="52">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3"><div align="center"><img src="style/bottom.jpg" width="876" height="206"></div></td>
    </tr>
  </table>
</div>
</body>
</html>

Simple. Don’t use tables. They weren’t meant for layout. Search here or :google: for table-less layouts.

Use a CSS style for your table’s size. It will keep it locked no matter what. You should be doing complete css for your layout but if it is on a deadline I wouldn’t. Hope this helps!
HTMLGuy

Scotty, the transition to coding in full CSS layout takes time. No one should enforce an overnight transition on you. Take your time to get to know all the painful CSS idiosyncrasities that makes life hell for CSS newbies. There’s an excellent css resource in the Sitepoint CSS forms which covers 100% height and width elements (http://www.sitepoint.com/forums/showthread.php?t=171943).

In the meantime, here a solution with some css and html corrections which gets your template working in IE, FF and NN:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#tblBody {
	height: 100%;
}
#tdFtr {
	height: 206px;
}
#tdHdr {
	height: 98px;
}
-->
</style>
</head>
<body bgcolor="#003300">
<div align="center">
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tblBody">
    <tr valign="bottom">
      <td id="tdHdr" colspan="3"><div align="center"><img src="style/header.jpg" width="876" height="96"></div></td>
    </tr>
    <tr>
      <td align="center">&nbsp;</td>
      <td width="876" align="left" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" id="tdFtr"><div align="center"><img src="style/bottom.jpg" width="876" height="206"></div></td>
    </tr>
  </table>
</div>
</body>
</html>

Ok, I used the code givin, but the box still move with the browser.

Here is the link again: http://www.southhillsfootball.com/shfootball/new.php

Here is my current code (php tags are the only code blocks that display for me)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#tblBody {
	height: 100%;
}
#tdFtr {
	height: 206px;
}
#tdHdr {
	height: 98px;
}
-->
</style>
</head>

<body bgcolor="#003300">
<div align="center">
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tblBody">
    <tr valign="bottom">
      <td id="tdHdr" colspan="3"><div align="center"><img src=style/header.jpg width=876 height=96></div>
      </td>
    </tr>
    <tr>
      <td width="58">&nbsp;</td>
      <td width="853"bgcolor="#FFFFFF"></td>
      <td width="58">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" id="tdFtr"><div align="center"><img src=style/bottom.jpg width=876 height=206></div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

The given code will work better. Usually when you lock a content cell to a certain height, the table breaks when a user bumps up the font size or a user with large default font sizes loads the page.

Is there a simple CSS code to get this working?
All I need is for the space in between the two images to be able to stretch (up and down) to fit content. Whether by table or CSS.

Again, I can’t see the code you gave??? I cn only see things in the PHP blocks.

Ok, I used the tables and put clear images to make sure they are sized correctly. All is fine now, thanks for your input and help!