Lock table size

**scotty2260** · May 23, 2005 09:56

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:

PHP Code:


<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>

**BluDragon** · May 23, 2005 10:05

Simple. Don't use tables. They weren't meant for layout. Search here or

for table-less layouts.

**htmlguy** · May 23, 2005 13:54

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

**metho** · May 23, 2005 17:03

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:

Code:

<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>

**scotty2260** · May 24, 2005 09:03

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

**scotty2260** · May 24, 2005 09:30

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

PHP Code:


<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>

**metho** · May 25, 2005 07:43

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.

**scotty2260** · May 25, 2005 09:07

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.

**scotty2260** · May 25, 2005 14:31

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!

User Tag List

Thread: Lock table size

Thread Tools

Display

Lock table size

Bookmarks

Bookmarks

Posting Permissions