I have a table with a heading that is centered. The cells in this column each have an image that needs to be centered under the heading, and a checkbox with text that needs to be aligned to the bottom left of the image. The image does not have a set size, so each cell will need to adjust to have the checkbox aligned correctly. Here's what I have so far:

<table>
    <tbody>
        <tr>
            <th></th>
            <th></th>
            <th style="text-align: center;" nowrap="nowrap">Heading</th>
        </tr>
    <tr>
        <td>
            <img src="/images/photo.gif" alt="photo">
        </td>
        <td>
                 Description
        </td>
            <td style="text-align: center;">
                <img src="/prodimages/5335-default-S.jpg" alt="Gift wrapping">
                <br />
               <input name="item" value="1" type="checkbox"> Click here to see more options
            </td>
         </tr>
    </tbody>
</table>

2 answers

0
points
This was chosen as the best answer

I ended up doing this with jQuery. I aligned the cell contents to the left, then calculated the needed margin using the cell width and the image width.

Answered about 6 years ago by Eric Belair
0
points

Never use tables for creation of layouts! Use DTD! Go to W3Schools! Read http://alistapart.com!

Answered about 6 years ago by Micha? Furmaniak
  • This is not a layout, this is table data. The above code is just a sample of one row. Eric Belair about 6 years ago
  • "Need help with a simple layout..." Please title questions right it saves time and helps to avoid misunderstandings. Thank you in advance. Assuming that images will be wider and higher than heading, they will push bounds. I would give them some css padding to create more eye friendly look. Using jQuery for such simple tasks is a tremendous waste of resources. It's all there in html and css. Micha? Furmaniak about 6 years ago