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.
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">
I don't define fixed values.
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>
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>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>
....
...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!
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>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?
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:"
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.