Table Alignment Issues In Twenty Eleven

  • Author
    Posts
  • #1243165

    OK so I’m doing a website for a local guitar shop (set up before by someone else, I’m simply rebuilding it from the dashboard) and I’m having a few issues.

    I’m trying to build the individual product pages to have a table in which the left cell has the photo of the product, and then the right cell has a second table with specifications and details listed. Now it all looks perfect in the visual editor (first link) but doesn’t align correctly on the live page (second link).

    http://www.flickr.com/photos/78987194@N03/8677456101/in/photostream
    http://carsandguitars.co.uk/electric/les-paul/gibson-les-paul/

    It’s been suggested to me that using a Custom CSS Manager plugin will allow me to solve the problem, however my dashboard doesn’t have a plugins section. Can anyone suggest a solution??

    Preferably without having to pay for the upgrade…

    The blog I need help with is carsandguitars.co.uk.

    #1243282

    justpi
    Member

    First, as you saw, some of the coding you use has no effect. You need to reconsider various things re table coding. Study this tutorial of mine:
    http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/

    Second, you don’t even need a table inside a table: you can insert the image as an independent image, setting its alignment to left, and use a table for the two-column data only, setting the appropriate width for it (not the way you’ve tried) and setting it to float right, so that it will show next to the image.

    #1243284

    1tess
    Moderator Emeritus

    We cannot use plugins on WordPress.COM.
    http://support.wordpress.com/com-vs-org/
    But you don’t need that. Here is code to build your table as you describe:

    <table>
    <tr>
    <td style="width:50%;vertical-align:top;">IMAGE</td>
    <td style="width:50%;vertical-align:top;padding-left:25px;">
    <table>
    <tr>
    <td>TEXT</td>
    <td>TEXT</td>
    </tr>
    <tr>
    <td>TEXT</td>
    <td>TEXT</td>
    </tr>
    </table>
    </td></tr></table>

    Details about coding tables:
    http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/

    If you are using Windows you could use Windows LiveWriter which will make tables:
    http://en.support.wordpress.com/xml-rpc/

    (I don’t think any of those editors for macs do tables)

    #1243286

    1tess
    Moderator Emeritus

    There is me making it complicated: Of course, no table within a table is needed.

    #1243291

    1tess
    Moderator Emeritus

    Except Twenty Twelve puts a horizontal line above and below its tables and the table within a table visually marries the picture and text.

    #1243317

    justpi
    Member

    @tess: But guitarwizard93 has written border=”0″, so they don’t want borders. If you do want borders, again you don’t need a nested table: you create a 3-column table, and use the rowspan attribute for the image td.

    #1243328

    1tess
    Moderator Emeritus

    Right.
    ** ≥^!^≤ **

    #1243333

    1tess
    Moderator Emeritus

    But with no borders, then why not a table with 1 row with 3 cells so all the text is simple lists.

    #1243341

    justpi
    Member

    Simplest solution!

    #1243484

    1tess, thank you!! I’ve been going at this page for days, you’ve just solved my problem perfectly. I owe you one buddy, cheers!

The topic ‘Table Alignment Issues In Twenty Eleven’ is closed to new replies.