Why Tables Are Bad

Many of our clients create their own websites – either for themselves, or on behalf of clients. Whether you are a small business owner creating an ecommerce site via a Professional Hosting account, or a designer creating client sites with a reseller hosting account, you’ve probably used tables in your designs.

Over the past few years many changes have been made in the way people design and build websites. One of the most widely discussed change is the use of DIVs over the tables for the structure of websites. In this article I’ll explain why we shouldn’t be using tables and how to implement alternative methods using DIVs.

Tables are confusing
Tables require considerably more code than DIVs. If you compare the table:

<table>
<tr>
<td>This is the content</td>
</tr>
<table>

With the DIV:

<div>This is the content</div>

You’ll see the table can quickly get complicated as much more code is required. This means with a huge number of tags it’s far easier to make mistakes and once the website is complete they’re much harder to maintain and amend. More code also means the website takes longer to load, that means using more bandwidth, meaning the website is potentially more expensive to run.

Tables are for data
Tables are meant to be used for tabular data storage so using them for layout structures means they’re being used incorrectly. They should only be used for displaying data, i.e. a table of product features or a shopping basket.

Tables are not accessible
Tables destroy the logical flow of the web page, especially when tables are nested within other tables. When people use screen readers, the web page is read out in the order it’s coded. When using tables, the content isn’t necessarily coded in the order it’s displayed on the page, for example: the content first, then the navigation, then the footer. This means users can get confused and lost navigating around the website.

The alternative
The much more accessible, usable and easy alternative to tables are box elements, i.e. DIVs, styled using CSS. You can specify the size (i.e. 800px x 200px) and position (i.e. 25px from the left, 10px from the top) of the DIV allowing you to easily build up the page without the complex coding of tables.

In terms of search engine optimization (SEO), SEO friendly elements such as headings, paragraphs and lists can be used to specify different types of content and text – meaning a potentially higher ranking in Google and other search engines. Box elements are coded in a logical order meaning they are easily understood by screen readers which increases accessibility.For further reading about why tables are bad, plus box elements and how to use them I recommend the following links:

http://webdesign.about.com/od/htmltags/ss/aa121602a.htm

http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell