Sponge Project Blog ~ Web design in Tewkesbury

This is not a new debate and there are so many people commenting on it I can’t be bothered to link to any of them, they’re so prolific. Ranting aside I wanted to take the opportunity to dispel myths about table based layouts and say why semantic markup or web standards is the way to go.

Use the right tool for the job

This age old maxim rings true even in web circles, but is so often ignored. Semantic markup may sound complex and a bit techy, but is reality is very simple. The premise is to use the right HTML element for the right job. You wouldn’t use a saw to knock in a nail would you? For example if I want to display a paragraph of text, I’ll use the Paragraph element (p). This tells my web browser that the piece of text I’m adding into the page is a paragraph and should be treated as such. So my code will look something like this:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Less is more

The big benefit is leaner code. Using the example above again, I’ve written one line of code with one element for my text. If I’d done this in a table based layout I’d have to wrap it in a cell, within a row and maybe even add it as a table on it’s own. Quite quickly you end up with code bloat and a slow website, which is completely unnecessary.

Tables for tabular data

The table element and its children were created with one purpose in mind: the display of tabular data, or as the W3C state:

The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.

So the lesson for today is thus: “use tables for tabular data and the right element for everything else”.