How do you center a table?

Question

MidiMagic 579 Nearly a Senior Poster

18 Years Ago

How do I center a table horizontally in an XHTML 1.0 Strict web page.

The only reliable method I have ever found for centering a table uses the deprecated center tags?

In IE, the method used for centering images works, but it also centers the text in all of the table cells.

FF centers the text in the table cells without centering the table itself.

I want the table centered horizontally without centering the text in the table cells, in all browsers.

html-css web-design

4 Contributors
9 Replies
133 Views
2 Days Discussion Span
Latest Post 18 Years Ago Latest Post by MidiMagic

Dani AI

Generated 9 Months Ago

Short answer: use CSS, not the deprecated <center> tag. The simplest, standards‑friendly approach is to let the table itself control horizontal centering and explicitly reset cell alignment so content stays left‑aligned.

’s fixed‑width wrapper is a valid option when a known width is acceptable; was correct to warn about quirks mode — a proper DOCTYPE is required for predictable behavior. For flexible (no fixed width) layouts most modern browsers will center a shrink‑wrapped table when its left/right margins are set to auto; if the table is forced to full width by content or CSS, centering won’t be visible. ’s point about percent padding/margins is useful when a relative size is needed.

Two reliable techniques depending on support requirements:

Let the table be centered by giving it auto left/right margins and explicitly set its content alignment back to left (so parent text alignment does not cascade into cells).
If older quirksy browsers must be supported, wrap the table in a block whose text is centered and make the table inline (inline‑table/inline‑block); then set the table/td text alignment to left so cell text isn’t centered.

Troubleshooting checklist: confirm the page is in standards mode (correct DOCTYPE), inspect computed styles in browser dev tools to find inherited text-align, verify CSS property names (common typos: margin-left / margin-right), and check whether the table is being forced to 100% width. If overrides are needed, increase selector specificity rather than sprinkling !important.

Further reading: MDN documentation on margin, text-align and display.

All 9 Replies

binoj_daniel 14 Practically a Master Poster

18 Years Ago

Are you using fixed width? If yes then you can try this.

<div style="margin:0 auto;width:770px"> will be a horizontally centered div with width 770 pixels.
Then the Table
<table border="0" width="770" id="table1" cellspacing="0" cellpadding="0">

binoj_daniel 14 Practically a Master Poster

18 Years Ago

Then you may try this.

<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD HEIGHT="100%" ALIGN="center" VALIGN="middle" bgcolor="#CCFF33">
Text goes here...
</TD>
</TR>
</TABLE>

hollystyles 113 Veteran Poster

18 Years Ago

1. Don't mix HTML 4 transitional and XHTML style attributes. This will put browsers into quirks mode and your DOCTYPE will be ignored.

2. Keep your styles separate; in style tags in the head; or a separate stylesheet file with .css extension.

This should work in anything including IE 5.5 and IE5 Mac. It sets text-align center in the body. The containing div has its left and right margins auto set and a fixed width and text-align also centered. The table has its text-align set left to override the body and div center style.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Centered Block Elements</title>
    <style type="text/css">
        .body{
            text-align: center;}
        #divContainer{
            text-align: center; margin: 0 auto 0 auto; width: 750px;}
        #tblMain{
            text-align: left; width: 375px; border: solid 1px gray; border-collapse: collapse;}
        .td{
            border: solid 1px thistle;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divContainer">
        <table id="tblMain">
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MidiMagic 579 Nearly a Senior Poster · Answer 1 · 2007-09-21T00:33:18+00:00

MidiMagic 579 Nearly a Senior Poster

18 Years Ago

I don't define fixed values.

MidiMagic 579 Nearly a Senior Poster · Answer 2 · 2007-09-21T13:12:56+00:00

I don't want a table that is 100 percent wide. If I wanted that, I wouldn't need to center it.

I also don't want the rest of the text in the body centered.

I found something that works:

....

<style type="text/css">

.cenx {text-align: center;}
.cent {left-margin: auto; right-mrgin: auto;}

td {text-align: left;} 

</style>

....

<div class="cenx">
  <table class="cent">
    <tr>
      <td>
        .... table contents ....
      </td>
    </tr>
  </table>
</div>

....

autocrat 52 Posting Pro in Training · Answer 3 · 2007-09-21T13:30:31+00:00

...MidiMAgic...

You made that rather difficult for people to help...
You said no fixed width, no defined width, then you apply 100% for the Table Width.
:)

