Absolute width vs. Percentage

[Todd Cary]

In the code below, if I use an absolute width (e.g. width="168"), in
fact, any value, the column does not change. If I use percentage, it
does change. Why is this?

Todd

<table width="100%" border="1" cellpadding="0" cellspacing="0"
align="left" valign="top">
<!-- Begin Header -->
<tr>
<td width="15%" align="left">
<img height="105" alt="" src="images/Logo.gif" width="168">
</td>
<td>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center">
<img src="images/Banner.jpg" ALT="" width=580 height=59>
</td>
</tr>
<tr>
<td bgcolor="#336699" width="100%" align="center">
<p class="white">
Sub-title can go here
</p>
</td>
<!-- Column to "pad" display -->
<td>
&nbsp;&nbsp;
</td>
</tr>
</table>
</td>
</tr>
<!-- End Header -->
</table>

 

[Nico Schuyt]

In the code below, if I use an absolute width (e.g. width="168"), in
fact, any value, the column does not change. If I use percentage, it
does change. Why is this?

Because a percentage is relative to the environment (for example screen
size). If the environment changes, the object changes too.
Advantage is that the design is 'flexible'
Regards, Nico

 

[Todd Cary]

Nico -

I understand the "relative" nature of using percentages; in fact, I use
"100%" for the width of the outer table so that it will "size" to the
screen.

What I do unerstand is why using an absolute value in that one "width
attribute" has no effect, yet in all of the other "width attributes" on
the page, it does. For the column in question, an absolute would be
appropriate since the image is 168 wide, however for some unknown (at
least to me) absolutes have no effect in this one place.

Curious.....

Todd

 

[Richard]

Todd Cary wrote:>>

In the code below, if I use an absolute width (e.g. width="168"), in
fact, any value, the column does not change. If I use percentage, it
does change. Why is this?

You begin with by setting the main table to 100% of the screen which is
fine.
Then you have a nested table set set to 15%, leaving 85% free.
Now within that second table you create another table and set it to 100%
expcecting that to be the width of the screen as well. Wrong. The new 100%
is the same as the 15% of the main table.
What's 100% of 15%? 15%.
A nested table can not go outside of the boundaries of the table in which it
is created.

If you have the main table set to 90%, then an inner table set to 100%, you
will have two tables exactly the same width, minus a pixel or two for
borders.

 

[John W.]

In the code below, if I use an absolute width (e.g. width="168"), in
fact, any value, the column does not change. If I use percentage, it
does change. Why is this?

Todd

<table width="100%" border="1" cellpadding="0" cellspacing="0"
align="left" valign="top">
<!-- Begin Header -->
<tr>
<td width="15%" align="left">
<img height="105" alt="" src="images/Logo.gif" width="168">
</td>
<td>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center">
<img src="images/Banner.jpg" ALT="" width=580 height=59>
</td>
</tr>
<tr>
<td bgcolor="#336699" width="100%" align="center">
<p class="white">
Sub-title can go here
</p>
</td>
<!-- Column to "pad" display -->
<td>
&nbsp;&nbsp;
</td>
</tr>
</table>
</td>
</tr>
<!-- End Header -->
</table>

The (2nd) table, which contains the banner.jpg, has 1 tablecell in the
first row and 2 tablecells in the second row, that is not right.
Every row has to have the same number of tablecells, i.e. you will
have to make the first cell span 2 cols.

Change your code, look in a table-manual for the word * colspan*.



John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -