Tables for Layout

As any sensible person wil tell you, it is wrong to use tables to handle the layout of your web page. The tables that they are talking about where they make that statement are of course HTML tables and even the person who originally thought up the concept of using HTML tables to do page layout now states that he was wrong to do so.

I disagree that he was wrong at the time since back then there wasn't any other way to place things alongside each other on a web page. The point at which it became wrong to use HTML tables for layout was the point at which all browsers started supporting the proper CSS ways of handling the page layout.Just exactly at what point you consider that to be depends on just how much control of the web page appearance you expect CSS to provide.

The introduction of CSS-P meant that there was at last a way to specify where in a web page that something should go. At first support for such positioning was rather limited but with the introduction of CSS 2.1 web designers were presented with not one but three different ways to determine the position of the content within the page. All browsers that support CSS 2.1 (which includes the latest version of all the popular browsers) support all three ways of positioning the elements within your web page.

The first of these ways is to use relative and absolute positioning. This gives you the greatest control over where you can position elements in the browser and relative to the other elements of the content since any element that uses position:absolute will be positioned at the location you specify relative to the position:relative element that contains it (or the web page if you don't put it in a relative container). This method of positioning elements will even allow you to overlap emements on top of one another within the page.

The biggest problem with using positioning is that if it isn't done properly then the page breaks as soon as you change the size of the browser viewport. Correct nesting of absolutes within relatives handles this but a lot of newbies tend to set everything absolute and don't think about viewport sizes other than the one they are using.

The second way is to use floats. A floated element is taken out of the regular flow of the web page and floats on the specified side of the containing element with the rest of the content of that element flowing around the floated element. Floats therefore allow us to place content side by side without having to concern ourself with viewport size.

The problem with floats is that you can't use them to overlap elements and they don't provide a way to make multiple elements the same height (unless you specify what the height of each element is).

Neither of these two ways of positioning the elements within the web page really provides a way to duplicate the positioning that is achieved using HTML tables. Of course these two CSS methods are actually a lot more flexible than tables in the way that they handle the page layout and therefore are an improvement on HTML tables in the way that a lot of the page can be laid out (even apart from the improvement achieved by removing the definition of the page appearance from the HTML). What neither of these two methods of doing page layout can achieve thoughj which can be achieved using tables is to make two elements the same height without having to specify just what that height needs to be (since if the available width changes or the size of the content changes then the height needs to change as well).

This is where the third of the CSS ways of positioning elements within the web page comes in - CSS tables. While most HTML tables are best replaced by CSS floats, doing so makes things awkward for when we need two (or more) elements to have equal height. Faux columns is a CSS hack to use a background image on the containing element to allow you to create the effect of two columns having the same height even though the two elements really have different heights. CSS tables does away with the need for the faux columns hack by providing us with a way to force the actual height of two (or more) adjacent elements to be the same height. All we need do is to specify display:table-cell on each element and they will be treated as if they are cells in a table and all forced to be the same height.

Why then does the faux columns hack get used instead? Well the problem is that the CSS table method of positioning things within the web page is the one that the browsers have been the slowest to support and while all modern browsers now support it, versions of Internet Explorer prior to version 8 do not support it. Use of this simple way of achieving equal height columns has therefore been held up by the people who have continued to use older versions of Internet Explorer. In order to ensure that their web paes look the same in those older browsers web designers have used the more complicated faux column hack and web novices continue to use HTML tables to achieve that result.

With the user base for older IE versions falling, a growing number of sites are dropping full support for those older versions. As long as a web page is still usable in older browsers the web designer who has dropped full support for that browser doesn't worry about the fact that the page doesn't look identical to the way that it does in the more modern browsers. Once a decision is made to cease full support for IE7 then it becomes practical to consider using CSS tables as one of the tools that you have for determining how your web page looks.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow