the_title();

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

6 Comments

  1. Tables may be bad, but mis-placed apostrophes are even worse 🙂

    The plural of is or arguably s but certainly NOT ‘s

  2. Eeek – the table tags were stripped out of my reply

  3. Tables are not accessible”

    Only when misused. 😉

  4. Tables are really only “bad” when misused as in the way they are used by design programs such as Dreamweaver. The current fashion of using programs like this, or the equally unprofessional “template” designs, are indications of how low web development has dipped. Quit being so lazy and write some code.

  5. I have made websites in tables easily but when using div’s i get many problems. For example, i am never able to center the page for different resolution types, when content is added in design views it is always shifted when previewed in browsers. I would like to know how to solve these problems and many more but I am never able to find the right answers, therfore my websites all use tables.

  6. Phil W, to centre a page you need to set the margin of the div in the CSS to ‘0px auto’. This will set the div in the centre of the page whatever the resolution.