Tables used to be the only option to design a webpage. Of course we are talking about as far back as the Model T is to the automobile. The entire webpage was one large table, which then dropped down into several smaller tables. Sometimes the extent of the tables was huge and in turn very difficult to manage.
Why reinvent the wheel? It worked before and still does.
Some themes think so. I still see themes for WordPress, X-Cart, and other systems (particularly freebies) that use tables as their primary means of layout.
For WordPress themes take a look at Atahualpa, or many of the other free themes. For X-Cart look at any of the past themes that came with the system. Fortunately, all newer versions of X-Cart come with CSS based layouts.
So let’s get on with the reasons.
1) Accessibility and Valid Markup
First of all, table based layouts aren’t even valid XHTML markup. The only way to use tables and to be valid is to use them in tabular based presentation. Tables are designed for presentation not for layout.
Tables even break most methods of accessibility such as screen readers. The blind rely on screen readers to read them what is on the screen. Table based layouts don’t flow the way HTML was designed. HTML was designed to be a descriptive language where tags have meanings and can be understandable in any context.
In addition, with table based layouts, since the natural flow is lost in order to layout complex designs, search engines have a lot more trouble reading the page. Not only is there a lot more actual code to display the layout but everything is segmented away and becomes muddy. A search engine’s ability to read your page is highly important to your rankings.
2) Speed
This is a big one, in fact I almost thought about making it number one, but invalid code seemed most important. Only recently though, Google has started placing relevance to speed. In addition, your visitors patience is getting smaller and smaller.
Tables have a couple of problems that effect speed. The first is, there is a lot more code to create a layout. And second, browsers wait to render a table until the entire table has been loaded.
The increased code increases the size of a page. And when speed is important every byte might count. They add up quickly. Search Engines have to dig through this code to find your text, and visitors have to download this bloated code to even see the page. And this isn’t even counting the fact that a browser has to wait for the entire table before rendering.
Broadband internet is spoiling your visitors more and more. It used to be that visitors would be as patient as to wait 6-7 seconds for a page to load. And your older visitors still have this patience. But the new generation, their patience has been reduced down to 2-3 seconds. Every second it takes a page to load beyond that time, you risk loosing that visitor to a bounce.
If you have a CSS file, this can be placed in a separate file. Search engines can ignore it since they don’t care about design, and visitors can cache it making every subsequent page load much faster.
3) Flexibility
This is a pretty big one if you ever decide to change your website. And even more so if you have any kind of system that uses templates to determine the design.
For example, take a look at WordPress. There are at least 4 template files that make up any single page. You have the main content area, the header, the footer, and the sidebar. These are all different template files to make it easier to edit and adjust the entire site at once.
If you are using tables not only does your table stretch out across all these files, but it makes it a nightmare for anyone to come in and edit the files. Someone or even yourself would have to go through all the files picking apart the tedious code that make up the table in order to edit it.
Let’s say I had a sidebar on the left, and I wanted to move it to the right. I won’t even go into the detail on how to adjust a table. But with proper CSS design it would probably only be a matter of editing two lines in one single file.
Sum it up
Everything has a purpose. Use proper code for layout. It will save you speed, make your site valid, potentially improve rankings and definitely make it easier to edit in the future.
But keep in mind that if you have tabular data to display, that is what tables are for. Hacking together a series of divs to create your data display is just as bad as using tables for the overall layout.
One Trackback