It isn't about which is easiest to implement. No one said CSS(3) was super-easy. This discussion is also very old by now. I am surprised to bump into this view again.
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.
I agree with all the points you listed and that CSS layout is superior. However every time I use a CSS grid I find myself thinking whether the content and design are really separated. If I add classes like .col-1-4, .span3 or .three.columns to an element in the markup, doesn't that mix details specific to a certain design (or even one particular screen size in responsive design) with the content?
remind me of tables too. They tend to add a few unneeded or non-semantic div's. And they don't really separate content and design. It is a lesser-of-two-evils thing for me, because sometimes grids/frameworks can save me a lot of time. Ideally you'd use semantic-sounding classnames and don't include unnecessary div's.
I agree completely, which is why I'd say the solution is to use a grid framework based on Sass or LESS instead of vanilla CSS (I'm partial to Orbital[1], but I'm biased because I wrote it :P). If your column sizing can be applied via preprocessor mixins instead of CSS classes, it's easy to keep your HTML free from nasty non-semantic classes. If you hunt around on GitHub, many popular CSS grids have unofficial LESS/Sass ports as well.
I agree with all these statements. But the most important thing to point out is that CSS 1 and 2 and even 3 didn't solve the layout issues we needed solved. But there are improvements like native column support and true layout control coming. But damn, it's already nearly 2013.
Absolutely agree. The hundreds of websites devoted to explaining how to achieve a X-column fluid layout are testament to CSS's failings in this regard - seriously, layout as a problem has been solved for 15+ years [1].
We're finally getting some progress on constraint-based layout in the form of the flexible box model (great modern browser support), and CSS grid layout, which surprisingly enough is coming from MS.
I agree, the fact that it's almost 2013 and we're still wasting valuable brainpower on f*ing around with what should be trivial layouts is a bit of a shame.
Well that's because we accidentally took a publishing system designed for academia and turned it into the largest explosion of design and media in the history of mankind.
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.