HTML Table Question

#1

This is probably a basic question but seems to be hard for me to find.

How do you tell a cell to take up all the vertical space it can? (By
default the 1st cell does it but I want the 3rd to). style="height:
100%;" doesn't work and can't find a "vertical-align:justify;"
option. Below is what my table looks like.

1 2
3 4
5 6

1/3/5 are all merged with rowspan=2. Cell 2 has to fit its data.
Cell 4 has to be right under Cell 2 always. I want Cell 6 to take up
any extra room with blank space so that Cell 1 or 4 arn't stretched
(Cell 4 has special background).

Note:
1 2
3 4

This situation would also be fine (1/3 merged). It works the way I
want it to when Cell 2 is higher than the data in 1/3. But when data
in Cell 2 is small then Cell 2 gets stretched which I'd like to
advoid.

Thanks

NB

#2

In article
<c06ed205-11ee-44e8-a012-4ff956ac294a (AT) h11g2000prf (DOT) googlegroups.co
m>,
NvrBst <nvrbst (AT) gmail (DOT) com> wrote:

Quote:

This is probably a basic question but seems to be hard for me to find.

How do you tell a cell to take up all the vertical space it can? (By
default the 1st cell does it but I want the 3rd to). style="height:
100%;" doesn't work and can't find a "vertical-align:justify;"
option. Below is what my table looks like.

1 2
3 4
5 6

1/3/5 are all merged with rowspan=2. Cell 2 has to fit its data.
Cell 4 has to be right under Cell 2 always. I want Cell 6 to take up
any extra room with blank space so that Cell 1 or 4 arn't stretched
(Cell 4 has special background).

Note:
1 2
3 4

This situation would also be fine (1/3 merged). It works the way I
want it to when Cell 2 is higher than the data in 1/3. But when data
in Cell 2 is small then Cell 2 gets stretched which I'd like to
advoid.

Excuse me while I pray:

Dearest God Almighty, greatest of all HTML authors, Please make a
subscriber who has a complicated question supply a f*ing url.
thank you.

PS. And wipe all those tut tuts from the faces of your most
faithful servants.

--
dorayme

#3

On Jan 10, 7:13 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Quote:

Excuse me while I pray:
Dearest God Almighty, greatest of all HTML authors, Please make a
subscriber who has a complicated question supply a f*ing url.
thank you.

Whats a flying url?

#4

On Jan 10, 4:13*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Quote:

In article
c06ed205-11ee-44e8-a012-4ff956ac2... (AT) h11g2000prf (DOT) googlegroups.co
m>,

*NvrBst <nvr... (AT) gmail (DOT) com> wrote:
This is probably a basic question but seems to be hard for me to find.

How do you tell a cell to take up all the vertical space it can? (By
default the 1st cell does it but I want the 3rd to). *style="height:
100%;" doesn't work and can't find a "vertical-align:justify;"
option. *Below is what my table looks like.

1 2
3 4
5 6

1/3/5 are all merged with rowspan=2. *Cell 2 has to fit its data.
Cell 4 has to be right under Cell 2 always. *I want Cell 6 to take up
any extra room with blank space so that Cell 1 or 4 arn't stretched
(Cell 4 has special background).

Note:
1 2
3 4

This situation would also be fine (1/3 merged). *It works the way I
want it to when Cell 2 is higher than the data in 1/3. *But when data
in Cell 2 is small then Cell 2 gets stretched which I'd like to
advoid.

Excuse me while I pray:

Dearest God Almighty, greatest of all HTML authors, Please make a
subscriber who has a complicated question supply a f*ing url.
thank you.

PS. And wipe all those tut tuts from the faces of your most
faithful servants.

--
dorayme- Hide quoted text -

- Show quoted text -

Hehe sorry don't have a URL yet... I was able to acomplish what I
want by seperating column 1 and column 2 into 2 seperate tables and
then putting both tables into a new table. If someone has a more
elegant solution please tell. Below is how my solution looks like in
code form if it helps

<table style:"vertial-align: top;"><tr>
<td> <table><tr><td>*Menu*</td></tr></table> </td>
<td> <table><tr><td>*Data1*</td></tr><tr><td>*Data2*</td></tr></
table> </td>
</tr></table>

Using 3 tables isn't that elegant though... This is what I'd like it
to look like, what it was before (In code form)
<table>
<tr>
<td rowspan="3">*Menu*</td>
<td>*Data1*</td>
</tr>
<tr><td>*Data2*</td></tr>
<tr><td style="vertial-align:justify;"></td></tr>
</table>

What doesn't work in the this way is the "vertical-align:justify;"
line. I've tried setting the cells above it to "height: auto;" (which
is suppose to give it the min size they can be) and then leaving the
last cell with no height set but that didn't work either.

NB

#5

dorayme wrote:

Quote:

Excuse me while I pray:

Dearest God Almighty, greatest of all HTML authors, Please make a
subscriber who has a complicated question supply a f*ing url.
thank you.

Hallelujah!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#6

In article
<f99376ef-8f85-4458-ad0b-79f3a2ebecfa (AT) q39g2000hsf (DOT) googlegroups.co
m>,
Travis Newbury <TravisNewbury (AT) hotmail (DOT) com> wrote:

Quote:

On Jan 10, 7:13 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
Excuse me while I pray:
Dearest God Almighty, greatest of all HTML authors, Please make a
subscriber who has a complicated question supply a f*ing url.
thank you.

Whats a flying url?

I reckon this is a trick question.

--
dorayme

#7

NvrBst wrote:

Quote:

Hehe sorry don't have a URL yet...

