Center a table with CSS
The old way to center a table was easy:
<table align="center">
...
</table>
The "align" attribute has been deprecated, however, in favor of CSS (Cascading Style Sheets), and this is a good thing. However, it's not so obvious how to center a table using CSS.
The obvious way might appear to use the CSS "text-align: center;" somewhere, maybe like one of these:
<table style="text-align:center;">
OR
<div style="text-align:center;">
<table>
...
</table>
</div>
OR, if you get really desperate,
<body style="text-align:center;">
<table>
...
</table>
</body>
None of these will work. The table itself will be left-aligned, but all the content in the table cells will be centered.
Why? Because "text-align" applies to inline content, not to a block-level element like "table".
Method 1
To center a table, you need to set the margins, like this:
table.center {
margin-left:auto;
margin-right:auto;
}
And then do this:
<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:
body {text-align:center;}
Method 2
If you want your table to be a certain percentage width, you can do this:
table#table1 {
width:70%;
margin-left:15%;
margin-right:15%;
}
And then in your HTML/XHTML, you would do this:
<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:
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
And this in your HTML:
<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:
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:
<div class="container">
<table id="table1">
...
</table>
</div>
Once again, I'm using an id. If you need to center several tables the same way, use a class instead of an id.
