Build your own pages if you like - but not with tables

by Frann Leach

Many HTML beginners - and even some people who really should know better - use tables for laying out their website pages. Unfortunately, this is not a good idea, not just because laying out a table in this way is incorrect but also because it can cause problems. These include:

The World Wide Web Consortium (w3c, authors of HTML), provides divs for layout. Tables have been included in the spec. only for "tabular data", which means the sort of information you would expect to find in a table, like a list of products with prices, for example.

Because of this, a table row won't display until the whole of the contents have been loaded into memory, including any pictures. Most pages built like this are just a single row, so the whole page has to be loaded into memory before anything appears on the page.

This is because the height and width of the cells in the table cannot be fixed (because of differences in the way different browsers display content), but is calculated "on the fly" according to the size of the contents.
In Britain and the US (which are at the very least a sizeable proportion of the market) the law says that websites must be accessible to people with visual and other disabilities. Tables disrupt or prevent this accessibility.

Although accessibility is the law, there's little evidence of it being adhered to across the board, but as prosecutions increase (and they have started), this is likely to change quite quickly. As a case in point, anybody who went to the World Internet Summit in London in 2006 will have seen Tom Hua doing a demonstration of how to build a web page without paying a professional. He used a table so that he could have equal margins on either side and the actual page content centered between them.

My daughter and I found it very funny, although predictable, when his page took a long time to load - so much so that he started to go into the code, because he thought he had made some sort of mistake. But by his lights, he had not made any mistake. It's just that there was a lot of text in the central column, as it was one of those long sales pages - so the page was blank, apart from the background, until the cell had loaded. And this was on a broadband connection.

Tom built the page himself, saving a little bit of money, and probably lost at least 70% of his visitors before they even saw what he was offering, because they got bored waiting and clicked away. And his problem with slow loading was completely unnecessary, because there are other ways to create margins which do not have the same load problem. If you use a table for a page with a decent amount of content, just to center it on the page, it won't display until the whole thing has loaded, and on a less-than-perfect connection, your visitors are very unlikely to wait around long enough.

You have to remember that there are still people using dial-up and low speed broadband - and there are times when the internet itself is slow. You need to take everyone into account, because people on slow connections are just as impatient as the rest of us, but with more frustrating experiences to fuel it. It's been said that you have no more than seven seconds to catch your visitor's interest - don't waste it all on page load time.

A professional website designer will try to make every page load in 10 seconds or less at 56k, and to ensure that the part visible when it first loads appears virtually immediately. This avoids click-away - unless they don't like what they see, but that's another issue.

As I've said, tables can cause problems with accessibility, and in most of the English-speaking world accessibility is a legal requirement. Section 255 of the US Telecommunications Act 1996 and the Disability Discrimination Act in the UK cover this. So, although in the early days of the net, tables (or even frames) for layout were commonly used, they are no longer an acceptable option.

This is more particularly a concern with this sort of table:

Headline	Another headline	A third headline	Last headline
Line title	some data	some more data	even more data
Line title	some data	some more data	even more data
Line title	some data	some more data	even more data
....

this is because the reading software reads one row at a time, from left to right, making it quite difficult to comprehend.

Genuine professional web designers do not use tables to lay out pages. Instead, we keep layout and content completely separate, using cascading style sheets (css), in accordance with modern practice. This method also speeds up load time.

Tables do have their uses. For example, where it's just a visual thing, and there are no headings, but you just want to have, e.g. author in one column and title in the other, so that they line up. This doesn't harm accessibility (because a straight across read makes sense), or slow the page down (because each individual cell is quite small).

So, if you want to build your own web pages, go ahead. But please don't drive your visitors away because your page is so slow to load, or lay yourself open to prosecution because you aren't complying with accessibility laws.

Frann ("Tiggsy") Leach is the webmistress and owner of Free Easy Publications and TheWebsiteDesign.Co.UK. She lives in Edinburgh, Scotland.

©2007 Frann Leach. All rights reserved