Table and cell widths

[Cedric Villat]

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

[Martin Becker]

Cedric Villat wrote:

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>

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

[Cedric Villat]

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" <ma******@spacemail.com> wrote in message
news:be************@news.hansenet.net...

Cedric Villat wrote:

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>
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

[Jacqui or (maybe) Pete]

In article <be************@news.hansenet.net>, ma******@spacemail.com
says...

Cedric Villat wrote:

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:

....
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>

....
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.)