<div> element instead of <table>?

Question

Duplicate of:

• Why not use tables for layout in HTML?
• DIV’s vs Tables or CSS vs. Being Stupid

---

Theres been a lot of talk lately about rather using div than table tags to make your pages more browser fiendly. Why is div better?

Answer 1

The key point here is using them for layout. There is nothing wrong with tables for tabular data, mind you. That's what they're for.

But when you are using tables for layout you create a very rigid page structure which doesn't usually play well with differing screen sizes, user agents (think mobile browsers or screen readers for blind people. Especially in the latter case you are destroying any order in which the content should be read to the user). Unfortunately tables are still one of the most robust mechanisms to lay out a page, since there are hardly differing implementations and they work for over a decade flawlessly—CSS is an entirely different matter here.

But basically it comes down to this:

Tables

• violate the distinction of content and presentation
• are unwieldy and unmaintainable in the long run, especially when trying to change the layout of multiple pages in a similar manner
• do not have strong semantic meaning, which is important for impaired people who may rely only on read-aloud text. Tables are read here line by line, column by column which is almost always not very helpful in table-based layouts

CSS Layout

• is harder to get right (at least for presentation)
• allows for (sometimes) clean separation of content and presentation. Note the sometimes as you often have to use multiple container elements in HTML to allow for some layouts and styles to work right since CSS has some limitations
• allows for better semantic meaning of the underlying markup iff you don't blindly use <div> and <span>. There are many tags that have a meaning and should be used as such. For example, don't use <div class="heading1"> when you could use <h1>.