'Web Design Help'

5 Reasons Why CSS is Better Than Tables

27 APR 2009 1

You've probably heard a developer or an Internet site extol the benefits of using CSS in coding, but no one really goes into depth as to why using CSS is so much better than tables... so let's talk about some of the specific reasons.

1. CSS is More Future-Proof Than Tables

Before table designs became popular, the weapon of choice for building a website was frames. These days, many frames-based websites you come across don't work or display properly because browsers don't handle them very well. In the same way, in a couple years from now, it's possible that something will come along and replace CSS as the preferred method of web development. If and when that happens, tables will be sliding back into the position that frames occupy now. While table tags will likely always be supported for tabular data, it's possible that future browsers won't handle table based layouts properly, in the same way they often can't handle frames based sites now.

2. CSS is More Efficient Than Tables

Comparing an identical design coded as efficiently as possible in Tables and CSS can reveal some surprising results. When done in CSS, you end up with about 42 lines of code between the body tags (the html tag responsible for starting where the actual website code begins), while in Tables you end up with 255 lines of code. While text does load fast, this is a significant issue, because you only have seconds to grab a new visitor's attention. Even losing a quarter of a second in loading your site can be a significant loss, especially when you only have a few seconds to grab a visitor's attention before they head off to the next site.

3. CSS coders are Generally More Professional

I'm not saying there are no professional web developers who use tables, but the fact of the matter is there is no tool out there that will let you generate a CSS based website from a graphical mockup with the click of a button. However, such tools exist for table-based designs. So, what that results in is a higher barrier of entry for CSS-based designing. It's an actual language that must be learned, as opposed to something that can be generated with an automated tool.

4. Savings in Bandwidth

This is a relatively minor issue for smaller sites, but when you get on to a larger site that's pushing more than 10 gigs of bandwidth, saving approximately 20% of your bandwidth can really add up. Note that this bandwidth saving is when looking at only one page - but when you start getting into multiple pages (like most websites are), there is even more bandwidth saved. Each page in a table-based website needs to reload all the content, while a CSS-based site shares a "style sheet" that holds the common styles for each page - so you only load the style information once.

5. More Flexibility

A CSS-based website is much, much easier to port to other mediums than a table-based website. Perhaps you would like to make every page in your site printable? In CSS, you can simply create a modified stylesheet that will allow all your content to be viewed in a print-friendly format. With table designs, you'd have to build a completely new page for each print-friendly page. This principle carries over into other applications as well: for example, if you want to make your website accessible via mobile browsers, you're looking at the same process for CSS and tables respectively.

Conclusion

I hope this has given you a bit more insight into why tables are an inferior choice to CSS-based designs. There are many more reasons why CSS is the better choice, and we'll probably explore those at a later date, but for now this should help you make more informed descision when it comes to your site's next redevelopment.

Fill out the form below to get started

find out what we can do for you 877 543 3110