Is it bad use “display: table;” to organise a layo

问题:

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

div.container {
  width: 600px; height: 300px; margin: auto;
  display: table; table-layout: fixed;
  }

ul {
  white-space: nowrap; overflow: hidden;
  display: table-cell;
  width: 40%;
  }

div.inner {
  display: table-cell;
  width: auto;
  }

With this layout:

<div class="container">

  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    </ul>

  <div class="inner">
    <p>Hello world</p>
    </div>

  </div>

This seems to work admirably. However, I can't help wondering - am I obeying the letter of the "don't use tables" rule, but not the spirit? I think it's ok, since there's no positioning markup in the HTML code, but I'm just not sure about the "right" way to do it.

I can't use css float, because I want the columns to expand and contract with the available space.

Please, stack overflow, help me resolve my existential sense of dread at these pseudo-tables.

回答1:

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.

回答2:

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.

回答3:

It would be swell if every possible layout could be done with css, with no tables or pseudo-tables in sight. But there are exceptions, and until html and css (and browser support) let us do it, be comfortable with your tables. The point, after all, is to satisfy your users, not to adhere to someone else's philosophy.

回答4:

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.

回答5:

Using the display:table is fine when you're talking about semantics. The reason "tables are bad" in the first place is because the markup (HTML) is supposed to describe the content inside of it. So, if it's not data, it doesn't belong in a table.

Since you're just setting how the markup displays (in a table structure), that's perfectly fine.

However, this will not work for all browsers. Specifically IE6 and IE7 (and IE8 in "compatibility mode") will not display this correctly.

For more information on display types and browser support, you can refer to this: http://www.quirksmode.org/css/display.html

回答6:

You said using display:table for a great auto-width like columns?

I can't use css float, because I want the columns to expand and contract with the available space.

Then, you could also use flex properties! Let's get in that:

In CSS3 there were many properties added, there's one group called flex which is used to have flexible divs without using tables or display: table; also used when the user's using a small screen (maybe a mini laptop, tablet, big smartphone like Galaxy series or small...?). These are the properties:

• Parent.
  • This is the main container. For instance, let's say you've got a web with a very basic HTML structure, and with three divs (one with the main information, other used as sidebar and finally one to wrap te first two mentioned).
  • display: flex: this is used to tell the browser we're talking about flexible items. Use -webkit- before the value (inline-flex's also applicable) for Google and Safari support. You don't need to use -moz- or -o-, nor -ms-.
  • flex-direction: this is the orientation of the childs inside this parent. There are four available values for this one: row, column, row-reverse, or column-reverse. Because of you want a main div and a sidebar, ya shall use column. Use -moz- and -webkit- for more browser support.
  • justify-content: the alignment for X axis. Values: flex-start, flex-end, space-between, space-around, flex-center. I recommend using the fourth or fifth ones.
• Child.
  • For this case, I'll mean with child as main (not recommended) or div class="main" and aside or div class="sidebar".
  • order: used to order the divs, no matter which was placed first in the code. Here CSS wins against the HTML code used. The values are... numbers... use -moz- n -webkit- plz.
  • flex-grow: used to let a child be bigger than the rest, all depends on its value, and if there are other childs with other values for this property. -webkit- & -moz- r Rcomment ed.

Moar info at: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and http://www.w3schools.com/cssref/default.asp#flexible.

Oh, and here's the answer: yes, you can use it. Read at: http:/www.w3.org/TR/css3-flexbox/#intro. It says

table layout, designed for laying out 2D data in a tabular format

They doesn't talk about bad idea, it just sets its format to ACT (and maybe don't look like) like a table.

回答7:

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/

回答8:

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.

回答9:

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.