<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

Here are the pros & cons of div-based & table-based design.

Answer 2

I think, this article explain it very well.

Answer 3

Because a table conveys a semantic meaning - being that you're currently displaying tabular data just like h1 means you have a heading. So if you use tables to format your output you are misleading the interpretation of the semantics of your code.

This can for example lead to accessibility issues for people using a screen reader.

Answer 4

most people goes on about how table is supposed to be used for data only and it introduces performance problem when you use it for layout purposes. Also, it is supposed to be more flexible because you can make <div> flow left, flow right and flow everywhere else.

However, IMHO it doesn't worth the effort. Especially when you have columns of controls that are supposed to line up properly with their corresponding labels, it just takes too long to get things to line up properly.

Answer 5

a few reasons:

1) div is more semantically correct in most cases. people who code their sites in table structure aren't using tables for what they're made for, which is tabular data. divs represent a "division" or a section of the page, so putting items in divs is more correct.

2) divs are more flexible and easier to style and maintain. you don't have to write <table><tr><td>Text here</td></tr></table> every time you want to say something when you can just write <div>Text here</div> instead. you can add css hooks (ie, classes or elements) to both tables and divs, but with divs it is infinitely more flexible.

3) table structured sites are just plain ugly :)

Answer 6

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>.

Answer 7

Using div is better than using table because of easy control of the in the design and it can be container for controls than table and the table is mainlt used to group data with simillar structure so it's design is for this task but div is considered as container mainly than table. I have found the difference between when gathering many controls and in the i can control the container but in table i got confused because i have to insert inside and its looping inside each other.

Answer 8

Using tables for layout was revolutionary for web design, but that was fifteen years ago and there was no other alternatives. It's because of this history that tables are even considered for layout today.

CSS based layout is much more flexible than table based layout. There are still a few things that is easier to accomplish with tables, but on the other hand there are a lot of things that is very easy to do with CSS that is very complicated or impossible to do with tables.

Answer 9

I am using CSS and tables and sometimes DIVs, but the tables are so comprehensive! And they look so nice in Dreamweaver, Frontpage... It is so hard to give tables up, but it seems like I will, because it is necessary to make my pages load faster!