picture width decides table column width

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I have a problem that I can't get my head around
I use php to call this but the end result is

<table width='90%' border='0' cellspacing='8' cellpadding='6' >
<td width='27%'><span class='resourceheader2'>Text</span><br><br><img
<td width='18%'>stuff</td>

but the picture seems to set the width - and the other columns get minimised
if I set
<img src='Pic.jpg' width='27%'>
then it ends up with a column of the width of the original pic with a 27%
size picture in it :(

I don't want to fix the column widths if I don't have to - but it might be
my only choice.

Any ideas what is wrong here?

I'm not a regular here - please be lenient if I'm being dumb :)

Re: picture width decides table column width

David Basford wrote:
Quoted text here. Click to load it

"Note that lengths expressed as percentages are based on the horizontal
or vertical space currently available, not on the natural size of the
image, object, or applet."

Re: picture width decides table column width

Quoted text here. Click to load it

It depends on whether the pic is specified with a width. If it is
not and it is small, say 10px, it will take up only a portion of
a table cell width set at 27% of the width of the table (which in
turn) is set at 90% of the width of the table's containing body
which might be body and is likely to be at least 800px wide...

You should know that the natural width of the picture (the 100%
size of it as viewed in any image software) is the width of a pic
unless you otherwise specify it. Thus if you say it is 50px, or
50% then the browser will try to accommodate that and ignore the
native width. %  are tricky because it is always relative to the
containing element and you need o ask what is the width of
*that*, will *that* accommodate, will *that* fit. Tables are
intelligent creatures and try their best to be everything to

Quoted text here. Click to load it

It depends on what you are trying to do? It is not clear quite
what you want to happen? What do you imagine or want to happen
for your visitors on different browsers, different screens or
platforms? Once that is known, further advice is possible.

Here is some code that gives a doctype and you can play about:

        "http://www.w3.org/TR/html4/strict.dtd ">
<meta http-equiv="content-type" content="text/html;
<title>List with em dimmed bullets</title>
<style type="text/css">
table {width: 90%;}
td {border: 1px solid #000;}

<table cellspacing='8' cellpadding='6' >
<td style="width:27%"><img src="bazzieinwatera.jpg" width="10px"
<td style="width:18%">stuff</td>

I am not quite sure if you are thinking about the situation of
specifying a cell to be 27% and also a pic to be 27%. If so, add
in the style in the head

img {width: 27%;}

leave off dimensioning the image inline in <img...> and see how
the image will under some generous browser widths take up only
about a quarter of that cell's width.


Site Timeline