A CSS layout is better than a table-based layout, due to:
- Maintenance: Maintaining or redesigning a table-based layout is very cumbersome, especially with nested tables, because:
- Seperation of content and design: The content has to be changed, to change the design, and that is not a nice workflow.
- Accessibility: CSS designs allow much better for a user-specified stylesheet. Resize the browserwindow and tables keep sticking out, where with CSS you can change the order (put columns under each other). Screenreaders behave in a specific way for tables, they try to read the "summary", or they assume the table holds tabular data, reading it row by row. A table lay-out can therefor confuse.
- SEO: CSS designs make content stacking possible, tables only allow to put the content in the order of the table cells. Webmaster guidelines ask you to check for correct use of HTML, which tables for lay-out isn't:
- Semantics/standards: Use tables for tabular data. Provide a summary and table header if relevant and possible. Using tables for lay-out semantically turns your entire page into tabular data.
- Pagespeed: CSS allows for faster, progressive rendering. HTML tables take their width from the resulting table-cell: Content will jump around while rendering or some browsers even show a blank table before all content is loaded.
A CSS framework like this is far from hacky. Using tables for layout, because CSS is deemed too complex, now that is hacky.
Also, don't forget support for "display: table" is in near all modern browsers. If you really want to design lay-out like you are using tables, it is possible with CSS too.
For responsive designs, much more is possible with CSS than a 100% width table. You can't just slap a few lines of table and expect it to work well on an ipad.