Implied width of implied center column in 3 column table

[Csaba Gabor]

I have a table with 3 rows, and two pieces of data to display
in each row. However, the first element of the last two rows
and the 2nd element of the 1st row are very short. This would
seem to imply three columns where the first and last columns
are narrow and the (implied) middle one getting the bulk of
the width.

<table border id=tbl>
<tr><td colspan=2><nobr>This is supposed to be long</nobr></
td><td>Fred</td></tr>
<tr><td>Bill</td><td colspan=2><nobr>More long text goes here</nobr></
td></tr>
<tr><td>Joe</td><td colspan=2><nobr>Still more long text</nobr></td></
tr>
</table>

The short version of the question is how can I prop this
up (within the table framework)? I thought to put
style='width:1%' on the shortie elements. This resulted in
a very wide table in IE, so after adding the same
style='width:1%' (HTML shown below) to the table element
I get more or less what I was after.

However, in my FF I get an incredibly narrow middle column
(which is to say that the outer columns are too wide) and even
setting specific widths on the left and rightmost columns
doesn't seem to alter this implied middle width. Is there
anyway I can shore up the FF display?

Thanks,
Csaba Gabor from Vienna

This version works in my IE6:
<table border id=tbl style='width:1%'>
<tr><td colspan=2><nobr>This is long text</nobr></td><td style='width:
1%'>Fred</td></tr>
<tr><td style='width:1%'>Bill</td><td colspan=2><nobr>More long text
goes here</nobr></td></tr>
<tr><td style='width:1%'>Joe</td><td colspan=2><nobr>Still more long
text</nobr></td></tr>
</table>

[John Hosking]

Csaba Gabor wrote:

I have a table with 3 rows, and two pieces of data to display
in each row. However, the first element of the last two rows
and the 2nd element of the 1st row are very short. This would
seem to imply three columns where the first and last columns
are narrow and the (implied) middle one getting the bulk of
the width.

<table class="slightly reformatted by John">
<tr>
<td colspan=2>This is supposed to be long</td>
<td>Fred</td>
</tr>
<tr>
<td>Bill</td>
<td colspan=2>More long text goes here</td>
</tr>
<tr>
<td>Joe</td>
<td colspan=2>Still more long text</td>
</tr>
</table>

Well, I can't really help you, because I'm stuck on the basic
content-format question. Namely, this doesn't look like tabular data, so
I'm wondering why you are trying to use a table in the first place. What
is the relationship between "This is supposed to be long" and "Bill"?

If you really have a 2x3 table, then mark it up as a 2x3 table. (I see
that that's what you've done with the elements, but the colspan
attributes make the visual results somewhat more messy.) If it's just a
handful of text items, consider making them div or p elements, maybe
with spans inside them.

Also, I'd be more inclined to play with this if you'd provided a URL (or
two) with your attempts so far.

>
This version works in my IE6:
<table border id=tbl style='width:1%'>

Well, that's IE for you. ;-)
--
John
Pondering the value of the UIP: http://improve-usenet.org/

[Csaba Gabor]

On Jun 30, 11:45 am, John Hosking <[e-mail]>
wrote:

Csaba Gabor wrote:

I have a table with 3 rows, and two pieces of data to display
in each row. However, the first element of the last two rows
and the 2nd element of the 1st row are very short. This would
seem to imply three columns where the first and last columns
are narrow and the (implied) middle one getting the bulk of
the width.

<table class="slightly reformatted by John">
<tr>
<td colspan=2>This is supposed to be long</td>
<td>Fred</td>
</tr>
<tr>
<td>Bill</td>
<td colspan=2>More long text goes here</td>
</tr>
<tr>
<td>Joe</td>
<td colspan=2>Still more long text</td>
</tr>
</table>

Well, I can't really help you, because I'm stuck on the basic
content-format question. Namely, this doesn't look like tabular data, so
I'm wondering why you are trying to use a table in the first place. What
is the relationship between "This is supposed to be long" and "Bill"?

So if I understand you correctly, are you saying that because
you can't imagine a legitimate form of usage for this type of table
according to your own metrics, you are unable (can't) help?

There are probably very few configuarations of small tables
which don't support some legitimate form of table. Here, let me
help you. Imagine that you are out hiking and you come to a T
trail intersection. You might see:

Water, go that a way =>
Trailhead, to your right =>
<= Outhouse, go this a way
<= Ranger station, to the left

Call it the Excel way of doing things, if you will.
The left column is for left arrows. The right
column is for right arrows. The middle column
is for descriptions. However, as with the
Excel model, spillover is allowed (well, as far
as I know, Excel doesn't have backward
spillover, but that's another issue).

Certainly all the elements of my example are
atomic data - at issue is whether spillover
should be allowed. Some design principles
say the visual impact is more powerful with
such spillover (I don't know it's official name,
but I think of it as the principle of alignment),
but whether the data should then be in a
table or not is a matter of choice.

If you really have a 2x3 table, then mark it up as a 2x3 table. (I see
that that's what you've done with the elements, but the colspan
attributes make the visual results somewhat more messy.) If it's just a
handful of text items, consider making them div or p elements, maybe
with spans inside them.

Of course this doesn't have to be a table. There
are several ways to do it. One way, in keeping
with the table model, that your above text
suggested to me was that (assuming that all the
elements with short text on the right are up on
top) I could just have the top row of the table
contain a single TD which contains a TABLE
which containes all the short-text-on-right rows.
But I prefer not to stick tables in tables.

In any case, I don't have a problem with getting a
particular look. But evidently my model of table
drawing has come up a bit short in explaining what's
going on here. That understanding is what I am
after through this example.

Also, I'd be more inclined to play with this if you'd provided a URL (or
two) with your attempts so far.

Unfortunately, I have just discovered yesterday that
my router on my machine is blocking access from
the internet at large. But, other than the containing
minimal elements (ie. html, head, title, body), that's
the whole page.

By the way, at the risk of starting a flame war,
do you really think that class was intended for
use as a comment field? (And thanks for the
reformatting, by the way)

Csaba Gabor from Vienna

This version works in my IE6:
<table border id=tbl style='width:1%'>

Well, that's IE for you. ;-)
--
John

[Ben C]

On 2008-06-30, Csaba Gabor <da*****@gmail.comwrote:

I have a table with 3 rows, and two pieces of data to display
in each row. However, the first element of the last two rows
and the 2nd element of the 1st row are very short. This would
seem to imply three columns where the first and last columns
are narrow and the (implied) middle one getting the bulk of
the width.

<table border id=tbl>
<tr><td colspan=2><nobr>This is supposed to be long</nobr></
td><td>Fred</td></tr>
<tr><td>Bill</td><td colspan=2><nobr>More long text goes here</nobr></
td></tr>
<tr><td>Joe</td><td colspan=2><nobr>Still more long text</nobr></td></
tr>
</table>

The short version of the question is how can I prop this
up (within the table framework)? I thought to put
style='width:1%' on the shortie elements. This resulted in
a very wide table in IE, so after adding the same
style='width:1%' (HTML shown below) to the table element
I get more or less what I was after.

However, in my FF I get an incredibly narrow middle column
(which is to say that the outer columns are too wide) and even
setting specific widths on the left and rightmost columns
doesn't seem to alter this implied middle width. Is there
anyway I can shore up the FF display?

It's undefined and complicated how widths are distributed across spanned
columns, so I'm not surprised you're getting different results in
different browsers.

You could use three tables, with one row and two cells in each. Set the
short one to width: 1px (it will get its content minimum width).