How do I center an ID'd table using CSS?

likegluelikecrew · #1 (**permalink**) 10-19-05, 02:43 PM

I'm using Dreamweaver to create my CSS and I didn't see an align option in the dialog box. If I had a table named #tabledefault for example, what would be the coding to get it centered and a width of 90%?

Also, I noticed when I applied the cell padding to my table that I ID'd as tabledefault, the table that I had nested within it also got the cell padding applied to it, which I don't want. How do I get around that? Thanks big time!

We Are 138

rimian · #2 (**permalink**) 10-26-05, 04:46 AM

you have to nest your table inside an element that is centred or text-align the <body> of your document to centre. this only works in ie as text-align wont align anything but text in firefox.

try something like:
<div style="text-align: center;">
<table style="width: 90%;">
<tr>
<td>hello world</td>
</tr>
</table>
</div>

hope that helps

rid · #3 (**permalink**) 10-27-05, 02:35 PM

i think you only need:

Code:


  <table align=center width=90% bgcolor=orange>
    <tr>
      <td>This is my table</td>
    </tr>
    </table>

Quote:

Originally Posted by rimian

you have to nest your table inside an element that is centred or text-align the <body> of your document to centre. this only works in ie as text-align wont align anything but text in firefox.

try something like:
<div style="text-align: center;">
<table style="width: 90%;">
<tr>
<td>hello world</td>
</tr>
</table>
</div>

hope that helps

car-zone · #4 (**permalink**) 04-28-09, 02:14 AM

This is really just a reminder for myself. When using the DOM to dynamically hide and show table elements (like a table row), you can't use display = "block" to bring a table row back to life in Firefox; although, it works okay in IE. It's best to simply use display = "" so that Firefox correctly resets it to table-row and IE can still do what it does.I imagine other browsers behave similarly to Firefox.

harish · #5 (**permalink**) 04-30-09, 05:57 AM

Method 1
To center a table, you need to set the margins, like this:

Code:

  table.center {margin-left:auto; margin-right:auto;}

And then do this:

Code:

  <table class="center">
    ...
  </table>

At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well:

Code:

  body {text-align:center;}

Method 2

If you want your table to be a certain percentage width, you can do this:

Code:

  table#table1 {width:70%; margin-left:15%; margin-right:15%;}

And then in your HTML/XHTML, you would do this:

Code:

  <table id="table1">
    ...
  </table>

Note that I was using an id to describe the table. You can only use an id once on a page. If you had many tables on a page that you wanted to be the same width and centered, you would do this in your CSS:

Code:

  table.center {width:70%; margin-left:15%; margin-right:15%;}

And this in your HTML:

Code:

  <table class="center">
    ...
  </table>

  <table class="center">
    ...
  </table>

Method 3

If you want your table to be of fixed width, define your CSS like this:

Code:

  div.container {width:98%; margin:1%;}
  table#table1 {text-align:center; margin-left:auto; margin-right:auto; width:100px;}
  tr,td {text-align:left;}

Set "width:100px" to whatever width you need.

"text-align: center" is there for Internet Explorer, which won't work without it. Unfortunately, "text-align: center" will center all the text inside your table cells, but we counter that by setting "tr" and "td" to align left.

In your HTML, you would then do this:

Code:

  <div class="container">
    <table id="table1">
      ...
    </table>
  </div>