21

What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr). Doesn't this mean that the divs will behave exactly like tr and td elements?

I know I probably shouldn’t use tables or table behavior for layout at all but I'm just curious if there's a difference and a benefit?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
picknick
  • 3,897
  • 6
  • 33
  • 48

4 Answers4

16

What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr).

None whatsoever in my opinion, except that you take away compatibility with older browsers. The idea that using DIVs with display: table-* is somehow better than <table>s is idiotic IMO, and the result of totally misguided hysteria against table elements. (Not attacking you @Nimo, just criticizing some people who have taken the "tables are evil" meme too far.)

Tables are supposed to be used to represent tabular data, not to be misused for layouting.

There are, however, certain abilities that tables have that are still very hard to simulate using pure CSS. You either need massive hacks and sometimes even JavaScript based workarounds to make those things work.

You should design your layouts in a way that don't rely on those abilities.

In some rare cases, you do need them. But then, it doesn't matter whether you use a proper <table><tr> or a brain-dead <div style="display: table"><div style="display: table-row"> (which one is more semantic and better readable by the way?)

If you need display: table-* for your layout, you have one of those rare cases at hand, or you have painted yourself in a corner anyway. Either way, with a <table>, you at least get consistent browser support.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 8
    I think it's *always* more semantic and readable to use `
    ` elements, external stylesheets, and descriptive class names then `` elements for non-tabular data.
     – ghoppe May 19 '10 at 17:06
  • 2
    @ghoppe point taken in that a `table` tag is always semantically wrong in a layout, no matter what. I would still prefer markup with a `` based construct but that is down to taste. Anyway, `div` s with `display: table-*` bring with them *all* problems inherent to tabular layouts, plus the additional problem of lacking downward compatibility, and the additional problem of some people who don't understand the issue thinking that they are now doing fine because hey, we're not using `
    ` s, right? This is what my rant is ultimately about.
     – Pekka May 19 '10 at 17:12
  • Sorry Pekka, I'm not following. Are you saying that applying wrong semantics to your page by using `table` for layout is OK? Or that using the display:table CSS presentational style is somehow assigning table semantics to the div? Or that marking up the page with sufficient divs to be able to apply display:table* sensibly will necessarily incur accessibility problems of the same magnitude as using `table` with wrong semantics? – Alohci May 19 '10 at 20:41
  • @Alohci I am mainly saying that *when you are in a situation when you need the features of a table*, rightly or through stupid planning, you are better off with a `` element because that is supported better than `display: table*` in older IEs, which still play a role. Also, most of the problems of the `
    ` tag hold true for the `display: table` presentation style as well; except for the one you mention, semantics and accessibility. I see people adopting `display: table` and thinking that through this, everything negative about tables for layout has gone away - which it hasn't.
     – Pekka May 19 '10 at 21:01
  • 2
    I'd rather support assistive reading technologies for disabled users by creating proper `
    ` elements than support older outdated IE versions that serve only to drag the web down to their level. In addition, if I want to change the layout of my page later, it will be much easier to re-style my divs than to re-layout tables.
     – Stephen P May 20 '10 at 00:16
  • @Stephen I can understand that choice, but that is ultimately down to the expected audience of your site IMO. For some audiences, you still need to support IE6, like it or not. Anyway, I'd much rather the CSS standard would add proper support for stuff like vertical heights so the need for table (or table-like) layouting wouldn't arise in the first place. – Pekka May 20 '10 at 07:09
8

The following explains why to use DIV over TABLE elements.

Pros of Table Element: Most designers use table for a consistent look. Tables are also easy to maintain. Another advantage of table is that it is compatible with the most browsers.

Cons of Table Element: All this comes with a cost: Too many nested tables increase page size and download time. More table elements push important content down so search spiders are less likely to add content to search engines.

Pros of DIV Element: div with CSS we can achieve the same table based page structure and reduce the number of elements on the page, which allows the page to load faster. It also makes page more compatible with search engine spiders.

Cons of DIV Element: The major drawback of this is not all CSS elements are not browser compatible. Because of this we have to write some custom CSS to resolve issues.

full article : http://www.codeproject.com/KB/HTML/DIVwebsite.aspx

display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TR's and TD's. There's also a display: table-column but it should show nothing at all, only serving for style information like a COL does. I'm not sure exactly how this works.

more about div display style : http://www.quirksmode.org/css/display.html

Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
6

display: table; doesn't mean you turn divs into tables, it just makes that certain properties (like vertical-align) work where they normally wouldn't. It's not anything like using table for layout.

Jouke van der Maas
  • 4,117
  • 2
  • 28
  • 35
  • 2
    This does not answer the question at all. – Jukka K. Korpela Apr 24 '14 at 07:32
  • Re *"Not anything like using table for layout"*. Not sure what you mean by that - its *very much* like using table for layout. That's the point. (For example, the question asks *"Doesn't this mean that the divs will behave exactly like tr and td elements?"* The answer to that is **yes**. [I show the 1:1 correspondence here.](https://stackoverflow.com/a/13983507/199364)) You get the functionality of table, but via CSS instead of embedded in HTML tags. (So you've kept layout separate from content, therefore having the flexibility of replacing that layout with a different layout.) – ToolmakerSteve Apr 30 '19 at 23:42
0

Tables should ONLY be used to represent tabular data. Divs are containers to group content. Simple as that. display: table only gives you the layout properties of tables. But it's not compatible with <IE7 so for the sake of graceful degradation, avoid it.

russinkungen
  • 367
  • 4
  • 12