5

This is something that makes me crazy every time I see it. Why is using div elements almost an obsession?

I understand why having mostly divs in the markup, each one with an id or (even better) a className can help develop a clean markup and keep control of visual changes.

But, for example, I keep seeing questions about how to make divs behave like a table, and even when they are told somethings will not be compatible with x or y browser version, they still want to do things like this:

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">Content</div>
        <div style="display: table-cell">Content</div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell">Content</div>
        <div style="display: table-cell">Content</div>
    </div>
</div>

Why? ...really: Why??

Why is that better than using a table? Or, why is using tables something that abominable?

Tables are part of HTML elements. They exist for a reason and have a good purpose. They are not deprecated and they are not going to dissapear anytime soon (or sooner than divs for that matter). And most importantly: they behave correctly in all browsers & versions!

So... why the obession with making divs behave like tables? Why do so much people write HTML/CSS that way and then feel proud of something so dirty?

This is not exclusive to tables. I keep seeing divs replacing all html elements, like h1..h6, spans, etc.

Why??

Francisco Zarabozo
  • 3,676
  • 2
  • 28
  • 54
  • 1
    I would say that it's semantics. When people replace headings with div elements, that doesn't make sense. But when you wrap your layout in tags that are intended for tabular data, then that's also wrong semantics. With the `display` attribute you're merely changing the appearance, but a `td` would imply tabular data, which your content might not be. – slhck Apr 26 '13 at 08:59
  • always use the correct semantic for describing your data (the correct tags), and then css to get your correct styling/layout. all html tags have semantic meaning, so with them you describe your data (`table` for tabular data, `h1`, `h2`, ... for headlines, ...) ( _div hell_ is as bad as _table hell_) – t.niese Apr 26 '13 at 09:06
  • 3
    It's called divitis. There is a vaccine called semantic markup, but some people are religiously averse to that kind of thing. – BoltClock Apr 26 '13 at 09:09
  • @t.niese (I’d even say that *div hell* is even worse as you cannot understand the structure from the HTML code alone) – poke Apr 26 '13 at 09:09
  • @poke if you use `div`s for everything then yes :D (its something you can discuss for hours) my personal opinion (loose and short - i don't want to start a discussion :D ) if a site is readable without css (correct order of the elements in html) and the html tags are used correctly for most of the elements so that the semantic is clear then some elements could be _misused_ for layout when it helps to keep the html and css code clearer. (but only if it does not break accessibility) – t.niese Apr 26 '13 at 09:21
  • Simply put, markup that uses divs for tabular data is broken, as is markup that uses divs for headings. Many people got confused when it was advocated to not use tables for layout, and they interpreted this is don't use tables at all. That interpretation is wrong. – Erik Funkenbusch Apr 26 '13 at 09:26

2 Answers2

3

No, using divs that behave like table cells, just for the sake of avoiding table tags is not much better.

It is completely fine to use tables, where tables are appropriate. If you want to display tabular data, use tables. If you just use tables to layout your page in a grid-like environment, then no, don’t use tables.

The reason why people use divs with table behavior is usually because they don’t want to use tables, as they would have a semantical meaning, but they still want to stick to a tabular layout.

In the end, you should never use tables to layout pages though. Many good reasons are given here.

Community
  • 1
  • 1
poke
  • 369,085
  • 72
  • 557
  • 602
0

Possibly divs might be better if you wanted a table like this:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
gaynorvader
  • 2,619
  • 3
  • 18
  • 32
  • No, lookup the colspan attribute. Although, it would be more difficult for the two columns if you wanted them to each be half the width of the table. – Erik Funkenbusch Apr 26 '13 at 09:22
  • I understand the colspan attribute, but it can get tricky to manage a large table, particularly if you have dynamic content and the number of tds increases or decreases. – gaynorvader Apr 26 '13 at 09:56