The direct answer to your question is that the idea of "responsive" web design gradually took over when smartphones became popular. People liked the idea of not needing to create a separate mobile version of their frontend, and instead simply adjusting the styling and structure of the page in response to the size of the viewport. Tables were bad at this because you couldn't use CSS to arbitrarily move around the way a table is structured.
(The funny thing is that, in modern browsers this is no longer true - you actually can use CSS to restructure table layouts now. But, the world has already moved on.)
Though there's a broader answer, which is that generally as web design has modernized, so too have ideas of "semantic" markup. Semantically, table is supposed to be used to display data. HTML which is used for its proper semantic purpose is easier for screen readers, improving accessibility, and easier for search crawlers to make sense of the content, improving SEO. So a lot of old HTML tricks fell out of use when HTML5 started becoming popular.
> The direct answer to your question is that the idea of "responsive" web design gradually took over when smartphones became popular. People liked the idea of not needing to create a separate mobile version of their frontend, and instead simply adjusting the styling and structure of the page in response to the size of the viewport.
Table-based layout was already falling out of favour before this happened. Even when you had fixed sites that were predominantly desktop, divs and spans (coupled with CSS) made life a lot easier to put things where you wanted them and lay out a site faster. It was also cleaner when reading the markup.
From what I remember, the move away from tables happened around the same time external CSS took off and you could partition your site with reusable styling instead of framesets or tables.
Responsive design then sped up the process a few years later.
There was definitely an ongoing culture war between people who felt like using tables was not "proper", and people who just wanted their site layout to work consistently in IE6.
(The funny thing is that, in modern browsers this is no longer true - you actually can use CSS to restructure table layouts now. But, the world has already moved on.)
Though there's a broader answer, which is that generally as web design has modernized, so too have ideas of "semantic" markup. Semantically, table is supposed to be used to display data. HTML which is used for its proper semantic purpose is easier for screen readers, improving accessibility, and easier for search crawlers to make sense of the content, improving SEO. So a lot of old HTML tricks fell out of use when HTML5 started becoming popular.