Expanding HTML Table

cmayo · Oct 9, 2005

I can't believe this is stumping me but it is...

I'm trying to create a table that looks a bit like this:

Code:

+++++++++++++++++++++++++++++++++++++++++++
+  Cell 1          +      + Cell 2        +
+  Determines      +      + Grow/         +
+  Table           +      + Srink         +
+  height          +      +               +
+                  +      +++++++++++++++++
+                  + H    + V spc         +
+                  + Spc  + Expand        +
+                  +      +++++++++++++++++
+                  +      + Cell 3        +
+                  +      + Grow/         +
+                  +      + Shrink        +
+++++++++++++++++++++++++++++++++++++++++++

What I'm trying to do is justify Cell 2 to the top of column 3 and Cell 3 to the bottom, no matter how tall the table gets. Cells 2 & 3 must stay at their original heights, with the spacer cell between ("V Spc") them growing and shrinking as required.

As you can see in the code below, I've tried to tell the "V Spc" cell to take up all the vertical space it can by setting its height to 100%, which should squeeze Cells 2 & 3 to the vertical extents of the table, but it doesn't seem to be working and I can't figure out why not.

Can anyone help?

Code:

<table border>
	<tr>
		<td valign="top" rowspan=3 width=200>Item 1 - determines table height<br><img src="spacer.gif" width=1 height=300></td>
		<td rowspan=3 width=30>H Spc</td>
		<td valign="top" width=100>Item 2 - Grow/shrink</td>
	</tr>

	<tr>
		<td height="100%">V Spc - Expand</td>
	</tr>

	<tr>
		<td valign="bottom">Item 3 - Grow/shrink</td>

	</tr>
</table>

Vragabond · Oct 9, 2005

How about using a div with padding on the main box and two absolutely positioned divs for the boxes? I don't see your table as a tabular data.

cmayo · Oct 9, 2005

Vragabond, yeah, I know. I should have made the move to CSS layouts years ago, but using tables for layouts is so easy and tables are usually so springy. I just can't figure out why this one isn't working the way I think it should.

This seems like a pretty challenging layout for CSS, since the length of the content in "cells" 1,2 & 3 is rather dynamic. Lining up the tops of 1 & 2, no problem, but how would I line up the bottoms of 1 & 3, especially when the heights of 1 & 3 would be changing as the content in those divs changed? I guess I could use Javascript to measure the divs and calculate relative x,y coordinates I could use for absolute positioning, but the table layout seems a whole lot easier. If it worked, that is...

Vragabond · Oct 9, 2005

I don't know what you call difficult, this looks pretty simple to me. I think this encompasses all that you wanted, is easy and clean. The only problem... The two boxes on the right could overlap if both have enough content. I don't know if that is an issue. Anyway, it is easy and works:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
  <head>
    <title>Table Fable</title>
    <style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}

	#main {
		position: relative;
		min-height: 100%;
		_height: 100%; /* IE hack for min-height */
		background: blue;
		padding-left: 300px;
	}

	#boxOne, #boxTwo {
		position: absolute;
		right: 0;
		width: 200px;
		background: red;
		min-height: 150px;
		_height: 150px;
	}

	#boxOne {
		top: 0;
	}

	#boxTwo {
		bottom: 0;
	}
    </style>
  </head>
  <body>
    <div id="main">
      <div id="boxOne"></div>
      <div id="boxTwo"></div>
    </div>
  </body>
</html>

cmayo · Oct 10, 2005

Vragabond, that certainly seems simple enough, and thank you for the code. Maybe there's something to this CSS stuff after all, huh?

I'll give this a shot in my layout and if it works out, maybe I'll convert the whole site over to CSS.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Expanding HTML Table

cmayo

MIS

Vragabond

Programmer

cmayo

MIS

Vragabond

Programmer

cmayo

MIS

Similar threads

Part and Inventory Search

Sponsor