I would have agreed with you maybe 2-3 years ago from a pragmatic standpoint, but the most compelling reason now for not using tables for layout is that they're not compatible with responsive web design. Table cells don't stack and can't be reconfigured like block-level elements.
You can get away with using "display: table-cell;" and the like inside components that are independent of responsive requirements, though.
Tables are for tabular data--designing with HTML/CSS isn't perfect, but using tables for layout is an even less-elegant solution. It leads to a markup soup of nested tags and tables and difficult-to-maintain codebase. Good design and good markup go hand-in-hand and often you need to strike a balance between flashy visual design and solid underlying structure. This is also why visual designers should understand how their designs get implemented in HTML and CSS--it will create a restraint and limit the amount of "hacks" you have to do to make a design work.
Also remember that not everyone views the web in a browser. Having well structured markup helps those that use screen readers or alternate methods of browsing the web.
I don't think this is true any more than "good print design and good postscript go hand-in-hand".
I don't think tables are the right way either, but they're too often the pragmatic way until CSS gets dramatically more expressive.
The "restraint" you're talking about is not something designers should have to accept —- not least because CSS appears to be being developed with insufficient concern for what designers would actually like to be able to do. If it wasn't, vertical alignment would have arrived long ago.
Table-based layouts will bite you down the road. Ever try to make a div that completely fills a td? Ever try absolute positioning in a table? It is tempting to use them because they are so simple and "just work", but they come with unforeseen consequences.
A key problem with table based design is accessibility: while table based designs aren't automatically a problem for screen readers and such, a great many are.
It also makes it far harder for other user agents to make the design fit in small spaces: many table based designs are completely unusable on mobile devices for instance. While the alternative might still not look nice in such an environment, it is more likely to not be completely impractical to use.
Of course if you are presenting something that naturally fits in a tabular structure, tables are the thing to use as that is what they are designed for.
Everyone who says using tables is wrong, is wrong. The only issue as far as I'm concerned is it is tedious to style tables, and you have to have <table><tr><td> all the time which is tedious to work with. All the other arguments are perfectionism. Even the accessibility argument is nonsense nowadays, it amazes me people are claiming screen-readers haven't advanced in 10 years. TEN YEARS AGO screen readers sucked with tables.
Because tables were not made for layout. They were made to present data in tabular form, and it's still perfectly acceptable to use table tags to show data. But using tables for layout is like chaining a bunch of cars to make a makeshift train, both can be used to travel, but a train was made to move a large number of people, and cars can only move small number of people. There are better tools available. That and tables result in some very ugly code structures. And see the upcoming flexbox model. I have tried it and it really feels more apt, a lot better than using floats and a hell of a lot better than tables when it comes to satisfying, good and perfectly predictable symmetric code.
Actually, the original W3C proposal for tables specifically mentioned using them for layout. I can't find a working link, but there's also a RFC:
The HTML table model has evolved from studies of existing SGML tables models, the treatment of tables in common word processing packages, and looking at a wide range of tabular layout in magazines, books and other paper-based documents.[1]
It was only later when table layouts began to be discouraged.
I'm no purist but I am in the mindset, "you wouldn't use a fork to eat soup".
I do agree though that it is a pain when something is easily achievable in tables but doesn't work in normal CSS. Vertical alignment being one of them.
What does annoy me is when you see people creating "CSS table" systems. I'm not being funny but that is just plain stupid. I saw a whole project dedicated to replicating the behaviour of a table.
I started developing when tables were fine to use for all layouts and I feel CSS was adopted as a layout too early without some very basic things being answered.
If it solves your problem there is nothing wrong with it. However, tables are considered problematic because they encode the layout of the page in the HTML. Ideally, you would semantically structure your page using HTML and add style and layout using CSS. This way of working would allow for maximum flexibility - you can restyle your page without ever touching the HTML. If you use tables it becomes much more difficult because the table already adds a certain fixed layout.
Unfortunately the real world hardly ever works like this.
I think people have gone too far with this mindset. I develop pages using a mostly semantically structured approach, but I'm not afraid to sprinkle layout-only elements where they make sense, especially when using grids.
On a purely practical level, using tables for layout makes it much harder to implement a responsive design where elements are arranged differently at smaller screen sizes.
The user gets what they want, the designer gets what they want, and the only people unhappy are some purists.
why? what about this is wrong?