468,512 Members | 1,626 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,512 developers. It's quick & easy.

Table and cell widths

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
Jul 20 '05 #1
3 2626
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

Jul 20 '05 #2
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

Jul 20 '05 #3
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.)

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Bart Heinsius | last post: by
10 posts views Thread by Andrew Thompson | last post: by
3 posts views Thread by Steve Sabljak | last post: by
2 posts views Thread by Andy Flash | last post: by
1 post views Thread by Jeronimo Bertran | last post: by
18 posts views Thread by chimalus | last post: by
117 posts views Thread by phil-news-nospam | last post: by
2 posts views Thread by gentsquash | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.