Think Outside the Grid

Early web pages were one dimensional. The web page content appeared down the page in the same order that it appears in the page source. The introduction of tables into HTML changed all this by allowing elements to be placed next to one another. With tables web pages became two dimensional and it became possible to set out a fairly complex page layout provided that the layout could be mapped onto the grid structure that the table provided. This was not the intention of the table element (which is actually there to allow for the display of tabular data) but as there was no other way of breaking out of the one dimensional layout, tables became the defacto standard for web page layout.

In many ways this is unfortunate because it now acts as a barrier to many web page writers being able to discard tables for layout and use stylesheets to set out their page instead. Unlike tables, stylesheets were invented precisely for the purpose of defining web page appearance. Also unlike tables, stylesheets are not limited to a grid structureand only a minute fraction of what is possible with stylesheets is also possible with thables. Unfortunately many people are unable to start thinking outside the grid and limit themselves to that small fraction of web page layouts that can be done with tables rather than considering all of the possibilities of page layout that can be done using stylesheets.

If pages without tables or stylesheets are one dimensional and web pages using tables are two dimensional then web pages using stylesheets can be considered to be four dimensional. That comparison between two and four dimensions of possibility should give you a true indication of what portion of the total possible layouts that can be done with stylesheets that cannot be done with tables.

So what are these two extra dimensions that are possible with stylesheets? well one of them is the obvious third dimension of being able to have elements on your web page that overlap in front of other objects. For a very simple example of what I mean by this, consider a layout where you have one element at the left of the web page that takes up 80% of the window width. A second element with a fixed width of 200 pixels is required to appear at the right of the page. Where 200 pixels is more than 20% of the page width (which it almost always will be) this elementis required to overlap in front of the other element. How much it overlaps by will vary depending on the actual window width and so the overlap cannot be done by slicing up the content and placing it into a table and still be able to handle different window sizes.

As another example let's have one column at the left which takes up 70% of the page width. We also want three other columns of information to appear whichh are 150 pixels wide each. If the window is wide enough then these extra columns should appear next to one another, if iit isn't wide enough then they sould move under one another.

Any web page that requires the use of the position attribute in the stylesheet simply cannot be done using tables at all. In fact this is a good way of determining whether you should use the position attribute, iif you can see a way of producing the page layout using a table then you don't need to use the position attribute in order to create the same page layout using a stylesheet without tables.

The fourth dimension of stylesheets is being able to cater for different media by providing a completely different page layout. By using stylesheets you can have one page layout for the computer screen, a second for the printer, a third for handheld devices, a fourth for page readers, a fifth for overhead projectors and so on. The web page can be handled in an appropriate way for the particular device that your visitor is using to access the web. Without stylesheets the only way to handle this would be to create separate web pages for each different device then giving you the problem of identifying the device being used to determine which of perhaps half a dozen or more different pages to deliver. This also gives the maintenance problem of updating multiple web pages with the same content whenever that content changes.

Certainly some of these issues can be handled using either JavaScript or server side scripting in addition to using tables. The stylesheet solution doesn't require any such additional programming inn order to achieve all of these functions provided that the browser properly supports stylesheets. At the time of writing the only popular browser that doesnn't properly support the stylesheet commands to be able to produce fully four dimensional page layouts is Internet Explorer 6 and it can be made to handle many of these additional features through the addition of a few lines of JScript (in some cases directly inside of the stylesheet itself).

By thinking outside the grid you open up a whole range of web page possibilities well beyond that small portion of layouts that were possible using tables.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow