473,394 Members | 3,057 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

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 2808
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Bart Heinsius | last post by:
Hi, I can't get my cell widths fixed in a table in IE6. In Mozilla it works, see http://www.xs4all.nl/~margreeh/aa.html . It's the blue cells that remain fixed at 20pt widths in Mozilla but not...
10
by: Andrew Thompson | last post by:
http://www.physci.org/test/chem/element.html, represents information on a chemical element. (http://www.physci.org/test/chem/ for the CSS's) Not yet coded for links to other forms of the...
3
by: Steve Sabljak | last post by:
I seem to having a little trouble getting a table to display correctly in both msie and firefox. I want to set the table and column widths in pixels, and have some cell padding too. The table...
0
by: TJ Talluto | last post by:
<facts> I have a "month calendar" that always displays exactly 42 days... and alongside is a vertical box that displays the detail (form fields) of any particular select event that appears on the...
4
by: N. Demos | last post by:
The following code renders as intended in IE (A TABLE, with cells of fixed width and height, inside of a DIV with fixed width and height and overflow set to hidden.) In Firefox, the table cells...
2
by: Andy Flash | last post by:
Hi. I'd like a little help working out what is going on with what should be a simple alignment problem. I have an outer table with a <td> which has an inner table. The <td> specified as...
1
by: Jeronimo Bertran | last post by:
I am creating a table and inserting an iframe inside a cell for which the width depends on the screen size. The table has 7 columns and the fourth column is resized depeding on the screen...
18
by: chimalus | last post by:
I am using a table with no column widths specified, letting the table layout manager do its thing for figuring out the column widths, and this works just fine. Now I want to make the table...
117
by: phil-news-nospam | last post by:
Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of...
2
by: gentsquash | last post by:
(If my question is too much CSS, please point me elsewhere and I'll post there. My tests have been on Firefox on MacOS, and I'd settle for just getting this to work there.) I'm writing a game...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.