Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Does Ie 6 Center Your Table Content

Rated 4.23 (Ratings: 14)

Want more?

  • More articles in Code
 
Picture of jaylard

James Aylard

Member info

User since: 18 Nov 1999

Articles written: 7

With the release of Internet Explorer 6, some developers are discovering that content in table cells that used to be left-justified is now centered. The cause is a little obscure, but the solution is simple.

Basically, the problem occurs when both of two conditions are present:

  1. A table is nested within either another table or a block element (such as a <div>) where the outer table or block element has its align attribute set to "center", typically to create a "jello" layout where the content remains at the center of the screen.
  2. Internet Explorer 6 is operating in "standards-compliant" mode

Producing the Problem

To illustrate, here is a simple snippet of HTML code that will produce cell-content centering in Internet Explorer 6:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>IE 6 Centering Behavior</title>

</head>

<body>

<div align="center">

<table border="1">

<tr>

<td>Here is some data to make this cell a bit wide.</td>

</tr>

<tr>

<td>Is this cell centered?</td>

</tr>

</table>

</div>

</body>

</html>

In previous versions of Internet Explorer, this code could reliably be expected to display as in Figure 1, below:

Sample table as rendered in Internet Explorer 5
Figure 1

By contrast, Internet Explorer 6 centers not only the nested table itself, but also the content of its cells as in Figure 2, below:

Sample table as rendered in Internet Explorer 6
Figure 2

Fixing the Problem

The actual cause of this rendering quirk in Internet Explorer 6 is its new, standards-compliant rendering mode. Although it is unclear to me that the W3C HTML 4.01 Specification requires this behavior, the IE development team apparently interpreted the spec otherwise (or else it is a rendering bug that will be banished in a future release). So, the key to eliminating this problem is simple: turn off the standards-compliant rendering mode.

How, you ask? The secret is in the document type declaration (sometimes referred to as a doctype declaration, but not to be confused with the document type definition, or DTD). And here's how you do it:

  • The following doctype declaration causes IE 6 to render the page in standards-compliant mode:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

      "http://www.w3.org/TR/html4/loose.dtd">


  • But with a simple modification -- eliminating the URI portion of the doctype declaration -- IE 6 reverts to what is commonly called "quirks" mode, and renders the table in a manner consistent with previous versions of IE:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

In case you are wondering, the doctype declaration without a URI will validate using the W3C's validator. So, there you have it: compliant code that will help you stay centered, instead of your table cells. Happy coding!

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.