Grids, tables, CSS

In a few recent posts, starting with the one in which he talks about the technique used for Sliding Faux Columns, and continued in CSS Gridlock and To Be Tabled, Eric Meyer argues that there are (rare) cases where tables are the best way of achieving a certain layout.

The point Eric is making is that if a design is grid-based, and the different parts of the grid need to line up both horizontally and vertically, no matter how much or how little content the grid parts contain, a table is the best way to create that grid. That is, assuming that you have to support (as in “look-the-same-support”) Internet Explorer, which most of us do.

Eric mentions the table-less way of creating a grid structure, and also says that he can’t really see the point in using anything but a table for a grid, considering that the CSS grid actually uses more markup than a table. That’s where I’m thinking that maybe there is a point. Flexibility, which in this case translates to accessibility and usability.

Imagine what will happen when CSS is off, and the page is displayed with the browser’s default rendering. A table grid will (as long as the browser supports tables) still display as a table, with the grid pieces of each row side-by-side. In some cases, like on a handheld device with a very narrow screen, this is likely to make horizontal scrolling necessary. In this case it would be better if the grid pieces dropped below one another instead of staying side-by-side. If the grid is created by using <div> elements and the display:table CSS properties, that’s exactly what will happen when CSS is off or unsupported.

Making table cells display one below the other instead of side-by-side is possible by adding the rule td {display:block} to your stylesheet. That obviously only works if CSS is supported. So, though I’m not really arguing against Eric here, I believe that there actually are cases where a CSS grid would be preferrable to a table grid.

Which brings me back to the main problem: supporting IE. Yes, as long as the layout has to be exactly the same in IE, Eric is absolutely right. No argument from me. For those few cases where it could be OK if IE renders a grid in a slightly different way, there are options. A while back I wrote a couple of posts of this: Equal height boxes with CSS and Equal height boxes with CSS, part II. The posts, and their accompanying examples were misunderstood by some, as can be seen in the comments.

I just want to point out that there are situations where the default rendering of <div> elements is preferrable to that of a <table> element, and, if a design will be acceptable in IE even if the heights of the grid cells in each row aren’t equal, using a CSS grid may be an option.

Posted on September 9, 2004 in CSS