picture width decides table column width

Discussion in 'HTML' started by David Basford, Sep 28, 2007.

  1. 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 :)
    David Basford, Sep 28, 2007
    #1
    1. Advertising

  2. David Basford wrote:
    > 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 :(


    "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
    Harlan Messinger, Sep 28, 2007
    #2
    1. Advertising

  3. David Basford

    dorayme Guest

    In article <AodLi.2069$%>,
    "David Basford" <> wrote:

    > 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


    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?
    >


    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.

    --
    dorayme
    dorayme, Sep 28, 2007
    #3
  4. David Basford

    BootNic Guest

    "David Basford" <> wrote:
    news:AodLi.2069$%:

    > 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?

    [snip]

    table-layout:fixed;

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

    --
    BootNic Sunday September 30, 2007 6:48 PM
    "Do not trust your memory; it is a net full of holes; the most
    beautiful prizes slip through it."
    *Georges Duhamel, The Heart's Domain*
    BootNic, Sep 30, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    4
    Views:
    1,516
  2. adelmo

    !! EL EXITO LO DECIDES TU !!!

    adelmo, Dec 14, 2006, in forum: C Programming
    Replies:
    0
    Views:
    499
    adelmo
    Dec 14, 2006
  3. rao

    who decides the size of a data type?

    rao, Mar 16, 2008, in forum: C Programming
    Replies:
    42
    Views:
    2,005
    Flash Gordon
    Mar 21, 2008
  4. Carl Howarth

    DG Column Width vs Table Column Width

    Carl Howarth, Oct 22, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    263
    Eliyahu Goldin
    Oct 24, 2004
  5. Bern
    Replies:
    1
    Views:
    80
    Michael Winter
    Oct 13, 2004
Loading...

Share This Page