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 3 2827
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ü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" <ma******@space mail.com> wrote in message
news:be******** ****@news.hanse net.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ü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
In article <be************ @news.hansenet. net>, ma******@spacem ail.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.) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 in IE. The HTML was generated with Mozilla's Composer.
Can anyone help getting this to work in IE?
Thanks already,
Bart.
|
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 element. Suggestions for layout welcome.
NN 4.8 displays lambda, kappa and rho as '?'.
Is there any way of getting the greek letters
to appear for NN 4.8?
|
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 displays correctly
in standards compiance mode in firefox, but not msie, where the
padding is added on to the column widths.
the table size is always correct, but the column widths are not what I
expect them to be.
If I change the column widths to...
|
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 calendar, so that the event may
be changed, or a new event may be created.
monthname
X X X X X X X form
X X X X X X X form
X X X X X X X form
|
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 assume a narrower
with than specified. If I comment out the width for the DIV, then the
cells render with the correct width and height. Why is this happening?
Thanks.
Regards,
N. Demos
| |
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 width=200 has the inner table which is
width=100%
|
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 size... here is my complete definition.
<table style="HEIGHT: 472px" cellSpacing="0" cellPadding="0" width="100%"
border="0">
<tr height="1">
|
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 dynamic. I have added a filtering
mechanism (in javascript) that can be used to hide unneeded
rows. However, each time I hide or show rows, the column sizes
change, and this doesn't look good.
Is there a way that I can preserve the column widths...
|
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
elements in the HTML to get everything just right. When you consider
the class attribute on the DIV elements, there's not much size savings
anymore for using DIV.
There are other disadvantages to not using TABLE/TR/TD, such as the
lack of ability...
|
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 in javascript (but JS plays little role
in the question) for an algebra class I'll be teaching.
The playing board is a particular <table>, and each cell is
supposed to be, say, 21px wide. Unfortunately, the
cell-widths shrink when the user...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |