There really is no “table vs div”. It is better to think about elements as a flow. So you get separation to:
– Inline elements: the things that follow the flow line by line.
– Block elements: the things that steal the entire “line” to themselves.
– Inline-block elements: the things that act as if they’re a single character on a line, but are otherwise treated like a block element.
– Table elements: the things that steal the entire “line” to themselves, but otherwise act kinda like they’re inline-block elements (no 100% width by default). And of course cells have their own special set of rules.
Then you have to remember these exceptions:
– Floated elements are not in the flow, but flow elements avoid floated space.
– Absolute and fixed elements are not in the flow. And also ignore floats.
Using floats to create layouts is a hack just like tables are, floats just allow for much cleaner HTML and better semantics despite not being the perfect solution. Flexbox and grids are coming in the future and those will make layouts less hacky in nature. In any case you want to learn how elements flow on the page, as that will also explain why `margin: 0 auto;` works in some cases and why it doesn’t work in others.
