Why aren't we supposed to use <table> in a design?

1) Tables shouldn't be used for page layouts because they are:

• Slow to render as the browser needs to download most - if not all - of the table to render it properly

• They require more HTML than non-table layouts which means slower loading and rendering, as well as an increased bandwidth usage

• They can be a nightmare to maintain as they can quickly get complex

• They can break text copying

• They negatively affect screen readers and may make your content inaccessible to some users

• They are not as flexible as using proper semantic markup

• They were never intended to be used for page layouts

• Making tables into a responsive layout is very difficult to control

2) Use a table for tabular data. That's what tables are for.

See also: Why are people making tables with divs?

Tables are for tabular data, not design. People often misunderstand the motivation behind making pages "tableless".

It is wrong to use tables to create your layout. You should use other elements for layout (divs, lists, sections, articles, headers, footers, asides, etc.). And you can achieve great effects with minimal HTML/CSS (leaving your code semantically meaningful, lightweight, and easy to maintain).

Of course, tabular data should be inside a table element. If you want, you can improve even the tables' semantics by adding thead, tfoot, tbody, th, caption etc. All those elements are intended to be used with tables, and believe me, they can make your table much more self-descriptive.

So, thing is, don't go with table-based design and use any HTML/CSS solution that fits. Start from HTML semantic markup, and then build up design with CSS. This should keep anyone safe. Use this as a rule of thumb.

Tables are supposed to contain data, and not design elements.