Table Alignment Issues In Twenty Eleven

guitarwizard93 · Member · Apr 24, 2013 at 4:12 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
justpi · Member · Apr 24, 2013 at 5:05 pm
Copy link
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.
1tess · Moderator Emeritus · Apr 24, 2013 at 5:06 pm
Copy link
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)
1tess · Moderator Emeritus · Apr 24, 2013 at 5:08 pm
Copy link
There is me making it complicated: Of course, no table within a table is needed.
1tess · Moderator Emeritus · Apr 24, 2013 at 5:13 pm
Copy link
Except Twenty Twelve puts a horizontal line above and below its tables and the table within a table visually marries the picture and text.
justpi · Member · Apr 24, 2013 at 5:58 pm
Copy link
@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.
1tess · Moderator Emeritus · Apr 24, 2013 at 6:12 pm
Copy link
Right.
** ≥^!^≤ **
1tess · Moderator Emeritus · Apr 24, 2013 at 6:19 pm
Copy link
But with no borders, then why not a table with 1 row with 3 cells so all the text is simple lists.
justpi · Member · Apr 24, 2013 at 6:31 pm
Copy link
Simplest solution!
guitarwizard93 · Member · Apr 25, 2013 at 2:52 pm
Copy link
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!

No items found.