WordPress.org

Ready to get started?Download WordPress

Forums

Tables have me pulling hair (12 posts)

  1. z-man
    Member
    Posted 5 years ago #

    For some reason when I insert a table into a post, it looks great on the visual preview, but when it's published, it's not aligned correctly and the "white boxes" (I dunno what you call them but they show up around an image when you add a caption) don't show up correctly.

    As you can tell I'm a complete newbie at this and any help any one could offer would be appreciated. Here's the code behind my table.

    <table style="height: 210px;" border="0" cellspacing="1" cellpadding="1" width="175" align="center">
    <tbody>
    <tr>
    <td>
    
    [caption id="attachment_33" align="alignleft" width="143" caption="Dr Johnny Gayton"]<img class="size-full wp-image-33" title="Dr Johnny Gayton" src="http://blitz.zarious.com/wp-content/uploads/2009/04/gayton01.jpg" alt="Dr Johnny Gayton" width="143" height="209" />[/caption]</td>
    <td>
    
    [caption id="attachment_34" align="alignleft" width="143" caption="Dr. Louis Schlesinger"]<img class="size-full wp-image-34" title="Dr. Louis Schlesinger" src="http://blitz.zarious.com/wp-content/uploads/2009/04/teampdrschlessinger.jpg" alt="Dr. Louis Schlesinger" width="143" height="209" />[/caption]</td>
    <td>
    
    [caption id="attachment_37" align="alignleft" width="143" caption="Dr. Henry G. Schneider"]<img class="size-full wp-image-37" title="Dr. Henry G. Schneider" src="http://blitz.zarious.com/wp-content/uploads/2009/04/teampdrschneider.jpg" alt="Dr. Henry G. Schneider" width="143" height="209" />[/caption]</td>
    </tr>
    </tbody></table>
    <table style="height: 60px;" border="0" cellspacing="1" cellpadding="1" width="175" align="center" summary="”&quot;">
    <tbody>
    <tr>
    <td>
    
    [caption id="attachment_38" align="alignleft" width="143" caption="Dr. Richard E. Dowdell"]<img class="size-full wp-image-38" title="Dr. Richard E. Dowdell" src="http://blitz.zarious.com/wp-content/uploads/2009/04/teampdrdowdell.jpg" alt="Dr. Richard E. Dowdell" width="143" height="209" />[/caption]</td>
    <td>
    
    [caption id="attachment_40" align="alignleft" width="143" caption="Dr. Myron Wilson"]<img class="size-full wp-image-40" title="Dr. Myron Wilson" src="http://blitz.zarious.com/wp-content/uploads/2009/04/teampdrwilson.jpg" alt="Dr. Myron Wilson" width="143" height="209" />[/caption]</td>
    <td>
    
    [caption id="attachment_39" align="alignleft" width="143" caption="David Grogan"]<img class="size-full wp-image-39" title="David Grogan" src="http://blitz.zarious.com/wp-content/uploads/2009/04/teampdavidgrogan.jpg" alt="David Grogan" width="143" height="209" />[/caption]</td>
    </tr>
    </tbody></table>
  2. t31os
    Member
    Posted 5 years ago #

    Perhaps if you can explain what you're trying to do in terms of layout someone can provide a more simple piece of code for you to use...

    The only time you should need tables is when displaying tabular data, like lists of data with various columns..

  3. z-man
    Member
    Posted 5 years ago #

    I'm attempting to post 6 pictures in the center of a post stacked 3 on top of each other. I'm sure there is a simpler way, but I'm just learning wordpress and the curve seems to be kinda steep so far.

  4. t31os
    Member
    Posted 5 years ago #

    Try using something like this....

    Most themes will have the alignleft class in the stylesheet, so this should just work...

    <div class="alignleft">
      An image and caption here
    </div>
    
    <div class="alignleft">
      An image and caption here
    </div>
    
    <div class="alignleft">
      An image and caption here
    </div>
    
    <div style="clear:left"></div>
    
    <div class="alignleft">
      An image and caption here
    </div>
    <div class="alignleft">
      An image and caption here
    </div>
    <div class="alignleft">
      An image and caption here
    </div>

    Of course where i've written "An image and caption here" is where you place an image and caption, like before, but without the table..

    If they don't display properly, then add this into the stylesheet (style.css).

    .alignleft {float:left;}

    If it needs further adjustment, just post back...

  5. z-man
    Member
    Posted 5 years ago #

    Thank you very much for your help!

    That code did indeed stack them in two rows of three like I wante, but it had the same problem as my above code. It aligned the groups of images to the left, as opposed to the center, and for some reason it changed the outside border around the pictures.

    With the code I posted above, it looks right in the preview "minus the border that is" You can see it here

    Preview view

    But with both your code and mine, the borders are wrong and it's left justified. Here's the test page using the code you posted.

    Actual page

  6. t31os
    Member
    Posted 5 years ago #

    Ok, i'd say let's try this... as a test...

    Place everything from before where the XXX is...

    <div style="margin:0 auto;padding:0;width:540px">
    XXX
    </div>

    So basically we're making a fixed width div and using the margin to center it, though i think we can shave a few pixels off it i'd like you to just try that firstly if you would please.

    Floats can't be centered, their very nature places then either to the left or right. If we use a well placed and fixed width container we can emulate centering using the auto margin, though we might need to touch up the margins/paddings for the other divs..

  7. z-man
    Member
    Posted 5 years ago #

    Aaaah that's close. It's not exactly centered, but it's close enough.

    Any ideas on why the frames "I think that's what there called" around the pictures look different?

  8. t31os
    Member
    Posted 5 years ago #

    Ok update the stylesheet with these...

    .ct {width:480px;padding:0 0 0 5px}
    .alignleft {width:auto;padding:0;margin:0 5px 5px 0;float:left}
    .wp-caption {padding:5px;margin:0}

    NOTE: Update or replace the alignleft class created earlier..

    And change this..
    <div style="margin:0 auto;padding:0;width:540px">

    For.
    <div class="ct">

    If you want to put the background color back (god knows why that vanished), change this from above..
    .wp-caption {padding:5px;margin:0}
    for...
    .wp-caption {padding:5px;margin:0;background:#f3f3f3}

  9. z-man
    Member
    Posted 5 years ago #

    Where in the stylesheet.css should I paste that code?

  10. z-man
    Member
    Posted 5 years ago #

    Ok I pasted it into the stylesheet file where it looked like it should go and made the changes, but it still wasn't right. I copied the formatting for the caption from the default theme and that fixed the frames around the images. I tired posting this

    .ct {width:480px;padding:0 0 0 5px}
    .alignleft {width:auto;padding:0;margin:0 5px 5px 0;float:left}

    but it misaligned the pictures. I went back and reused this

    <div style="margin:0 auto;padding:0;width:540px">

    but I had to increase the width to 580 to make it line back up.

  11. jhofman
    Member
    Posted 4 years ago #

    Don't you just LOVE CSS? "Tables are for data" Whatever. CSS makes what should be a very simple task extremely complicated. I'll use tables whenever it is the easiest thing to do.

  12. Mark / t31os
    Moderator
    Posted 4 years ago #

    So how are tables any less complicated?

    I learnt HTML and CSS at the same time myself, and i see no difference in writing out a table then writing out a few divs and a bit of CSS.

    Or do you mean in terms of layout created inside an application? Dreamweaver, Frontpage, and so on?... apps which have been known to introduce unwanted markup or in some cases invalid markup... (lastest DW is much better in these terms, can't speak for FP).

    If you're writing by hand, a well writen table actually requires "more" code generally... granted you might know nothing about CSS but have some HTML experience. If you know some HTML (and no CSS), then i'd say whichever book or tutorials you're following are missing something that is key..

    CSS is a must (well not "must", but you get the point) if you're using HTML, if you using HTML without CSS, then you're years behind everyone else.. there's several reasons to use CSS over inline markup ...

    I started learning many years ago, originally starting in FrontPage, and then went onto hand written code and using Dreamweaver. CSS was not at all hard to grasp, the only issue i've "ever had" with CSS are the browser quirks, but of course that's not CSS at fault.. I only knew basic(very basic) HTML at the time i started picking up CSS.

    In all my years, i have never found browsers to render everything the same, and that includes tables.

    Tables are fine, for tabular data, "OR" wherever a CSS equivalent would require "just as much code" or more .....

    .. i've seen tutorials for creating table like layouts that actually use more code then a table would, which totally defeats part of the reasoning behind replacing the table to begin with... "A list apart" wrote a good article about it a while back, i'm sure if you google you could find it..

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags