Table-based layouts were traditionally used to structure web pages, but using tables for layout leads to large file sizes, hard-to-maintain designs, and accessibility issues. CSS-based layouts are now widely supported by modern browsers and offer more flexibility while keeping file sizes smaller and pages lighter. CSS tableless designs allow for easier redesigns and maintenance while improving usability and accessibility over table-based designs.