Fitting images to table cells

Discussion in 'HTML' started by kylejpatrick, Apr 3, 2012.

  1. kylejpatrick

    kylejpatrick Guest

    Hi folks,

    I have a situation involving some art I created that isn't quite
    fitting into a table cell, despite both the art and the dimensions of
    the table cell are the same (607px by 66px). And I cannot figure out
    for the life of me why not. It seems like the righthand side of my
    art gets cut off.

    Here's a snippet of my HTML and CSS:

    <table width="950 px" border="0" align="center" cellpadding="0"
    <tr height="66 px">
    <td width="25 px" rowspan="2"> </td>
    <td width="318 px" rowspan="2" class="logo"><img src="images/BIG
    <td width="607 px" height="66 px" colspan="2"

    <td width="582 px" class="table-main"> test2</td>
    <td width="25 px"> </td>

    background-repeat: no-repeat;


    To see screenshots of what I want and what it ends up looking like,
    visit my blog at


    kylejpatrick, Apr 3, 2012
    1. Advertisements

  2. kylejpatrick

    dorayme Guest

    "=950 px"? Use instead "=950"
    dorayme, Apr 3, 2012
    1. Advertisements

  3. kylejpatrick

    dorayme Guest

    oops, let me say that again!

    Instead of

    width="950 px"



    And I don't think height on TRs is kosher.

    Check with a good validator and follow all the leads.
    dorayme, Apr 4, 2012
  4. Yeah, right, but it doesn't really matter, except removing an error
    message from a validator's report, so that you could focus on other
    errors. If you tried to fix the page, that is.

    Browsers just ignore the " px" part.

    A fixed width of 950 pixels is usually tells that the page should not be
    debugged but redesigned.
    Jukka K. Korpela, Apr 4, 2012
  5. kylejpatrick

    dorayme Guest

    It matters in the way that shiny buttons, correctly held rifles and
    proud upright stances matter when soldiers in training march on the
    parade ground. It matters in the way perfectly cleaned rifles in
    peacetime matter. If war comes, these soldiers will survive better and
    they will die better.
    dorayme, Apr 4, 2012
  6. I've had a look at the site and I cannot figure out what you are
    talking about.
    In the first picture labelled "Here’s what I need it to look like
    (ignore the cell borders):", I cannot see a curve on the bottom right
    of the blue graphic.
    Captain Paralytic, Apr 4, 2012
  7. kylejpatrick

    kylejpatrick Guest

    Thanks! I'll try it.
    kylejpatrick, Apr 11, 2012
  8. kylejpatrick

    kylejpatrick Guest

    Captain, I'll see if I can zoom the images and repost so you can see
    what I'm talking about. I'll write later tonight.
    kylejpatrick, Apr 11, 2012
  9. kylejpatrick

    kylejpatrick Guest


    I made the suggested change but no dice :(
    kylejpatrick, Apr 14, 2012
  10. kylejpatrick

    kylejpatrick Guest


    I assume you're talking about using some sort of flexible width as
    opposed to fixed width cells... And that probably would take care of
    the problem.. I was hoping to stick to a width 950 px in order to
    ensure consistency across several templates me and my business partner
    are designing... is there any particular fix you had in mind? I'm all
    ears. -K
    kylejpatrick, Apr 14, 2012
  11. kylejpatrick

    kylejpatrick Guest

    Hey all,

    I figured it out. The "padding" CSS property in one cell was pushing
    adjacent cells further out. Which is fine, but how do I code a
    webpage so that one cell has an image with padding, and the other
    cells and their art "flex" - i.e. without having to go to the adjacent
    cells and having to edit their art or edit HTML/CSS?

    kylejpatrick, Apr 15, 2012
  12. kylejpatrick

    dorayme Guest

    Best to do this. Mark up using no or very few style attributes. Class
    whatever you want to style. And style those classes in separate CSS
    blocks, linked externally or in the head of the document.

    Now, about table and padding and flexibility: You class the TD you
    want padding on and you give the appropriate padding in the CSS.

    <td class="padding">stuff<td>stuff</td> <td>stuff</td>...

    (You would choose more appropriate names for the classes)

    table {width: ...;}
    td {padding: 0;}
    td.padding {padding: ...;}

    The table will expand to the width specified for table in the CSS. The
    TD of class "padding" will have the padding you want, and even the
    width you might want if you specify a width too. The other cells don't
    need anything at all to expand, they will have no padding. The browser
    will distribute and divide other cells over the remaining space to
    give a satisfactory result. The content of all the cells can affect
    the result.

    If you do not specify widths at all, not even for the table element,
    the space taken will shrexpand to tightly fit the content, leave it to
    the browser to do this.

    There is a slight irony when we criticise table layout for its
    inflexibility in that it is one of the cleverest elements around in
    terms of flexibility, all handled by the browser. Of course, its
    flexibility and inflexibility are in respect to different things, that
    is why the irony is not at all large.
    dorayme, Apr 15, 2012
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.