picture width decides table column width

D

David Basford

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' >
<tr>
<td width='27%'><span class='resourceheader2'>Text</span><br><br><img
src='Pic.jpg'></td>
<td width='18%'>stuff</td>
<td>stuff</td>
</tr>
</table>

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 :)
 
H

Harlan Messinger

David said:
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' >
<tr>
<td width='27%'><span class='resourceheader2'>Text</span><br><br><img
src='Pic.jpg'></td>
<td width='18%'>stuff</td>
<td>stuff</td>
</tr>
</table>

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 :(
Click to expand...

"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."
http://www.w3.org/TR/html4/struct/objects.html#adef-width-IMG
 
D

dorayme

"David Basford said:
I have a problem that I can't get my head around

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

but the picture seems to set the width
Click to expand...

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
everyone.
- 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?
Click to expand...

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>List with em dimmed bullets</title>
<style type="text/css">
table {width: 90%;}
td {border: 1px solid #000;}
</style>
</head>

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

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.
 
B

BootNic

I have a problem that I can't get my head around [snip]
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?
Click to expand...
[snip]

table-layout:fixed;

example:
http://bootnic.atwebpages.com/ScaleImageTableCell.php
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Sort by number of characters 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Filter table rows based on multiple checkboxes value 2
SendGrid email issue in responsive Gmail 1
Nested Loop Insert Page Break 1
Angularjs newbie - second JSON datasource does not display 0
Image shifts to the right when export the page to pdf 4
Help with Visual Lightbox: Scripts 2

Members online

No members online now.
Total: 45 (members: 1, guests: 44)
Robots: 398

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top