Well you can upload an example. Use your ISP's personal webspace or some
free server...

I was able to acomplish what I

Quote:

want by seperating column 1 and column 2 into 2 seperate tables and
then putting both tables into a new table. If someone has a more
elegant solution please tell. Below is how my solution looks like in
code form if it helps

table style:"vertial-align: top;"><tr
td> <table><tr><td>*Menu*</td></tr></table> </td
td> <table><tr><td>*Data1*</td></tr><tr><td>*Data2*</td></tr></
table> </td
/tr></table

Using 3 tables isn't that elegant though... This is what I'd like it
to look like, what it was before (In code form)
table
tr
td rowspan="3">*Menu*</td
td>*Data1*</td
/tr
tr><td>*Data2*</td></tr
tr><td style="vertial-align:justify;"></td></tr
/table

What doesn't work in the this way is the "vertical-align:justify;"
line. I've tried setting the cells above it to "height: auto;" (which
is suppose to give it the min size they can be) and then leaving the
last cell with no height set but that didn't work either.

Quote:

percentage> | <length> | inherit

Anyway if you wish to duplicate your three table layout with one, then
you need colspan 2 not 3

<table>
<tr><td rowspan="2">*Menu*</td><td>*Data1*</td></tr>
<tr><td>*Data2*</td></tr>
</table>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#8

On Jan 10, 4:53*pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net>
wrote:

Quote:

NvrBst wrote:
Hehe sorry don't have a URL yet... *

Well you can upload an example. Use your ISP's personal webspace or some
free server...

I was able to acomplish what I

want by seperating column 1 and column 2 into 2 seperate tables and
then putting both tables into a new table. *If someone has a more
elegant solution please tell. *Below is how my solution looks like in
code form if it helps

table style:"vertial-align: top;"><tr
td> *<table><tr><td>*Menu*</td></tr></table> *</td
td> *<table><tr><td>*Data1*</td></tr><tr><td>*Data2*</td></tr></
table> *</td
/tr></table

Using 3 tables isn't that elegant though... *This is what I'd like it
to look like, what it was before (In code form)
table
tr
td rowspan="3">*Menu*</td
td>*Data1*</td
/tr
tr><td>*Data2*</td></tr
tr><td style="vertial-align:justify;"></td></tr
/table

What doesn't work in the this way is the "vertical-align:justify;"
line. *I've tried setting the cells above it to "height: auto;" (which
is suppose to give it the min size they can be) and then leaving the
last cell with no height set but that didn't work either.

1) There is no value "justify" for property "vertical-align". Valid values:

baseline | sub | super | top | text-top | middle | bottom | text-bottom
| <percentage> | <length> | inherit

Anyway if you wish to duplicate your three table layout with one, then
you need colspan 2 not 3

table
tr><td rowspan="2">*Menu*</td><td>*Data1*</td></tr
tr><td>*Data2*</td></tr
/table

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com- Hide quoted text -

- Show quoted text -

The Example I gave above was this though (So I think I'd need
rowspan=3).
<table>
<tr><td rowspan="3">*Menu*</td> <td>*Data1*</td> </tr>
<tr><td>*Data2*</td></tr>
<tr><td style="vertial-align:justify;"></td></tr>
</table>

I need the "vertial-align:justify;" cell so that vertical stretching
doesn't occur in the *Data1* and *Data2* cells. I know there is no
justify for vertical alignment but I stated it because that is the
kind of effect I need.

If I use your example (using rowspan=2) then I'd have the problem (as
labled in the inital post) of *Data2* cell being stretched when *Data1*
+*Data2* height is less than *Menu*

NB

#9

NvrBst wrote:

Quote:

I need the "vertial-align:justify;" cell so that vertical stretching
doesn't occur in the *Data1* and *Data2* cells. I know there is no
justify for vertical alignment but I stated it because that is the
kind of effect I need.

If I use your example (using rowspan=2) then I'd have the problem (as
labled in the inital post) of *Data2* cell being stretched when *Data1*
+*Data2* height is less than *Menu*

Maybe what the real problem is that you are using a table for layout
when you should be using something else. If you rowspan the left column
cell and the right column you add data that expand the cells vertically
it is "natural" table behavior for the left column rowspan'ed cell to
also expand vertically

Now looking into my crystal ball I see that the left cell you put the
word "menu" so chances are you have a *list* of menu items. If it a list
you should use a list! If you want it side by side with your data then
float it left. Google "2 column css layout template"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#10

On Jan 10, 5:47*pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net>
wrote:

Quote:

NvrBst wrote:
I need the "vertial-align:justify;" cell so that vertical stretching
doesn't occur in the *Data1* and *Data2* cells. *I know there is no
justify for vertical alignment but I stated it because that is the
kind of effect I need.

If I use your example (using rowspan=2) then I'd have the problem (as
labled in the inital post) of *Data2* cell being stretched when *Data1*
+*Data2* height is less than *Menu*

Maybe what the real problem is that you are using a table for layout
when you should be using something else. If you rowspan the left column
cell and the right column you add data that expand the cells vertically
it is "natural" table behavior for the left column rowspan'ed cell to
also expand vertically

Now looking into my crystal ball I see that the left cell you put the
word "menu" so chances are you have a *list* of menu items. If it a list
you should use a list! If you want it side by side with your data then
float it left. Google "2 column css layout template"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Ahh, something tables can't do? Okay

CSS approach looks like its
the same thing as the table approach though (except using 3 DIV's
instead of 3 TABLE's). Maybe DIV has performance improvments? I'll
look into it a bit.

Thanks

NB