CSS positioning can be used to create the illussion of table-based layouts. Why not use table?
This is the number one reason to use CSS for layout. If you use tables for layout, you are writing invalid XHTML. Tables are only valid in XHTML when displaying tabular data — something created from a spreadsheet or database. It is tabular data and should be displayed in a table. Using CSS to position and layout your pages is the only valid way to get the designs you used to use tables to create.
Once a page is created with tables, they are usually very difficult to edit and maintain. While CSS positioning has a steep learning curve, once learned, designs based on CSS are easy to maintain. In many cases, it's just a matter of a <div> element surrounding the different sections of your text, and you're done.
The most common way to create fancy layouts with tables is to "nest" tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the Web browser to render the Web page. Conversely, CSS layouts load faster because there is less code and less to render. This means getting your site to a visitor quicker and with less stress on your host server.
Just like search engines, most screen readers read Web pages in the order that they are displayed in the HTML. With CSS, you can define a section as belonging on the left side of the page, but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.
When you print Web pages designed with tables the right side of the page is usually lost in the print version. And other pages will print sections on various sheets — wasting paper and ink. Conversely, with CSS you can actually create a separate style sheet just for printing, but that's another workshop altogether.
This is what we're working with a Table-based Design.
When we are done, it will look much like the original, only, it will be tableless.