PDA

Click to See Complete Forum and Search --> : Center aligning a table

matthurne
12-15-2002, 05:43 PM
Ok, here's the deal. I'm no fool but this isn't working out for me. I have a simple XHTML 1.1 page...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Tax Project</title>
<style type="text/css">
body {
text-align: center
}

.Heading {
font-size: 20pt;
font-family: Arial;
font-weight: bold
}

table {
position: absolute;
left: 50%;
border-color: #000066;
border-width: 10px;
border-style: dotted
}

td {
vertical-align: middle;
text-align: center
}
</style>
<script type="text/javascript">
<!--
function calcTax(subtotal)
{
return (Math.round((parseFloat(subtotal) * 1.06) * 100)) / 100;
}
// -->
</script>
</head>
<body>
<p class="Heading">
Tax Project
</p>
<table>
<tbody>
<tr>
<td>
Enter the subtotal cost of the product and then press the TAB key...
<br />
<label for="thePrice">Subtotal:&nbsp;&nbsp;</label>
<input type="text" size="5" id="thePrice" onblur="document.getElementById('theTotal').value=calcTax(document.getElementById('thePrice').value);" />
<br />
<label for="theTotal">Total Cost:&nbsp;&nbsp;</label>
<input type="text" size="5" id="theTotal" />
</td>
</tr>
</tbody>
</table>
<p>
&copy; 2002 Matthew Hurne
</p>
</body>
</html>

I simply want the table in this page to be in the center of the page. You know, what "align='center'" would have done in earlier HTML versions. I've tried posting on other forums and nobody has anything useful. You'd think center aligning something would be easy enough, right?

I figured "text-align: center" on the entire body would cause my table to be center aligned. Wrong. Everything else is centered, but not the table.

I don't want to use absolute positioning. Too elaborate for a simple page! Seems silly for my uses.

Any help would be appreciated!

P.S. I have attached the file as well, as a txt file since that is a valid file extension to attach...
ShrineDesigns
12-15-2002, 06:28 PM
apply align="center" to the table itself
or slap center tag around the table
Stefan
12-15-2002, 06:46 PM
To center something with CSS you need to

a) specify it's width

and then

b) set it's left and right margin to auto

IE/Win however is buggy and doesn't understand margin:auto. However IE also is buggy in another way, which you can take advantage of.
If you eg nest your table inside a div with text-align:center, IE/Win will center it, even if it should have absolutely no effect on the table positioning according to spec.

Thus if you do something like this you will get your block level content centered both in IE/win and nonbuggy browsers

<div style="text-align:center">
<div style="margin:0 auto; width:50%">
</div>
</div>

In your case you could do it eg like this

<body style="text-align:center;">

<table style="margin:0 auto;width:80%">


BTW, that XML declaration of yours, before the Doctype, it's triggering another bug in IE 6.
Thus even if it's correct, it's better to not use it.
matthurne
12-15-2002, 06:54 PM
ShrineDesigns: Thanks for your suggestion, but take note that the attribute "align" for tables is deprecated and not legal in XHTML 1.1. The same is true for the <center> tags. As such, this would work, but my page would not validate as XHTML 1.1!

Stefan: I took your suggestions and made these changes for the table:

#myTable {
margin: auto;
width: 300px;
text-align: left;
border-color: #000066;
border-width: 10px;
border-style: dotted
}

Of course in my table tag I have id="myTable". But you could figure that out ;-)

It worked like a charm...I now have a beautifully centered table.

Question: Why is it that this works? What is the mentality behind it? I guess I just don't associate margins with alignment, so it doesn't seem logical. Do you know?

Thank you both for your help!
matthurne
12-15-2002, 06:56 PM
Note: I just loaded the page in Internet Explorer 6. The table center aligned just fine...what is this bug you speak of?
Stefan
12-15-2002, 07:06 PM
Originally posted by matthurne

Question: Why is it that this works? What is the mentality behind it? I guess I just don't associate margins with alignment, so it doesn't seem logical. Do you know?


What you are doing when setting margin left and right to "auto" is taking advantage of the CSS rules for computing the margins when unspecified. Since you have a fixed content the remaining space is divided evenly between the left and right margin.

In short, yes this is the "official" way to center things with CSS.
Stefan
12-15-2002, 07:09 PM
Originally posted by matthurne
Note: I just loaded the page in Internet Explorer 6. The table center aligned just fine...what is this bug you speak of?

When you have the XML before the doctype, it makes IE 6 go into "non standards compliant"-mode even if you use a STRICT doctype.
It affects many things, eg makes IE 6 switch between mimicing the IE/win 5.x broken boxmodel amd correct behaviour.
matthurne
12-15-2002, 08:16 PM
Interesting about the xml declaration. I only have that in there because W3C's page on XHTML 1.1 said it "wasn't necessary" but "strongly recommended". What do you think?
matthurne
12-15-2002, 08:30 PM
Ok, I took out the xml declaration...no difference, still view fine in Internet Explorer...this is curious. :-)
Stefan
12-15-2002, 08:57 PM
Originally posted by matthurne
Ok, I took out the xml declaration...no difference, still view fine in Internet Explorer...this is curious. :-)

No it's not, becuse you are using the IE workaround I talked about

body {text-align: center}

Remove that text-align:center and see you table placed to the left in IE/Win :(
Stefan
12-15-2002, 09:00 PM
Originally posted by matthurne
Interesting about the xml declaration. I only have that in there because W3C's page on XHTML 1.1 said it "wasn't necessary" but "strongly recommended". What do you think?

Since it is optional and IE 6 is buggy with it, most people don't use the XML declaration.

Since you need to provide a metatag for the charset for old browsers that don't understand XML anyway, there is really not much point in keeping it in.
The only reason to use it is if you deliberately want to put IE 6 in "quirks"-mode, instead of standards-compliant mode.
matthurne
12-15-2002, 09:55 PM
Ok, I see what you mean after taking out the body style.

I'll take out the XML declarations in my pages if its going to cause me problems and it isn't necessary anyway. That means I do have to have the meta tag that tells my character encoding, correct?

I think that'll about wrap up all our discussions. Thanks a lot Stefan, I'll be sure to come back to this message board the next time I need help, which no doubt will probably be soon! Since I'm a freshman studying computer science in college, I mess around with all this constantly so I'm bound to run into another thing I wish I knew how to do...
Stefan
12-16-2002, 08:50 AM
Originally posted by matthurne

I'll take out the XML declarations in my pages if its going to cause me problems and it isn't necessary anyway. That means I do have to have the meta tag that tells my character encoding, correct?


As I said before, you need the metatag even if you would keep the XML declaration, becuse browsers that don't understand XML ovviously don't understand the chartencoding specified in the XML declaration.


Thanks a lot Stefan, I'll be sure to come back to this message board the next time I need help, which no doubt will probably be soon!

See you later then :)