Is it bad use “display: table;” to organise a layout into 2 columns?

Question

I am trying to make a 2 column layout, apparently the bane of CSS. I know you shouldn\'t use tables for layout, but I\'ve settled on this CSS. Note the use of display: table

Answer 1

The problem with using table tags for non-tabular data in HTML is that they impose formatting in what should be just the data.

Since you are putting your table formatting in your CSS, your HTML is still semantically correct. I am of the opinion that as long as your HTML is semantically correct, what you do in the CSS to make it look nice is your own business, and I think your existential dread is misplaced.

On a side note, I'm pretty sure IE 6 doesn't support display:table-cell, so depending on your target you might need to make alternate arrangements.

Answer 2

Let me break it down to you. element had it's charms which was the reason behind everyone using it. But then Semantics got evolving. We were way over and above with Syntax. Decisions were made, on behalf of which XHTML 2.0 was discarded and HTML5 was adopted. Read the history of WHATWG ( Web Hypertext Application Technology Working Group) to get your concepts clear about it.

The main stance behind removing certain elements from HTML was they were not meant to structure things but were meant to style them, whereas HTML has nothing to do with styling an element.

HTML is meant to structure a web page. CSS is meant for styling that structure.

So, the HTML element and and many others were removed from the specifications. They were specifically being used to style instead of structuring.

To decide the fate of element it was decided to keep it in the specs as in the real tables are meant to be structured with it, but to shift the focus of a common web designer similar abilities/specs should be added to CSS.

Now HTML element is meant for the structure of a table and nothing else. If you want to use the table for styling go ahead and use display:table; which is a CSS property and CSS is meant to style the elements of a structure in HTML. Above that it can be modified and control E.g. in RWD you can specify any element to change its display from table to block or whatever.

Answer 3

display: table-cell

is a style, not a table structure like this:

<table>
   <tbody>
       <tr>
          <td>
          </td>
       </tr>
   </tbody>
</table>

So i think it's fine to use it.

By the way, i don't think table is really evil after all.

Personally i would prefer table for displaying tabular data (only for data) than "div" structure. My main reason is, user could easily copy paste the data to spread sheet from their browser. Fullfiling my lazyness :"> and reducing page load (by not featuring "download as excel, or csv or other")... hehehe... :D. Oh one more, in different browsers it's displayed consistent too.

Answer 4

Ironically, using display: table is likely to be a common acceptable solution in the future.

See: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Answer 5

There are two essential arguments for not using tables:

1. Semantic markup.
2. Avoiding tag soup. (too many tags)

So, your method is not really violating either of those goals. However, you should check this code in IE7 and IE6 - you are likely to see some inconsistencies there.

As was mentioned - don't worry about sticking to these rules too tightly. They are guidelines, and you should use the right tool for the job you are doing. What is important here is knowing what the various techniques are best for, and when to use them. Sometimes, using a table is the best tool for what you are trying to do, sometimes it is not.

Answer 6

This is the type of example that display: table-cell; was designed for. You are, after all, putting the formatting into the stylesheet, not the markup. So relax! It's fine.