Tables with graphics

• 

  suzannechiles · Member · Jun 18, 2012 at 12:32 am

  • Copy link
  • Add topic to favorites

  I want to create a two-column table with small graphics in the left column and text in the right column. All the graphics were uploaded. Click the Songs menu item to see the topic “The Way You Look Tonight”

  I’ve tried to keep the table code simple, but when I paste the link to embed the graphic in the table cell, it gets complicated.

  It looks fine in the visual editing window, so it must be the .css — I’m using Bueno.

  Here’s the HMTL code:
  <table>
  <tbody>
  <tr>
  <td><img class=”aligncenter size-full wp-image-184″ title=”LongAgoAndFarAway” src=”http://bloggingtonybennett.files.wordpress.com/2012/06/longagoandfaraway1.jpg” alt=”” width=”90″ height=”90″ /></td>
  <td>Long Ago and Far Away1958With Frank DeVol and his Orchestra</td>
  </tr>
  <tr>
  <td><img class=”aligncenter size-full wp-image-185″ title=”Rarities, Outtakes and Other Delights, vol. 2″ src=”http://bloggingtonybennett.files.wordpress.com/2012/06/r2-test.jpg” alt=”” width=”90″ height=”90″ /><img class=”aligncenter size-full wp-image-186″ title=”Tony Bennett Sings the Ultimate American Songbook, Vol. 1″ src=”http://bloggingtonybennett.files.wordpress.com/2012/06/tbusv1.jpg” alt=”” width=”90″ height=”90″ /></td>
  <td>Recorded in 1997With the Ralph Sharon Trio

  Originally recorded for My Best Friend’s Wedding soundtrack

  Appears on Rarities, Outtakes and Other Delights, Vol. 2

  Tony Bennett Sings the Ultimate American Songbook, 2007</td>
  </tr>
  <tr>
  <td><img class=”aligncenter size-full wp-image-187″ title=”Duets II” src=”http://bloggingtonybennett.files.wordpress.com/2012/06/duetsii.jpg” alt=”” width=”90″ height=”90″ /></td>
  <td>Duets II 2011
  Sung with Faith Hilland Lee Musiker, Gray Sargent, Marshall Wood, and Harold Jones

  Arranged and conducted by Jorge Calandrelli</td>
  </tr>
  </tbody>
  </table>

  The blog I need help with is: (visible only to logged in users)

• 

  1tess · Moderator Emeritus · Jun 18, 2012 at 2:07 am

  • Copy link

  Here is your code, adjusted:

  <table style="border:0 none;">
  <tbody>
  <tr>
  <td style="vertical-align:middle;padding-left:10px;padding-right:10px;border:0 none;"><img class="aligncenter wp-image-184" title="LongAgoAndFarAway" src="http://bloggingtonybennett.files.wordpress.com/2012/06/longagoandfaraway1.jpg" alt="" width="90" height="90" /></td>
  <td style="vertical-align:middle;padding-left:10px;padding-right:10px;border:0 none;">Long Ago and Far Away1958With Frank DeVol and his Orchestra</td>
  </tr>
  <tr>
  <td style="vertical-align:middle;padding-left:10px;padding-right:10px;border:0 none;"><img class="aligncenter size-full wp-image-185" title="Rarities, Outtakes and Other Delights, vol. 2" src="http://bloggingtonybennett.files.wordpress.com/2012/06/r2-test.jpg" alt="" width="90" height="90" /><img class="aligncenter wp-image-186" title="Tony Bennett Sings the Ultimate American Songbook, Vol. 1" src="http://bloggingtonybennett.files.wordpress.com/2012/06/tbusv1.jpg" alt="" width="90" height="90" /></td>
  <td style="vertical-align:middle;padding-left:10px;padding-right:10px;border:0 none;">Recorded in 1997With the Ralph Sharon Trio
  
  Originally recorded for My Best Friend’s Wedding soundtrack
  
  Appears on Rarities, Outtakes and Other Delights, Vol. 2
  
  Tony Bennett Sings the Ultimate American Songbook, 2007</td>
  </tr>
  <tr>
  <td style="vertical-align:middle;padding-left:10px;padding-right:10px;border:0 none;"><img class="aligncenter wp-image-187" title="Duets II" src="http://bloggingtonybennett.files.wordpress.com/2012/06/duetsii.jpg" alt="" width="90" height="90" /></td>
  <td style="vertical-align:middle;padding-left:10px;padding-right:10px;border:0 none;">Duets II 2011
  Sung with Faith Hilland Lee Musiker, Gray Sargent, Marshall Wood, and Harold Jones
  
  Arranged and conducted by Jorge Calandrelli</td>
  </tr>
  </tbody>
  </table>

  I’m not certain that the size-ful in the image class was causing problems, but apparently you are using small thumbnails of larger uploaded images.

  Note the inline styling “vertical – align: middle” and the padding for space between your table cells.

  Also, the Bueno theme adds a border to the table and tds so if you want that, then remove the “border: 0 none” code.

• 

  suzannechiles · Member · Jun 18, 2012 at 2:18 am

  • Copy link

  Thanks … this works perfectly.

• 

  1tess · Moderator Emeritus · Jun 18, 2012 at 2:23 am

  • Copy link

  You are most welcome.