During my whole lifetime as a web designer or better as a front-end developer, I have coded only one site using tables for layout, the first one. It was the time when I had just began to do web stuff and I did not know very much about CSS and its potential, if not nothing at all. After that, I got introduced to CSS and ever since I have never used table in any of my site development projects I have worked on. I thought it would be a good idea to write something about this subject for the guys who still use tables for web design layouts, especially those that develop wordpress themes. So, let’s begin:
1. Tables are hard to code and difficult to maintain
Let’s suppose you are a hand-coder, how do you manage to write all those <tr>’s and <td>’s without errors? It is a common error when you code with tables to have missing tags or misused ones. It is even more difficult when one uses a WYSIWYG. WYSIWYG editors operate with table layouts and usually, the code that they generate is very messy. The same occurs when you slice a design with Photoshop or GIMP. Using CSS, you will code at least half less tags than coding with tables. Managing <div>’s through CSS is a far more easier, fun and creative process.
2. Tables are slow to load
The web site created in tables will take more time to appear on the screen
that CSS based one.When using using tables, the page won’t show up until the browser parses the last closing </table> tag. Moreover, the more table you nest within each other, the more the content will break until the images and text figures out where they belong to in the site. Well, this is a solved problem with CSS, just tell it where to be and there it will.
3. Tables can hurt your SEO
The more code that is in the way, the more junk they have to plow through to get to your content. Nested tables, which are usually used in table-based website layouts, would hurt the content that is inside it. There are more HTML tags than content.
There is another widespread idea about tables that use left-hand navigation (very common in table layouts) hurt the SEO, by telling the search engines that content is less important that navigation which appears before the main content in the HTML. This will distort search engines and mislead them in indexing your site. On the other hand, with CSS, you can make the navigation bar appear on top, but you can put it at the bottom of your HTML.
4. Tables lack accessibility
The same as it hurts SEO, it distorts screen readers. Most screen readers read pages in the order that they are displayed in the HTML. If a screen reader were to read the same page described above, it is possible that the customer would hit the back button before the reader had even read through all the navigation. Through CSS, you can display the anything on the top, but leave the most important part at the top of your HTML.
5. Tables don’t print well
Another problem with tables is that they don’t print well. With CSS, you can use a print style sheet to give another look to the page. You can also have elements that only show up when rendered to a screen, but not to a printer such as headers and footers. CSS is great for printing.
6. Tables make site redesigns much harder than semantic HTML+CSS
Through CSS, you can twist your site look so much, that you won’t resemble with the old site at all. The most important part is that, all this can happen without touching the HTML part at all. You can even have several different skins for your site and allow your users to select one of them. This can happen only in dreams, if you are using tables. You cannot alter the layout at all, expect colors and font size, when you are using tables, even though you might be using CSS. Get rid of tables.
7. Conclusion
It might be hard to make CSS-controlled layouts cross-browser compatible, which is often used as the main argument against switching to pure CSS. True. But as soon as you finally do it, the experience is great. The more CSS tricks you learn, the funnier it becomes to test them and play with them to see what other effects you can achieve. Tables could never be so much fun.