What are some clear and logical reasons for why we shouldn't be designing websites with tables? Where are the benefits, what has been driving this idea in the industry? When is it okay to use a table?
1) Tables shouldn't be used for page layouts because they are:
2) Use a table for tabular data. That's what tables are for.
See also: Why are people making tables with divs?
Tables should only be used when displaying tabular data. Otherwise, they are usually a poor choice for display.
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.
The real cause to not use tables is:
The default layout of a table is:
This tells the browser to analyze the table and fix the cells to contain the elements inside them, which takes some time. (this is why tables are so good for complex data)
Bottom line: the table will render after all the content inside it is rendered, as opposed when using for example DIV elements.
I use tables for web design structure in liquid mixed with fixed and I know many says tables are for noobs others says they are for old school guys those always says DIVS are the best but the truth is that tables are better for some thing and DIVS for other thing.
What is better a
Me and my old tables in my new 2015 web design can kick butts to anyone with my friendly mobile 100% width mixed with 2 side columns 200px each.
Obviously inside tables is ugly to put more and more tables, that's where DIVS comes handy. Tables can do things divs cannot and divs can do things tables cannot.
Those saying default table layout is fixed? I give you an example
Do you see the potential now? Take a look to it on PC and cellphone. Ah yeah and I don't even need bootstrap.
Now to do the same with divs you have to write a lot of CSS code to display align float and crap. Who wrote less code? Me! What does customers need? A guy ending a page in 1 year or in 1 month ?
Now lets improve the design with divs
So beautiful a 5 columns design layout using divs and tables.
Your answer is: they both together work better and is faster and it will look good on any design even on TVs and small cellphones.