Do you mean that the two side columns might be different widths, so you can't do it simply by centering the entire table? Let's see what you've tried so far, so nobody wastes their time coming up with brilliant solutions that work in 4 out of 5 browsers, but never the same 4.

I'm thinking something involving absolute positioning and a negative margin of either 50% or half the middle cell's pixel count-- but you just know that some browser somewhere will then eat half the table. And cell width is notoriously user-agent-dependent; they all seem to have different rules about which element is most important.

Now, if you set the table-layout to "fixed" and make invisible headers with the same content on left and right...

What's on the sides of the table? Or does it span the whole page?

... and that's why I said, let's see what doesn't work ;)

Do you mean that the two side columns might be different widths, so you can't do it simply by centering the entire table?

I'm actually not concerned about the widths of the two side columns as long as the middle column is centered.

I've tried this:

<table style="margin-left:auto;margin-right:auto;width:auto">
<tr>
<td style="text-align:right">left side text</td>
<td style="width:100px"><img src="/image.jpg" width="100" /></td>
<td style="text-align:left">right side text</td>
</tr>
</table>

The 100px-wide image sits slightly right of center.

I'm actually not concerned about the widths of the two side columns

But you need to be concerned about them, because if they are different, then the middle cell will be off center. That's why one of my ideas was making a table with fixed layout so the side cells are the same width. Or some definite, knowable width so you'll know how to position the table horizontally.

In fact, it's the middle cell that's going to be irrelevant to the problem. What you need is
{from left edge of container to left edge of central cell}
and
{from right edge of central cell to right edge of container}
to be the same. That's assuming the container itself is centered (is it the whole page?) -- but that's secondary and can be tweaked later.

I assume you've dealt with the rock-bottom basics like giving each cell the same left and right padding and border, if any. (Tables have margins. Cells have padding.)

{width: auto} is the default for tables, so that doesn't mean anything. What you need to look at is those two side cells or columns. What's their content? Is it about the same amount of material in each? Text or something else?

Oh, and, er, ahem. This is all assuming it's a bona fide table -- that is, there's a direct relationship among the items in each row * -- and not just a layout shortcut. Sometimes tables really can save a lot of time and trouble, but this is not one of those times.


* I've got a lurking suspicion that w3c themselves don't know what a table is. What is "tabular data" and why do they assume everyone agrees on this definition?

But you need to be concerned about them, because if they are different, then the middle cell will be off center. That's why one of my ideas was making a table with fixed layout so the side cells are the same width.

My design expands to fill the width of the browser so I can't define a fixed width unfortunately.

That's assuming the container itself is centered (is it the whole page?)

It's the whole page.

I assume you've dealt with the rock-bottom basics like giving each cell the same left and right padding and border, if any.

Yes, I just double-checked that.

What you need to look at is those two side cells or columns. What's their content? Is it about the same amount of material in each? Text or something else?

Both side cells contain roughly the same amount of text.

This is all assuming it's a bona fide table -- that is, there's a direct relationship among the items in each row * -- and not just a layout shortcut.

You got me, it's a layout shortcut. Is there a better way to do this?

Probably. But for future reference:

{table-layout: fixed;}

is a CSS term. It doesn't mean "use some specific number". It means that the table layout is based on something other than cell content. This can be a huge time-saver if you've got a long table, because the browser doesn't have to load up the whole thing and only then figure out how wide each column should be. Instead it looks only at the columns, if any, and then at the very first row. So if you want one column to take up only 20% of the table width it will do so, even if some of its cells contain huge amounts of information.

OK, now. You don't have a table. You have three columns of stuff, and you want the middle stuff to be exactly centered. The two basic approaches are

#1 set three divs to {display: inline-block;} with a max-width on each
or
#2 set the right and left bits to float right and left. The html has to be assembled in the order "left, right, middle"

:: wandering off to play with CSS ::

I've been experimenting with div's and floats but I can't get them to cooperate. I was able to get that middle table cell to center by setting the left and right cells to width:50%. Do you know of a way to achieve the same thing with div's?

Funny you should say that, because I played with css and it reminded me of why tables look so good sometimes.

But setting two out of three cells to 50% is probably not optimal, because some browsers will do the arithmetic and simply throw out the numbers.

:: detour to try what I suggested first, but never got around to testing ::

###. Missed the fine print that if your table's width is set to "auto" (either explicitly or by default) then user-agents are allowed to use {table-layout: auto} even if you've expressly said "fixed". Fortunately this is not a problem here, because you can set the table width to 100%.

For me this works:

table.container {width: 100%; table-layout: fixed;}
col.middle {width: 200px;}

<table class = "container">
<col>
<col class = "middle">
<col>
<tr>
<td class = "leftside">

... et cetera. Shove different amounts of text into each cell and it still comes out as intended. Well, not in MSIE 5 but presumably in some version dating from the present millennium it does.

:: looking around vaguely for someone who knows how to do it the right way ::

You could also do it with sandbags, two side-by-side divs and a background image, but that's sort of, er, cheating. (So's using a table, but never mind that :))

Ah, your solution works great! Thank you and please let me know if you find out how to do it with div's.