Table/ Image/ Text allignments

  • sebassah

    (@sebassah)


    13 years, 6 months ago

    Hi all,

    working on a childtheme for noanoanederland.nl. All good so far but I seem to have issues showing images in tables in the correct alignment. As you can see at http://www.noanoanederland.nl/utrecht.

    I try to let pictures show up next to the text.

    I used the following code:

    <table width="600" border="0">
    <tr>
    <td width="149" align="left" valign="top"><img src="http://www.noanoanederland.nl/wp-content/uploads/2012/11/locatieamimg.png" width="132" height="108" /></td>
    <td width="441" align="left" valign="top"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut semper erat. Sed ut risus sit amet lorem venenatis rhoncus. Etiam adipiscing velit tincidunt nunc luctus pulvinar mattis orci rutrum. Nam hendrerit elit at tortor lobortis id tincidunt dolor blandit. Sed faucibus tincidunt magna vel congue. Donec volutpat, sem non lacinia euismod, velit justo consectetur lectus, eu elementum turpis tellus in mi. </td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    <tr>
    <td>Noa Noa Utrecht</td>
    <td rowspan="12">[wpgmza id="1"]</td>
    </tr>
    <tr>
    <td>Lijnmarkt 20/A</td>
    </tr>
    <tr>
    <td>3511 KH Utrecht</td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td>035 - 23 24 356</td>
    </tr>
    <tr>
    <td>Direct contact</td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    </table>

    Any Ideas and suggestions?

    Thanks in advance, Seb

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 6 months ago

    Consider replacing tables with <div>s, otherwise you’ll compromise accessibility and SEO. It looks like you may create more work for yourself too, as to get the structure you want, you may need to create tables inside of tables.

    WP Libra

    (@wpbum)

    13 years, 6 months ago

    This is kind of hard because it would actually be better to get rid of all the tables. But easiest fix possible would be to add this to style.css

    .entry-content td, .comment-content td {
    vertical-align: top;
    }

    Then for your address and stuff left of the map put that all in 1 row so their isnt that space.

    Thread Starter sebassah

    (@sebassah)

    13 years, 6 months ago

    That was a great solution WP BUM!

    There a re a few things not aligning correct though. Could you have another look:

    The text top right doesnt allign with the top of the image
    The map doesnt allign right (should i add that to .entry-content td aswell?

    If you look at the right sidebar there are simmular tables, youd think your solution would work there aswell?

    Thanks for the hulp so far.

    Thread Starter sebassah

    (@sebassah)

    13 years, 6 months ago

    @ Andrew Nevins, im not that experienced with <DIV> tags to create alignments. How would that look/ work?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Table/ Image/ Text allignments’ is closed to new replies.