The many benefits of CSS-based tableless layouts are ...
In our opinion, one of the biggest benefit of CSS-based layout is it is much more easier to update and change.
If you have ever try to change a table-based layout that contains duplicate width attributes all over the place, nested tables within tables, and excessive use of colspan and rowspan, you can understand how difficult a table-based layout is to update and change.
The code of CSS-based layout is much cleaner with less clutter because it provides separation between content and presentation. The content is in the HTML file and presentation of that content is control by the CSS stylesheet. This make updates and maintenance of sites easier.
When you have related content and thoughts placed in different cells in a table-based layout. Screen readers for the blind will have trouble reading the content in context.
CSS-based tableless layout have discrete content placed in their own container divs, which are laid out pretty much in sequence in source-code order.
In general, CSS tableless layouts are based on "div" tags, whereas table-based layouts are based on "table" tags which brings along all its children "tr" and "td" tags. Hence CSS tableless layouts in general contains fewer code and tags.
Because of the few tags used, CSS tableless layouts provide a higher content to code ratio and put content higher up in the source order. Search engines love this and generally this will improve SEO.
References:
SEO Overhauls with CSS
Again, because of the lesser number tags, there is less code that goes across the wire and hence theoretically should be faster. We say "theoretically" because any performance gains are not generally perceptible by the human eye. As Wikipedia mentions, "the bandwidth savings are generally minor at best. It is perfectly possible to build a web page with tables that is lightweight." Just as it is perfectly possible to build a lightweight tableless web page. The "weight" is less influenced by the code than by the images.
Semantics refers to the concept that one use tags as they are what they are designed for and what they actually mean. So "purists" will say that "table" tags means tabular data and hence should only be used for that and not for layout purposes.
CSS-based layouts use "div" semantically as containers of content and do not use "table" for positioning.
Douglas Bowman presents use and benefits of tableless design in video and in slides.
Wikipedia Tableless Web Design
"Going Tableless: Why CSS Should be used for layout"
Seybold slide pages with illustrations
