As the title says I was wondering whether using tables for responsive web design still a thing in 2018?
What are the pros and cons if I do use tables instead of semantic markup apart from SEO?
In HTML, tables should be used for tabular data, not for layout. This is a universal truth which holds true for all platforms.
What kind of layout are you trying to achieve? Most layouts can be achieved in CSS these days. Depending on the problem, consider using Flexbox (which is widely supported) and Grid Layout.
That said, this question has little to do with UX.
Using tables is definitely not a thing when it comes to responsive web design - I'm not sure if it ever was. Back then, people weren't looking at websites on tablets or their smartphones because there were only clunky computers to view them. If you build a layout with tables, I'm not sure how you would optimize that for smaller screens.
Pros
Maybe it'll remind you of the Space Jam website and give you a good laugh? But it would probably be a good source for what NOT to do when creating a responsive website.
Cons
What @insertusernamehere said, pretty much! Semantic markup helps with accessibility too. HTML and CSS has evolved over these years to make implementing responsive design easier so make use of it. :)
div|span
do not. CSS view: Refactoring a table for different screen sizes can become very inconvenient as you have to deal with at least three levels of nesting and an inflexible structure. However, you can use CSS’display
property to use a table-layout without changing semantics.