Placing pictures in tables

  • Author
    Posts
  • #1207549

    seandodson
    Member

    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.

    #1207618

    justpi
    Member

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

    #1207778

    craiglimpo
    Member

    Do like this

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

    full source

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

    craig.

    #1207783

    justpi
    Member

    @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" />

The topic ‘Placing pictures in tables’ is closed to new replies.