For just about anything...

margin: 0 auto;
text-align: center;

This works for almost every browser, no matter the element. The reson being that though IE stuffs up, it will use the test-align, even though it shouldn't.

Push comes to shove, you can always apply a wrapper div and apply the styles to that.

The other alternative is to margin/pad with %... tihs means you do not define a width for the item, you control it's width relative to the browser width.
(800px browser, with 10% pad/margin L/R = 640 item with 80 on L/R ... 1024 with 10% p/m L/R = 999 item with 102/103 on L/R.

You will also find it easier to center things with a width applied, even if it is percentile/relational.

Where you have applied the auto-margin, it should only work with a defined width that is less than the browser. If your table is 100% in width, it shouldn't be centered... unlessyou have a wrapper/container with a defined width (fixed,%,relational).

Otherwise it would still be going 100% of the page width!

hollystyles 113 Veteran Poster · Answer 4 · 2007-09-21T14:12:19+00:00

I don't want a table that is 100 percent wide. If I wanted that, I wouldn't need to center it.

Sorry I fail to see where I gave you 100% width table ??

I found something that works:

Not in FF it doesn't, not for me anyway.

I also don't want the rest of the text in the body centered.

ok how about this then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Center Block Element 2</title>
    <style type="text/css">
        #divContainer{
            text-align: center; width: 100%}
        #tblMain{
             margin: 0 auto 0 auto; text-align: left; border: solid 1px gray; border-collapse: collapse;}
        .td{
            border: solid 1px thistle;}
    </style>
</head>
<body>
    <div id="divContainer">
        <table id="tblMain">
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
        </table>
    </div>
</body>
</html>

autocrat 52 Posting Pro in Training · Answer 5 · 2007-09-21T15:10:49+00:00

As far as I know, a Table "Shrink Wrap" - default to the smallest possible width.
This is groovey - until you have a fair bit of content.
Then it can get ugly, fast.

Thus...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>
<title>Center Block Element 2</title>
<style type="text/css">
#divContainer
{text-align: center; width: 100%}


#tblMain
{margin: 0 auto 0 auto; text-align: left; border: solid 1px gray; border-collapse: collapse;}


td
{padding:5px;}
</style>
</head>



<body>


<div id="divContainer">
<table id="tblMain">
<tr>
<td>
<p>
Cell 1 sd fsdf sdf sdfs dfsd fsdfs dfsdf sdfs dfsdf sdfs dfsd fsdf sdfsfdsdfsd sdf sdf sdf sdfsdfs as dasd asd asda sda sda sda sda sd asd as dasd asd asd asd asd asd asd
</p>
</td>
<td>
<p>
Cell 2
</p>
</td>
</tr>
</table>
</div>


</body>



</html>

Will result in the table being full-width.
You will have no real control over the dimensions unless you apply dimensions.
If that is the design you are after, fantasic - otherwise you will have problems!

Also, double check in both Moz and Opera, as they tend to render tables differently... you basically have to Style Everything to do with the table to make sure it looks the same.

So, to center anything, you can use margin:auto on the item, or margin % on the item, or padding % on the parent of the item.
You can also use Text-align center on certain items (block rather than inline elemets etc.).

Also, is the table for Design/Layout or for content?

MidiMagic 579 Nearly a Senior Poster · Answer 6 · 2007-09-23T07:15:43+00:00

1. I didn't give a 100% table. binoj_daniel gave the 100% table width.

2. I specified I wanted XHTML 1.0 strict.

3. My style didn't work if you copied it, because I had typos in it. It was a long day, and by the time I noticed them, the stupid edit time limit had expired.

Instead of "left-margin:", it should say "margin-left:"

Instead of "right-mrgin;", it should say "margin-right:"

How do you center a table?

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers