Formatting Tables

• 

  whatsnickeating · Member · Jul 31, 2013 at 3:52 am

  • Copy link
  • Add topic to favorites

  Help! My tables for this post are a formatting nightmare!

  http://wp.me/p3peQ2-65

  I literally spent hours trying to figure this out but have had no luck. The images are supposed to be in their full size which is 200px wide. The table does not let them get any bigger. You can also see that I use three tables (same exact code) but the images ended up way smaller in one. Anyone have any ideas?

  Thanks!

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

• 

  1tess · Moderator Emeritus · Jul 31, 2013 at 3:00 pm

  • Copy link

  Your code is messed up in a couple of ways. Here is an excellent article about how to code a table properly:
  http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/

  There are more efficient ways to display a picture with text than using tables. The easiest way is to use proper image alignment so text will automatically wrap to the left or right of the image. Here is a guide for how it works:
  align none: the picture will display left, text will be below
  align center: picture will be centered, text will be below
  align left: picture will show on the left, text will be on the right
  align right: picture will show on the right, text will be on the left

  If your text is shorter than its corresponding picture, then the next picture will appear below the preceding text but not aligned all the way to the left where you intend it to be. To solve that problem, go to the text editor and insert this code:
  <br style="clear:both;"></br>
  That will force the subsequent picture-text pair down to the next line (row) where you intend them to be seen.

• 

  justpi · Member · Jul 31, 2013 at 3:04 pm

  • Copy link

  a) Don’t copypaste from other sources into the Visual editor: you introduce wrong code that messes things up.

  b) If you’re interested in table formatting, see this tutorial of mine:
  http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/

  c) But you don’t need tables at all in order to display a column of left aligned images with some text next to each image. All you need is this code after each image/text pair (in the Text editor):
  <div style="clear: both;"> </div>

• 

  justpi · Member · Jul 31, 2013 at 3:04 pm

  • Copy link

  ~~

• 

  1tess · Moderator Emeritus · Jul 31, 2013 at 3:08 pm

  • Copy link

  even works in paragraphs
  <p style="clear:both;"></p>

  g’morning!

• 

  whatsnickeating · Member · Aug 1, 2013 at 6:14 pm

  • Copy link

  Wow. Thanks so much everyone.

  This is the one I ended up using and it worked out perfectly: <div style=”clear: both;”> </div>

  For some reason it would translate <br style=”clear:both;”></br> into &nbsp which led to the same formatting issue.

  Thanks!