Using HTML Tables is an old out of date technique that isn’t used in today's industry. For an up to date article read What is Responsive Web Design.

There are some major differences when designing your layout to be used with Tables vs CSS. Most main factors are how flexible the design can be, how easy it is to maintain and the speed differences in render speed.

Tables Render Slower than CSS

All web browsers have to render table code line by line before it can serve the content. This can make your page visible render slower. In some case web developers will have tables nested in tables nested in tables. This makes it harder for the internet browser engine to decipher what you are trying to accomplish. Not only is this a problem for web browsers, but search engine spiders could read your page out of order and have content out of context.

You can put absolute widths and heights on your tables to have them reader quicker. But doing this you will have your webpage a fixed size. In most cases this isn’t a big deal. If you are coding to a liquid base webpage or a responsive design, where it adjusts itself to the resolution, keep this in mind.

If you use CSS, you page will flow accordingly, render faster and will have no issues with search engine spiders. It is what Google recommends.

Accessibility & Usability

When using tables you take away the different columns of your page, making the code layout out of order. This could make things hard for someone that need help with web accessiblity If someone is using a screen reader and our navigation is on the left column, content in the middle and extra links on the right. You would want your visitor to hear all the navigation, the all the content and last the external links.

If you have a table, it is going to read the first row of the navigation, content and external links. Then the second row of the navigation, content, and external links. This is a problem..

Using CSS and laying out your content in “divs”, keeps all information in its proper column. When a screen reader goes through the CSS div, it will read everything in the div before continue to the next part. For instance, the navigation div will be read, then the content div and lastly the extra links div.

All The Different Web Browsers

When a visitor accesses your site they might be using Internet Explorer (most likely), Firefox, Google Chrome, or maybe Safari. Tables do hold their sizes, widths and spacing across all types. With CSS, web browsers like to render elements a little differently.

This can be frustrating when learning CSS. Your element margins, padding and sizes could render differently depending on which browser you are using. The best method to get around this is using a “reset” css sheet before you layout sheet.

A reset CSS sheet with strip all default spacing, padding, and indentation for all elements in HTML. This gives you a clean slate to work with, without the browser trying to do it for you.

Another word of advice, test, test and test in all browsers periodically throughout your project.

Clean & Organized Code

When using tables instead of CSS you find yourself filling your page full of code. You need a bunch of HTML code, plus your external CSS sheet. In a table situation you need to have a <table><tr><td>Content</tr></td></table>.

In CSS you only need <div class="content">Content</div>. CSS has less code and a more organize approach. A website can be hundreds of lines of code. The less you have to worry about opening and closing element tags the better. This is a sure win for CSS and there isn’t really an debate.

Easy to Change and Update

When you need to change some design format or small tweaks with your web design, using CSS can make this painless and fast. Having a single CSS file to control all aspects of your website, gives you the ability to change one thing in one spot. For example, if you want to change your navigation to a different color. You just change the color you have controlled in your style sheet and every page is affected. You can do this with every element in HTML.

If you have tables, you would have to go in and change each individual table to get the effect to display properly. This can become a nightmare if you need to move an element to a different section of the page. You will have to change structure of the page to accomplish this.

Use CSS, Trust Me

Both of these elements are used throughout the internet. As the internet is moving forward, there are less websites using the table layout method. There are places for both elements but for your design layout you need to use CSS. The internet is changing and everything will be in this layout before It is all over.