I'm messing around the width of a table and can't see to get it right. Let
me explain what I am trying to do. I have 5 cells in 1 row. The first cell I
would like to be 20% of the screen space. The middle 3 cells are filled with
text and will be whatever width the text is (so no width specified). Then I
want the last cell to just fill in the rest of the screen. What I have now
is:

<table width="100%">
<tr>
<td width="20%"></td>
<td>Text1</td>
<td>Test2</td>
<td>Test234</td>
<td width="100%"></td>
</tr>
</table>

The problem with the above code is that the first cell is MUCH less than 20%
of the screen. If I take off the 100% width from the last cell, the first
cell is in fact 20%, but then the middle 3 cells are stretched to fit the
screen width. How can I pad the remaining screen space in the last cell?
Thanks.

Cedric

Cedric Villat wrote:
[color=blue]
> I would like to be 20% of the screen space. The middle 3 cells are filled
> with text and will be whatever width the text is (so no width specified).
> Then I want the last cell to just fill in the rest of the screen. What I
> have now is:
>
> <table width="100%">
> <tr>
> <td width="20%"></td>
> <td>Text1</td>
> <td>Test2</td>
> <td>Test234</td>
> <td width="100%"></td>
> </tr>
> </table>[/color]

Hi Cedric,

I am a beginner with HTML, but I happened to be just in the right chapter of
my learning documentation (SELFHTML by Stefan M&uuml;nz ;-) ) that deals
with tables, which seems to enable me to answer your question. According to
your requirements, I was able to put this together:

<table border="1" width="100%">
<colgroup>
<col width=20% />
<col span="3" />
<col width="*" />
</colgroup>
<tr>
<td></td>
<td>Text1</td>
<td>Test2</td>
<td>Test234</td>
<td></td>
</tr>
</table>

If I am not mistaken, the <colgroup> element is the culprit here, as it
allows you to place <col span="3" />, and thereby define that the next 3
columns have no particular width. The trailing "/" in the <col> element is
for XHTML conformance only, drop that if you don't need it.

The <colgroup> element pre-defines your table's columns, which should also
allow a browser to load the table a lot quicker.

I only put in border="1" to better visualize the outcome. I have checked the
results, and its seems to work quite well. Let me know if this did help -
positive feedback is always welcome to motivate my learning efforts ;-))

Kind Regards,

Martin

Martin,

Thanks for the help. I tried this example below, and got no different
results that what I had before. I copied and pasted exactly what you had
given me. The 3 middle columns were MUCH wider than the text in them, so
something wasn't right. I'll do a little more research on the colgroup tag
to see if I can get what I need. If you have any other suggestions, let me
know.

Cedric

"Martin Becker" <madkraut@spacemail.com> wrote in message
news:beltfm$6ig5g$1@news.hansenet.net...[color=blue]
> Cedric Villat wrote:
>[color=green]
> > I would like to be 20% of the screen space. The middle 3 cells are[/color][/color]
filled[color=blue][color=green]
> > with text and will be whatever width the text is (so no width[/color][/color]
specified).[color=blue][color=green]
> > Then I want the last cell to just fill in the rest of the screen. What I
> > have now is:
> >
> > <table width="100%">
> > <tr>
> > <td width="20%"></td>
> > <td>Text1</td>
> > <td>Test2</td>
> > <td>Test234</td>
> > <td width="100%"></td>
> > </tr>
> > </table>[/color]
>
> Hi Cedric,
>
> I am a beginner with HTML, but I happened to be just in the right chapter[/color]
of[color=blue]
> my learning documentation (SELFHTML by Stefan M&uuml;nz ;-) ) that deals
> with tables, which seems to enable me to answer your question. According[/color]
to[color=blue]
> your requirements, I was able to put this together:
>
> <table border="1" width="100%">
> <colgroup>
> <col width=20% />
> <col span="3" />
> <col width="*" />
> </colgroup>
> <tr>
> <td></td>
> <td>Text1</td>
> <td>Test2</td>
> <td>Test234</td>
> <td></td>
> </tr>
> </table>
>
> If I am not mistaken, the <colgroup> element is the culprit here, as it
> allows you to place <col span="3" />, and thereby define that the next 3
> columns have no particular width. The trailing "/" in the <col> element is
> for XHTML conformance only, drop that if you don't need it.
>
> The <colgroup> element pre-defines your table's columns, which should also
> allow a browser to load the table a lot quicker.
>
> I only put in border="1" to better visualize the outcome. I have checked[/color]
the[color=blue]
> results, and its seems to work quite well. Let me know if this did help -
> positive feedback is always welcome to motivate my learning efforts ;-))
>
> Kind Regards,
>
> Martin
>[/color]

In article <beltfm$6ig5g$1@news.hansenet.net>, madkraut@spacemail.com
says...[color=blue]
> Cedric Villat wrote:
>[color=green]
> > I would like to be 20% of the screen space. The middle 3 cells are filled
> > with text and will be whatever width the text is (so no width specified).
> > Then I want the last cell to just fill in the rest of the screen. What I
> > have now is:[/color][/color]

....
[color=blue]
> According to
> your requirements, I was able to put this together:
>
> <table border="1" width="100%">
> <colgroup>
> <col width=20% />
> <col span="3" />
> <col width="*" />
> </colgroup>[/color]
....
Pretty close, but :
<col span="3" width="1px">
to force those three columns to be as thin as possible. (Oh, and there's
a typo - should be "20%", with the quotes.)