FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Table Cell Widths in HTML





Alya
Is it possible to make a table so that width of cells is set:

1st cell - percentage width (e.g. 10% of the screen)
2nd cell - fixed width (e.g. 50px)
3d cell - remainder of the screen (I read it can be specified with a * or something like that)
Summer
Alya wrote:
Is it possible to make a table so that width of cells is set:

1st cell - percentage width (e.g. 10% of the screen)
2nd cell - fixed width (e.g. 50px)
3d cell - remainder of the screen (I read it can be specified with a * or something like that)


<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>
<td align="left" width="10%"></td>
<td align="left" width="50"></td>
<td align="left" width="*%"></td>
</tr></table>

EDIT : ADDED *% by Marston . Thanks Marston .

Maybe this will work . Edit it to suit ur needs .
Even I made them align to left , there shud be no probs coz they occupy all the spaces .
Marston
Summer wrote:
Alya wrote:
Is it possible to make a table so that width of cells is set:

1st cell - percentage width (e.g. 10% of the screen)
2nd cell - fixed width (e.g. 50px)
3d cell - remainder of the screen (I read it can be specified with a * or something like that)


<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>
<td align="left" width="10%"></td>
<td align="left" width="50"></td>
<td align="left" ></td>
</tr></table>

Maybe this will work . Edit it to suit ur needs .
Even I made them align to left , there shud be no probs coz they occupy all the spaces .
Er, that last td wouldn't span the width of the cell. It should be:
Code:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="left" width="10%">Content...</td>
<td align="left" width="50">Content...</td>
<td align="left" width="*%">Content...</td>
</tr>
</table>
Note that the last cell's width is "*%" as opposed to being blank...
GB
Or you could do it with a CSS table which can free flow to fit the space and have sections that are fixed.
Alya
Summer
Marston

Just tried it - doesn't seem to work.
The template is at http://www.best-software.frih.net/
In the second table:
When I set 3d cell to fixed width like 50px (instead of 5%) and last cell to *% (instead of 5%), the forth cell just gets stretched all the way to right edge of screen

GB
thanks, it's good to know there is another solution
LukeakaDanish
Maybe you want a

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

at the beginning of your document.

See if it works
Marston
Alya wrote:
Summer
Marston

Just tried it - doesn't seem to work.
The template is at http://www.best-software.frih.net/
In the second table:
When I set 3d cell to fixed width like 50px (instead of 5%) and last cell to *% (instead of 5%), the forth cell just gets stretched all the way to right edge of screen

GB
thanks, it's good to know there is another solution
You only asked for a table with three cells...
Alya
LukeakaDanish

Good point! Smile I made the changes.
but it didn't help with cell width issue

Marston
I tried to simplify the question using a more understandable example.

Is there any reason it would not work with 5 cells, but work with three?
Marston
Yes, there is. When you use the "*%" width attribute, that tells the browser to make that cell span the remaining width of the screen...
Summer
lol , if u set the 3rd cell to 50px and u want it to stay at its width , just add a 4th cell with *% .
Alya
Marston
yes, that's what I'd like to do!
I'd like the fifth cell to span the remaining width of the screen

Summer
the forth cell needs to be a percentage of the screen
I'd like the fifth cell to span the remaining width of the screen
foumpie
Alya wrote:
Marston
yes, that's what I'd like to do!
I'd like the fifth cell to span the remaining width of the screen

Summer
the forth cell needs to be a percentage of the screen
I'd like the fifth cell to span the remaining width of the screen


<table width=100%>
<tr>
<td width='10%'>CONT</td>
<td width='10%'>CONT</td>
<td width='50%'>CONT</td>
<td width='10%'>CONT</td>
<td>CONT</td>
</tr>
</table>

if the 5th cell has to span the remaining space,
just fill in nothing, but be sure you have defined the table width ...
otherwise that wont work.

you can also calculate the width of all cells
(in this example last cell has to be 20%)
studygroup
i cant understand it!
someone can explained how it happened?
foumpie
studygroup wrote:
i cant understand it!
someone can explained how it happened?


just try it !!
copy and use,
<table border='1'>

and see what happens ....
we are not supposed to make a website for you ...
Alya
foumpie

what I'm trying to do is:

<table width=100%>
<tr>
<td width="5%">CONT</td>
<td width="15%">CONT</td>
<td width="50px">CONT</td>
<td width="70%">CONT</td>
<td width="*%">CONT</td>
</tr>
</table>

It does NOT work! The third cell (which is supposed to be a fixed length of 50 pixels) gets stretched to occupy the rest of the screen. The fifth cell (instead of occupying rest of the screen) gets totally collapsed to zero.

GB

I tried CSS. When I use absolute positioning with CSS, the design doesn't look good at higher screen resolutions. Everything becomes too close to upper left corner and the rest of screen looks empty.

What I like about setting table-cells as a percentage of screen width is that at higher resolutions things get re-positioned more evenly on the screen.
strfry
This worked absolutely fine for me (copied and pasted your exact code in a file, put <html> and <body> tags around it, and loaded it up). Maybe your browser is broken? What browser type and version are you using?
Related topics
Highlighting Table Cells
[Beginner] css rollovers
Site Nav Suggestions...
[ RESOLVED ] - Preview of files
PHP next step
FriHost PHP Parser doesn´t work?
no border for table cell when no data
Html quize. way over
I just ripped up the solaris phpbb theme!! what you think?
apply text to multiple html-pages?
Making a table a link.
Positioning scripts in website
No Table Badkground Image In Internet Explorer
HTML Table Cell Height
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.