How do I center a table-based layout on a variable width page?
Want a table-based layout to test a design, don't want to use CSS. Am using a table as the overall container for the page, so this method works fine.
<CENTER>
<TABLE ...> // overall page container table
<TR>
...
</TR>
</TABLE>
</CENTER>
However, the validator says that <CENTER> is depricated in HTML 4.01. How do I center this container table, without using CSS?
Thanks
plowter
Full Version: How do I center tables on HTML page?
I don't see how using one line of CSS could hurt you, but if you are dead against it use a doctype that allows deprecated elements and attributes. You should anyway, because if you don't use CSS I suspect CENTER isn't the only thing deprecated in your HTML.
What's pady's saying is that to allow deprecated elements like CENTER you could use a transitional instead of strict doctype.
He doesn't really believe much in that advice though.
For reasoning behind that belief . . . http://hsivonen.iki.fi/doctype/
and more opinion in this thread
He doesn't really believe much in that advice though.
For reasoning behind that belief . . . http://hsivonen.iki.fi/doctype/
and more opinion in this thread
QUOTE(plowter @ Oct 21 2006, 03:37 PM) 
However, the validator says that <CENTER> is depricated in HTML 4.01. How do I center this container table, without using CSS?
CENTER is deprecated exactly because W3C wants people to use CSS instead. In other words, if you don't want CSS you are almost per definition writing your web pages in a deprecated fashion unless you avoid all decorations. In fact W3C doesn't want us to use tables for layout either, only for tabular data.
Otherwise you could use a 100% wide three-column layout table, and put the content in the center column.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
body {
background: #000;
}
#wrap {
margin: 0 auto; /* margin 0 auto will center that box in your document */
width: 780px; /*size of your box*/
background: #fff;
text-align: center; /* everything will be written in that box will be centered horizontaly*/
}
</style>
</head>
<body>
<div id="wrap">
<table width="780">
<tr>
<td align="left">
content goes here
</td>
</tr>
</table>
</div>
</body>
</html>
hint: Div box wont be centered in IE incase of removed doctype
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.