Flexbox (for one-dimensional layout) and Grid (for 2-dimensional layout) really improved the situation and finally made floating and positioning obsolete.
My dad's employer didn't remove the Java applets from their website until I pointed out that navigation had been broken due to both Firefox and chrome having removed Java support. Until then, the menu showed pixelated hyperlink-blue text that changed color with a transition when hovered or clicked, and couldn't be used with the keyboard. Each link in the menu was a Java applet to take you to the next page.
No, that wasn't it. They didn't suck, and for a bunch of years IE was the best browser.
In the past there were no other options (no CSS positioning etc) so people used tables as a way to control content layout. They were actually pretty good for this, even though that's not what they were intended for.
Then CSS came along. Initially CSS was mostly exciting because it exposed a lot more fine-grained control over display properties like fonts, borders, margins etc than had been available in HTML attributes.
Gradually developers came to appreciate the value of what CSS was intended for - separation of content and presentation. Along with that realisation came the push for "semantic" markup, i.e. use appropriate HTML tags for the content, and stop using tables for layout (unless you are marking up actual tabular data).
For some years this was awkward though because CSS didn't provide good layout tools. So instead of true semantic markup you often ended up with "div soup" - lots of anonymous tags which exist just as containers for sake of achieving some hack with the CSS positioning system. And still a couple of things that had been simple to achieve with tables remained impossible.
But people persevered with the CSS hacks, for all the right reasons, until we get to the present day when I guess modern CSS has all the tools needed to produce any kind of layout, layouts that adapt to screen size, units that cope with Hi-DPI etc etc etc
But I think it's still appropriate to mark up tabular data in HTML with a table, and I would think they do a good job of that?
1. Less markup. It's way easier to have a unordered list and use flex or grid to get the layout in place. No giant soup of nested table tags.
2. How do you deal with responsiveness? A pretty typical pattern would be "have this set of elements horizontal on large viewports, then have it vertical on small viewports". Trivially easy with flexbox (just set flex-direction at a media query breakpoint) or grid (change the number of columns).
There are so many unpredictable edge cases to the magic of the table layout rendering algorithms that I would be hard pressed to recommend them for layout to anyone. I've seen the dark arts of what people do to make tables responsive and I want no part in it!
But honestly though there is a whole host of simple layouts that are a breeze with Flexbox or Grid that require precise contortions of the mind to produce with tables and the hacky css required to coerce them into order.
Rendering issued aside, it's a good idea to use tables for what their designed for: displaying data. Using elements how they're specc'ed to be used makes the web a lot friendlier to screen readers and friendly neighborhood spider bots.
I’ve built a layout back-end that rapidly prototypes the web-page with custom metal type, quickly hammers it into a wooden frame, and then runs it through a printing press and scans the result, which is then saved as a PDF, compressed, and sent to the user’s gopher client.
There are plenty gamified learning tutorials like https://cssgridgarden.com/