Tables have me pulling hair

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

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.

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…

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

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

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?

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}

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

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.

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.

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