<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

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 2

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

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

Answer 5

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 6

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 7

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 8

I tell you my personal main reasons for using divs:

• Tables have just a static grid whereas divs are dynamic: A table's first row defines all cols (like in MS Excel). In the next rows you just can combine those cols but you can't change the basic layout you have defined within your first row. Divs are dynamic: you can create a patchwork, letting divs overlap or put some space between. Whatever you want. You are not forced to think in rows. You are free. Much more flexibility.

• Tables cause rendering and cross-browser incompatibility problems: Tables don't look always identical. Each browser gives you its own interpretation of the table and its content. Thus, a lot of uncomfortable surprises. One browser shows you your regular text as bold font. Another browser gives your table more or less margin to other html elements, hence, the tables aren't well positioned. It's hours of work to fix these problems with complicated workarounds. Divs always look the same in all browsers. Even the IE (who is well-known as a troublemaker to webprogrammers) is causing less problems if you are using divs.

• Divs render faster: Divs load faster than tables. Faster browsing between pages. Better look and feel.

Hope it helps. Cheers.

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!