Whether your a fan of Microsoft or not, web developers worldwide can take today and rejoice in Microsoft's release of Internet Explorer 8. Microsoft first confirmed that IE8 had rendered the Acid2 test correctly on December 19th, informing developers that CSS2 was fully supported by the browser. This news provides all sorts of relief for the endless amounts of hacks developers have had to implement over the years to fix quirks in both IE6 and IE7. 

Among the many advantages provided by the new IE8 is a major improvement in how we layout web pages using CSS. IE8 supports several new values for the display property including several table-like values. table, table-header-group, and table-cell are just a few of them. These values allow you to layout DOM elements in a grid resembling a table using rows and columns. These display properties act like their HTML counterparts but let me stress they are not the same. HTML Tables are for markup of tabular data. CSS Tables are meant to layout regular DOM elements in a table-like manner.

westwardwd.com and How We Use CSS Tables

When we decided to develop this new website we looked to the future for what browsers we would need to support and decided to leave some old browsers in the past, giving them an obviously less enjoyable experience. We chose to use CSS tables for the main layout of the page.

This decision comes with several consequences. First, IE7 still has a commanding market share and it does not support the new values. Using some of those old, pesky IE quirks it is easy to create a cascade of CSS files providing new browsers with table display values and the older IE family with a separate set of CSS rules. For the short term, however, this does mean taking the extra time to develop another layout file for the lesser browsers. For this reason, we decided support layout features for the site in IE7 and above. IE6 renders without a layout file (we are considering removing colors and textual styles as well). We are working on providing a message to IE6 users asking them to upgrade to either IE7 or IE8. For the meantime, they are simply given a less enjoyable experience. 

westwardwd.com rendered in IE7. 

westwardwd.com rendered in IE6.

 Setting Up Your CSS Files

The key to using CSS tables for layouts starts with how you setup your CSS files. We start by following a structure similar to the one in Aaron Gustafson's article, Progressive Enhancement with CSS published on A List Apart.

First, we will create a layout.css file which will import in different layout files depending on the media type (e.g. screen, print, or mobile). Our screen.css file will layout the page using CSS tables. Because IE7 and below do not support specifying the media type after an @import statement the files will be ignored by the browser. For these lesser browsers we will create iex.css files, respectively. These files can be loaded in for IE browsers only using conditional comments.

In all you should have 5 to 8 CSS files: layout.css, colors.css, type.css, screen.css, ie7.css, and ie6.css if you decide to support some sort if IE6 layout. You can also create print.css and mobile.css to support their respective media types. We will not be addressing either of those as they are out of the scope of this article.  

laying out your CSS files for old and new browsers.

 A Quick Introduction to CSS Tables

This article will not be a full tutorial on the power of CSS tables but I will give a brief overview and then mention some important notes and features.

There are nine table display values: table, table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, and table-caption . For now, lets ignore table-column-group, table-column, and table-caption. 

Most of the values act as expected. An element displayed as a table row displays it and its children in a single row. Table cells are displayed adjacent to one another in a row. Rows are stacked vertically in a table, row group or header/footer group. 

Anonymous Table Elements

One of the most important aspects of CSS tables are anonymous elements. Anonymous elements are best understood by example, but simply they are elements created anonymously with a display value set to one of the table display values in place of missing elements. This process is necessary for the table model to work.

For example, if two divs are laid out as table cells an anonymous table and row will be created surrounding the two elements if their parent's display values are not set to display as a table row and their grandparent's display value is not set to display as a table. This means the row and table will be implied and the browser will act as if they are there. This process does not actually affect the parent and grandparent elements but instead creates anonymous elements around the elements displayed as table cells. 

Easy Source-Ordering

Two of the new values, table-header-group, and table-footer-group  provide an easy way to implement a source-ordered page. This website implements this feature and was an important factor in deciding to ignore support for IE8. Using header and footer groups for source-ordering ensures that IE6 renders our content above the navigation and footer.

Content renders at the top of the page in IE6. 

Navigation and footer are at the bottom of the page in IE6.

 The Firefox Quirk

Firefox has a well-known quirk when rendering anonymous row elements. Sometimes when rendering two adjacent cells (as in the example above) without a row element explicitly defined the layout will break and render the cells stacked on top of one another. To stop this simply add a containing div with its display value set to table-row.

 Where to Go for More

If CSS tables have caught your attention, which by now I'm sure they have there is a great reference published by Sitepoint. Everything You Know About CSS is Wrong by Rachel Andrew and Kevin Yank is a great, quick read for any developer ready to take the leap to CSS tables.