Table Heights

**avstu** · Sep 9, 2006 10:07

Just wondering if somebody could help me. Ive just designed a new layout and everything looks great except theres one thing i need to do. I want to make my layout so it fills the whole screen heightwise if you get me.

At the moment it fits flush at the top of the page but doesnt reach all the way down to the bottom of the page unless i have lots of content in the table.

Heres my coding (thanks in advcance)

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to DESIGNLAD.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" type="text/css" rel="stylesheet" />
<style type="text/css">
<!--
body {
background-image: url(images/bk.gif);
}
-->
</style></head>
<body>
<table width="750" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="175" colspan="3" valign="top"><table id="Table_01" width="750" height="175" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4"> <img src="images/01.gif" width="24" height="175" alt=""></td>
<td rowspan="4"> <img src="images/02.gif" width="168" height="175" alt=""></td>
<td colspan="3"> <img src="images/03.gif" width="532" height="51" alt=""></td>
<td rowspan="4"> <img src="images/05.gif" width="26" height="175" alt=""></td>
</tr>
<tr>
<td> <img src="images/07.gif" width="156" height="57" alt=""></td>
<td> <img src="images/08.gif" width="215" height="57" alt=""></td>
<td> <img src="images/09.gif" width="161" height="57" alt=""></td>
</tr>
<tr>
<td colspan="3"> <img src="images/10.gif" width="532" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3"> <table width="532" height="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" bgcolor="#F2F2F2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><div align="left"><img src="images/home.gif" width="15" height="14"></div></td>
<td width="50"><div align="left">Home</div></td>
<td width="20"><div align="left"><img src="images/about.gif" width="11" height="14"></div></td>
<td width="50"><div align="left">About</div></td>
<td width="20"><div align="left"><img src="images/tutorial.gif" width="15" height="14"></div></td>
<td width="60"><div align="left">Tutorials</div></td>
<td width="20"><div align="left"><img src="images/download.gif" width="15" height="14"></div></td>
<td width="67"><div align="left">Downloads</div></td>
<td width="20"><div align="left"><img src="images/shop.gif" width="15" height="14"></div></td>
<td width="72"><div align="left">Online Store </div></td>
<td width="20"><div align="left"><img src="images/link.gif" width="14" height="13"></div></td>
<td width="50"><div align="left">Links</div></td>
<td width="20"><div align="left"><img src="images/contact.gif" width="15" height="15"></div></td>
<td width="50"><div align="left">Contact</div></td>
</tr>
</table> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="22" height="203" background="images/04.gif">&nbsp;</td>
<td width="706" bgcolor="#F2F2F2"><p>Content here</p> </td>
<td width="22" height="203" background="images/06.gif">&nbsp;</td>
</tr>
<tr>
<td height="100%" background="images/04.gif">&nbsp;</td>
<td height="100%" bgcolor="#F2F2F2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center">
<? 
$lbt = microtime (); // start 
$lba = explode ( " " , $lbt); 
$lbt = $lba[ 0 ] + $lba[ 1 ]; 
$let = microtime (); // end 
$lea = explode ( " " , $let); 
$let = $lea[ 0 ] + $lea[ 1 ]; 
$total = $let - $lbt; //little bit of maths

echo "Page Generated in " .round ($total, 5 ) . "seconds" ; // add more place values by changing the 5 
?>
<br>
&copy; 2006 Designlad.com and all its content. All rights reserved.<br>
<br>
</div></td>
</tr>
</table></td>
<td height="100%" background="images/06.gif">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>

**bobber205** · Sep 9, 2006 10:29

Couple of pointers. Please wrap your code in the appropraite tags, like [HTML]. It makes it much easier to read.

Other than that, I don't quite understand why what's appearing isn't aqueqate. If you could post a link, that would be awesome!

**avstu** · Sep 9, 2006 10:38

ok then (apologise)

http://www.designlad.com/new/?designlad=links

see how the layout doesnt go to the bottom of the page? i want it to go to the bottom no matter how much content is in the tables.

**bobber205** · Sep 9, 2006 11:04

You could set the table to have a height property and fill in content, while hoping it doesn't go too far. Depends on your page design if this is viable or not.

**dbr** · Sep 16, 2006 19:19

Table Height Woes

For years and years, like many web designers, I've been making use of the height attribute within a table to get the layouts that I want, often I've used a system whereby the navigation will be a coloured vertical strip; an easy way to acheive this and maintain backward compatibilty with old borwsers was to use height=100% in a table like so:

<table height="100%">
<tr><td valign="top" bgcolor="#cccccc">Navigation</td>
<td valign="top">Content</td></tr>
</table>

Unfortantly, the HTML standard published by the World Wide Web Consortium (W3C) and now adopted by most browsers is that there isn't a height attribute for tables. The thinking seems to be, that tables should be used for presenting tabular information and not for layouts. Fair enough, but what can the real world use to get the layouts our clients want?

Hope that helps,

Dave

User Tag List

Thread: Table Heights

Thread Tools

Display

Table Heights

Bookmarks

Bookmarks

Posting Permissions