Forum Moderators: open
<body>
<table align="center">...</table>
</body>
But now I'm trying to conform more with HTML4.01 standards, and it seems that the above centering technique doesn't work with Firefox or Opera. So, what is the best way to centre align a table?
Should I be applying a CSS class to do this, or what about:
<center><table>...</table></center>
Any ideas?
<div class="center">
<table>
</table>
</div>
The center tag is deprecated, though.
You are correct in that the CENTER element is deprecated [w3.org].
However, firstreflex is also correct, the align attribute is also deprecated [w3.org].
Welcome to WebmasterWorld, firstreflex!
jetnovo, a quick search over the WebmasterWorld forums [google.com] will turn up quite a few good posts on this topic.
and an official welcome to you, too!
As you are using tables for layout, I see no harm in using other depreciated elements as well, and using a Transitional doctype - because, let's face it, you're no further forward until you switch to CSS. Also, "depreciated" doesn't mean that they are going to disappear any time soon. You can still get your page to validate to HTML 4.01 Transitional, and it will still work for a long time yet!
Deprecated Tags
<applet> - use <object>
<basefont>
<center>
<dir> - use <ul>
<font>
<isindex> - use <input>
<listing> - use <pre>
<menu> - use <ul>
<plaintext> - use <pre>
<s> - use <del>
<strike> - use <del>
<u>
<xmp> - use <pre>Deprecated Attributes
align=
alink=
background=
bgcolor=
color=
hspace=
link=
size=
text=
type=
vlink=
vspace=Also, width= and height= are deprecated attributes for <td> elements [w3.org].
The recommendation is to define width for <table>, and let the
browser sort out the individual cells.[url=http://www.webmasterworld.com/forum21/1979.htm]Original Thread
A comment about table based layouts - strictly speaking, this practice cannot be deprecated. The whole thrust of the changes is to separate the content of a page from its rendering, so you might say table based layout is "discouraged."
But technically, table based layout is still valid mark-up. It is, however, just a bit trickier if the browser is in standards mode instead of quirks mode.
[edited by: tedster at 2:54 pm (utc) on July 2, 2004]
Attribute definitions
align = left¦center¦right¦justify [CI]Deprecated. This attribute specifies the horizontal alignment
of its element with respect to the surrounding context.Possible values:
left: text lines are rendered flush left.
center: text lines are centered.
right: text lines are rendered flush right.
justify: text lines are justified to both margins.W3C Page [w3.org]
vertical-align: and text-align: are two of the available css rules that can substitute
[w3.org...]
[edited by: firstreflex at 3:43 pm (utc) on July 2, 2004]
One more argument in favour of CSS layout, I suppose - not being able to centre align tables that way is going to hurt a lot of designs.
OTOH, centre aligning is no picnic in CSS, either...
Another approach is absolute positioning at left:50%; with a negative margin-left that's exactly half the width of the table you want to center:
table.centered {
width:700px;
position:absolute;
top:0;
left:50%;
margin-left:-350px;
}
Almost as good cross browser as the nested tables. But it is a bit of a hack, even though valid.
If you approach this "philosophically", you see that the align attribute is about presentation, and not content - and the whole intent of all that deprecation was to remove presentation information from the HTML and into CSS.
More on td align here:
[w3schools.com...]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table>
<tr><td align="center">Centered</td></tr>
<tr><td align="center">1</td></tr>
<tr><td align="center">11</td></tr>
<tr><td align="center">111</td></tr>
<tr><td align="center">1111</td></tr>
</table>
</body>
</html>
...and it validates. However, although the Alignment [w3.org] argument here only discusses the meaning of the align attribute for text, I agree with tedster in that we would be well to focus on removing presentation from content.
Yes, separation of content and presentation is the direction of all these W3C changes in recent years. W3C paper from 2003: [w3.org...]
As that paper mentions, HTML began from an SGML "starter set" of tags that IBM had developed - and that inheritance included things like <b> and <i> which are not strictly semantic in their function. So even though the separation of semantic content from presentation is the current direction and the major reason for many deprecated elements, the separation is not yet accomplished in full.
But we've strayed (just a small bit) from jetnovo's initial question about best practice for centering a table on the screen. We have however, built a context for that discussion. Are there any more comments about this thread's question? One factor we've barely touched on is the DTD.
I'll be in a position to play around with the various solutions later this week - you've all given me much to think about, thanks again.
I'd say it was pure layout, which presumably means it must be replaced by CSS content. How would you do that exactly?
Methinks it must be considered as pure content, even though it isn't.
Kaled.
