Need help? Check out our Support site, then


Placing pictures in tables

  1. Hello,
    I run a class of undergraduate students in online journalism. Last week we began experimenting with HTML tables and several of the group came up with issues. The plan was to create a two-column table with the text in the left-hand column and image in the right-hand column.

    One issue is that while the image fits nicely in the right hand column, the text is badly affected in the left, and aligns to the bottom of the cell

    See here: http://helenclarke823.wordpress.com/2013/03/18/the-independent-cafe-scene-in-headingley/

    Is there a small bit of code we can add to the table to stop the text behaving so?

    The blog I need help with is journalismatleedsmetropolitan.com.

  2. This is happening because of the default vertical alignment of images. You need to turn all of these:
    <td>
    to:
    <td style="vertical-align:top;">

    You also need to turn this:
    <table border="1">
    to just:
    <table>
    (The border attribute, as well as several other table attributes you'll find in table tutorials or table generators, is outdated coding that doesn't work on newer themes. Newer themes have a default styling for tables, which may or may not include borders, and changing this requires a different approach.)

  3. Do like this

    <img src="picture1.png" align="RIGHT">

    full source

    http://www.corelangs.com/html/images/border-align.html

    craig.

  4. @craiglimpo: As I said above, the issue on seandodson's table is the vertical alignment, not the horizontal alignment.
    Plus your source is bad. The tag you suggested should be:
    <img class="alignright" src="IMAGE URL HERE" alt="DESCRIPTION HERE" />

Topic Closed

This topic has been closed to new replies.

About this Topic