I still use tables for layouting because divs and messing with positioning/floating never really clicked for me.
There are plenty gamified learning tutorials like https://cssgridgarden.com/
I like flexbox /grid: Though I've been staying with flexbox since I know it better.
firefox has some really good grid inspection tools built in.
But now IE is gone. Modern HTML Tables are fine as long as you know its limitations or basically dont try to do any fancy thing with it.
For some strange reason I see people keep saying aviod table at all cost. I dont get it. May be someone could explain it better.
PS. Get off my lawn.
Tables are not the correct markup for positioning various items here and there to create a layout on a 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?
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.