tables tables tables

[zduck]

Here's my problem. I have a table and I need one column in it (the one to the far left) to be a fixed pixel width. And the other few columns need to be dynamicly sized according to the size of the users browser. Sort of like when you use the 100% deal for sizing the table. I can't do this though because it makes the whole table (all columns included) sizeable.

Thanks
-Joshua David

[umm]

not the best example but...

<table width="100%" border="1">
<tr>
<td width="300">
<table width="300" border=1">
<tr><td>inner</td></tr>
</table>
</td>
<td width="20%">&nbsp;</td>
<td width="30%">&nbsp;</td>
</tr>
</table>

[zduck]

well I actually had considered that but it defeated my purpose. see using that code if you resize your browser width-wise then it still creates an increasing gap between the fixed column we created and the next column to the right. This I don't want. I am using iFrames in each cell if that helps?...

Thanks

[MCookie]

Something like this should do it. A nested table in the right cell that is set to 100% width. You may need a spacer in the left cell to keep it from getting smaller than 300px. Or whatever size you want it to be.

<table width="100%">
<tr>
<td width="300"></td>
<td width="100%">

<table width="100%">
<tr>
<td width="30%"></td>
<td width="40%"></td>
<td width="30%"></td>
</tr>
</table>

</td>
</tr>
</table>

[Alekz]

Maybe You could make this with DIV's and CSS. Look at the Mike Foster's Fluid, Downgradeable, Three-Column CSS Layout -
http://www.hftonline.com/forum/showthread.php?s=&threadid=5488

Alex

[zduck]

actually i've never done anything with divs before just starting to use css really. I'm still learning all this web development stuff, i've been delving into ASP mainly now I'm focusing more on javascript, and css.

do you know anywhere I could find some good information on divs?

-Joshua David

[MCookie]

http://www.thenoodleincident.com/tutorials/box_lesson/index.html

[zduck]

thanks for the link. I'll have to do some study.

also I've almost got this table thing working but not quite. What you gave me mcookie helped a bunch. The code is below all this. but the problem I'm having is that when you resize width-wize the second column to the right that says 'fixed' stays fixed but a gap between it and the far left column increases as you length the window...

<table width="100%" border="1">
<tr>
<td width="140">fixed</td>
<td width="100%" rowspan="2" valign="top">
<table width="100%" border="1">
<tr>
<td width="70%" colspan="2">dynamic</td>
<td width="30%" rowspan="2">dynamic</td>
</tr>
<tr>
<td width="50%">dynamic</td>
<td width="100%">
<table width="150" border="1">
<tr>
<td>fixed</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="140">fixed</td>
</tr>
</table>

[MCookie]

Not sure what you mean by gap..
but I think something is wrong here:

<tr>
<td width="50%">dynamic</td>
<td width="100%">

The total width of those two cells must equal the 70% cell in the above row.
Or, give the left cell a fixed width and the right a 100%..

Like this:
<tr>
<td width="30%">dynamic</td>
<td width="40%">

Or this:
<tr>
<td width="200">dynamic</td>
<td width="100%">

It depends on what you want with the fixed 150px table. If you want it to horzontally move when you resize the window, use percentages, if you want it to stay at a fixed distance from the left, use an absolute value.


<table width="100%" border="1">
<tr>
<td width="140">fixed</td>
<td width="100%" rowspan="2" valign="top">
<table width="100%" border="1">
<tr>
<td width="70%" colspan="2">dynamic</td>
<td width="30%" rowspan="2">dynamic</td>
</tr>
<tr>
<td width="50%">dynamic</td>
<td width="100%">
<table width="150" border="1">
<tr>
<td>fixed</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="140">fixed</td>
</tr>
</table>

[zduck]

alright I got it. I went with alekz's idea about divs and css and finished up a layout. It looks awesome. Thank for all your help guys.

-Joshua David