100% Table Height

Occasionally designers may want to center content in a web page and they want it centered both horizontally and vertically. The traditional method for doing that is to put the content into a table and to assign a values of 100% to the table's HEIGHT attribute and center to the ALIGN attribute. Recently, that approach has become more problematic.

You may have used this before and had it work but now, for some reason, new pages you create won't center vertically. You may be changing pages from standard HTML to XHTML and now tables don't respect the 100% HEIGHT attribute. Read on.

There are a few things you need to know here. There is not now, nor has there ever been a HEIGHT attribute for tables. Scour the HTML specifications and you will not find HEIGHT among the attributes for the table tag. The fact is, table height is invalid code. If you attempt to validate a page where you have assigned a height to a table, it will fail. Assigning a height to the table tag is not the answer. You can, however, legally assign a height using CSS.

Rendering Modes

But why, you ask, did it used to work and now it doesn't? Without going into a lot of specifics, the answer is that it has to do with the browser's rendering mode as determined by the document's DOCTYPE. You can read a lot more about that subject on Eric Meyer's companion site for his book Eric Meyer on CSS. The point is that browsers, rendering pages in quirks mode, expand tables to fill the 100% HEIGHT. Browsers rendering pages in standards compliance mode don't. That means that, if a page has a full and proper DOCTYPE, including the URI, or if it uses an XHTML DOCTYPE, the browser will render the page in standards compliance mode. If a page does not have a DOCTYPE, or if it has a partial DOCTYPE without the URI, the the browser will render the page in quirks mode. Newer web design software has begun inserting the full DOCTYPE in pages, so the pages get rendered in standards compliance mode.

Now don't get ahead of me. About now, you're thinking that all you need to do is remove the DOCTYPE and your tables will render the way you want them to. There are downsides to depending on quirks mode to render your page. Rendering pages in quirks mode, browsers use all the old bugs from prior versions, which means that you are less likely to get consistent rendering across different browsers and/or platforms. You wind up paying a hefty price to obtain your goal.

Fear not! There is a way to accomplish this, without resorting to quirks mode rendering. The answer will not make the invalid code magically become valid, but it will work in most browsers except for Internet Explorer on the Mac platorm.

Why Percentage Height Fails

Okay, to begin, maybe I should explain exactly why 100% height fails. Contrary to popular opinion, it is not because the browser ignores the invalid HEIGHT attribute. The real reason it fails is that the browser does not expand the HTML and/or BODY (depending on the browser) to fill the browser viewport. The browser is in almost all cases, in fact, rendering the table as 100% high. The problem is that it is 100% of the containing element (HTML and BODY), which may not be as high as the browser's veiwport. The HTML and BODY tags represent block elements that automatically expand to fill the width of their container, which is the browser's viewport. They do not expand vertically. That can be fixed. Consider the following CSS:

   html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }

What does that do? That CSS tells the browser that the HTML and BODY elements have no padding, margin, or border and that their height is 100% of their containing elements. The containing element is the browser viewport! The margin, padding and border are set to zero because failing to do so would mean that the browser would use its default values and the margin and/or padding would be applied outside the 100% resulting in a scroll bar even when none was really needed.

Using Valid Code

If you're interested in writing valid code, you still have a problem because, in case I failed to mention it, table HEIGHT is invalid. Now you need to decide which is more important to you, writing valid code or getting the 100% height to display in Netscape version 4. Netscape 4's old and buggy implementation of CSS fails to render the CSS specified height.

If you can accept that NN4 will not display the 100% height, the "proper" way to do it would be to set the table height using CSS. My recommendation would be to create a ID selector in your style sheet that could be applied to a particular table. That way, you needn't worry about all tables on the page being affected. The ID definition might look something like this:

#fullheight{height:100%}

You would then apply the fullheight ID to your table like this:

<table id="fullheight" ... >

Vertical Centering

Now that we have achieved 100% height with our table, it becomes a simple matter to center content. Let's take the following CSS:

   html, body, #wrapper {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
   }
   #wrapper {
      margin: 0 auto;
      text-align: left;
      vertical-align: middle;
      width: 400px;
   }

Use the above CSS along with the following HTML:

   <body>
   <table id="wrapper">
      <tr>
         <td>This is centered</td>
      </tr>
   </table>
   </body>

The results

Okay, I know that this discussion has been a bit longer and more involved that my usual "examples" and the reason is that I thought it was important to understand how and why the results are what they are. Here are four examples you can look at. Each will open in a new browser window and you can view the source code to see how it's done. The first three examples use exactly the same table markup. The last one uses CSS to style the table and set its height, which is perfectly valid.

Like I said, this technique works in almost all browsers. The exception is Internet Explorer on the Mac.

Good luck!