Need help? Check out our Support site, then


Table Alignment Issues In Twenty Eleven

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

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

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

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

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

  6. @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.

  7. Right.
    ** ≥^!^≤ **

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

  9. Simplest solution!

  10. 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!

Topic Closed

This topic has been closed to new replies.

About this Topic