I was recently asked to write some HTML for a e-mail newsletter and I was forced to recall what it was like to design layout using tables (bleh!). Of course there are still some designers out there who argue that using tables for layout is just fine and that harking on about divs and the semantic web is overreacting. Admittedly, it’s very quick and easy to come up the desired structure using a GUI like Dreamweaver, but it’s just not good practice.
I’m ashamed to admit that when I first started learning HTML I used this method for layout. I remember having to use Dreamweaver to split the code and the design view just so I could locate the correct cell. Now I prefer to write all my code by hand and to see a page that is full of nested <tr>’s and <td>’s just makes me cringe.
A few reasons NOT to use tables for layout:
- Spaghetti Code
- This is made even worse when the code is poorly presented and the table nestings are all over the place, making it extremely difficult to locate the cell you want. Things get really complicated when you miss a closing tag somewhere. All this mess makes it much harder to maintain the code.
Here is an example of the code required to make a simple table:
<table> <tr> <td>Lorum Ipsum</td> </tr> </table>
and here is the equivalent without a table:
- Bad for collaboration
- Even if you are proficient with tables for layout, and I believe there are many designers who are, most other designers do not work that way. When someone else takes a look at your project they’ll probably want to steer well clear of it.
- Increased file size
- With all that extra code required to display tables the file size increases, thereby slowing down the loading of the page. It may not seem like a lot at the time but it all adds up.
- Bad for SEO
- With more code to inspect, search engines take longer to get to the content they are searching for. The higher the ratio of markup to content, the more your ranking will suffer. As demonstrated in the above code snippet, divs generally use less markup than tables. With HTML5 becoming mainstream, it would be wise to take advantage of new elements such as <header> and <article>. This is where the search engines will be looking for relevant content.