CSS: centering tables

onelin · Mar 4, 2004

For those in the know, I'm curious...

what's the proper way to center a table? I don't want to use <center> if I don't have to, but all of the CSS centering that I see is through text-align properties, and I can't recall if that affects containers.

screw3d · Mar 4, 2004

Try this (might or might not work):

Wrap a div around the tables, and use
{
text-align: center; // this is for IE .. its box model is fscked up
margin-left: auto;
margin-right: auto;
}

onelin · Mar 4, 2004

thanks. you know, I was JUST in the middle of trying that!!!

we'll see if Opera likes it

onelin · Mar 4, 2004

negative on that

You were right about IE, it did center it while opera and firefox do not.

There has to be a standardized way to center containers...

screw3d · Mar 4, 2004

Define the width of the table in your CSS. It should center it (works on Firefox)

screw3d · Mar 4, 2004

Here's something I whipped up quickly:

-------------------------------------------------------------------------------------

<html>
<head>
<style>
#wrapper {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 200px;
}
</style>
</head>

<body>

<div id="wrapper">
<table border="1">
<tr>
<td>aaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaa</td>
</tr>
</table>
</div>

</body>
</html>

-------------------------------------------------------------------------------------

onelin · Mar 4, 2004

Neat hack! However, I just tried it without a fixed width and it breaks

(200px works great, however 60% does not) ...em also appeared to be imbalanced

I tacked on a text-align: left for my table CSS to make sure it's text isn't also centered.

screw3d · Mar 4, 2004

Here's page: Linkie

I tried this on my previous code:

<html>
<head>
<style>
#wrapper {
text-align: center;
}

table {
margin-left: auto;
margin-right: auto;
}
</style>
</head>

<body>

<div id="wrapper">
<table border="1">
<tr>
<td>aaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaa</td>
</tr>
</table>
</div>

</body>
</html>

.. and it's working fine without the width now. w00t!

onelin · Mar 4, 2004

hey, you're right! simplicity wins out. I tested div in this exact manner, and you can actually simplify margin-left and margin-right as just margin: auto;
table works this way, too!

here's another css page I found

screw3d · Mar 5, 2004

:beer:

I have a whole bunch of useful links on CSS and xHTML. Maybe I should post them and request for a sticky!

Search

CSS: centering tables

onelin

Senior member

screw3d

Diamond Member

onelin

Senior member

onelin

Senior member

screw3d

Diamond Member

screw3d

Diamond Member

onelin

Senior member

screw3d

Diamond Member

onelin

Senior member

screw3d

Diamond Member

TRENDING THREADS