How do you center a table?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 456,489 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,710 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 977 | Replies: 9

•

Join Date: Jan 2007

Posts: 2,604

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 119

MidiMagic

Offline

Posting Maven

How do you center a table?

Sep 20th, 2007

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.

Daylight-saving time uses more gasoline

•

Join Date: Dec 2006

Location: United States

Posts: 613

Reputation: binoj_daniel is an unknown quantity at this point

Rep Power: 3

Solved Threads: 15

binoj_daniel binoj_daniel is offline

Offline

DaniWeb Expert

Re: How do you center a table?

Sep 20th, 2007

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
Best Place to hunt for Code | Quality Web Designing | Custom Software

•

Join Date: Jan 2007

Posts: 2,604

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 119

MidiMagic

Offline

Posting Maven

Re: How do you center a table?

Sep 20th, 2007

I don't define fixed values.

Daylight-saving time uses more gasoline

•

Join Date: Dec 2006

Location: United States

Posts: 613

Reputation: binoj_daniel is an unknown quantity at this point

Rep Power: 3

Solved Threads: 15

binoj_daniel binoj_daniel is offline

Offline

DaniWeb Expert

Re: How do you center a table?

Sep 20th, 2007

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>

Last edited by binoj_daniel : Sep 20th, 2007 at 3:59 pm.

Binoj Daniel
Best Place to hunt for Code | Quality Web Designing | Custom Software

•

Join Date: Feb 2005

Location: Braintree, UK

Posts: 1,166

Reputation: hollystyles will become famous soon enough

Rep Power: 7

Solved Threads: 59

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: How do you center a table?

Sep 20th, 2007

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.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
<!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>

Last edited by hollystyles : Sep 20th, 2007 at 4:49 pm.

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Jan 2007

Posts: 2,604

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 119

MidiMagic

Offline

Posting Maven

Re: How do you center a table?

Sep 21st, 2007

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:

Help with Code Tags

(Toggle Plain Text)

....

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

....

Last edited by MidiMagic : Sep 21st, 2007 at 4:18 am.

Daylight-saving time uses more gasoline

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Rep Power: 4

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: How do you center a table?

Sep 21st, 2007

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

Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)

•

Join Date: Feb 2005

Location: Braintree, UK

Posts: 1,166

Reputation: hollystyles will become famous soon enough

Rep Power: 7

Solved Threads: 59

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: How do you center a table?

Sep 21st, 2007

•

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:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
<!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>

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Rep Power: 4

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: How do you center a table?

Sep 21st, 2007

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?

Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)

•

Join Date: Jan 2007

Posts: 2,604

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 119

MidiMagic

Offline

Posting Maven

Re: How do you center a table?

#10

Sep 22nd, 2007

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:"

Last edited by MidiMagic : Sep 22nd, 2007 at 10:20 pm.

Daylight-saving time uses more gasoline