3

I've been using those properties, especially display: table-cell, a lot lately. It's well supported in modern browsers and it has a lot of benefits for some grids and for aligning content very easily, without the need of tricky markups. But in the last few days I have seen people talking about this, as it were a bad practice/approach using those attributes, like in this answer.

Pros (that come to my mind right now):

  • adds no semantics to the HTML-markup
  • well supported in modern browsers
  • helpful for aligning content
  • helpful for grid systems (most likely in combination of aligning content)

Cons

  • if you just use display: table-cell; the missing parts (row and table) are added automatically

So I don't really get, why it should be bad using those for layout.

I guess this question gets closed (I could understand that), but maybe somebody has a decent answer – even a positive towards their usage.

Community
  • 1
  • 1
insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
  • It's a more rigid way to do things, but in and of itself, no harm in using it. – DA. Aug 09 '12 at 22:18
  • I can think of a reason to not do it for obvious reasons. The display option you are setting it to is "table-cell" which might someday also come with extra baggage that actually makes it _look_ like tabular data. Such as a gridlike appearance or some such effect. – TheZ Aug 09 '12 at 22:19
  • @TheZ Some HTML elements have a default appearance. The CSS `display` property is a very different thing - it shall not come with extra baggage. `table`, `tr`, etc. is already rendered in a gridlike way by default, and that is fine. – kapa Aug 09 '12 at 22:27
  • @bažmegakapa If it has nothing to do with the semantic meaning _why is it called table-cell_? They could have called it anything. – TheZ Aug 09 '12 at 22:29
  • This seems somewhat related to a question I asked recently for those interested: http://stackoverflow.com/questions/11763400/correct-semantic-use-of-css-properties – Alex W Aug 09 '12 at 23:49
  • @bažmegakapa - I would also say, that if they had called it just `box` - maybe nobody would complain abut it. :) – insertusernamehere Aug 10 '12 at 16:23

3 Answers3

4

Quote from the linked answer:

Don't forget that table-cell is not the correct usage. You don't want images to be trated as table cells, since table cells should only contain table data. Just raising a caution flag. Stick to the semantics.

I won't make this long: CSS simply has nothing to do with semantics.

Community
  • 1
  • 1
kapa
  • 77,694
  • 21
  • 158
  • 175
  • That's what I thought - needed some backup here. Thanks. – insertusernamehere Aug 10 '12 at 16:19
  • actually css provides necessary techniques to utilize html to its max potential. without css, we'd all still be doing table-based layouts, which do affect semantics. thats just one example. there are a plethora. – albert Aug 10 '12 at 19:48
  • 1
    @albert That's what I'm saying. HTML deals with semantics, CSS deals with styling. – kapa Aug 10 '12 at 19:56
  • microformats provide semantics. since they're html attributes, idk if that's entirely css, hybrid, or the same thing you're saying. – albert Aug 10 '12 at 20:00
  • @albert Hm. Microformats are certainly not CSS. HTML attributes are not CSS either. – kapa Aug 10 '12 at 21:22
  • microformats are classes. albeit html attributes, they're css classes. like is said, idk if they're pure or a hybrid. – albert Aug 10 '12 at 21:32
  • @albert Classes have nothing to do with CSS. They are *HTML* attributes. You can refer to them with CSS or Javascript - but that is true for id and, actually, any other attribute. – kapa Aug 10 '12 at 21:38
  • as i keep trying to say, it's really a gray area. yes, there are html attributes, but they only exist to provide hooks to other technologies...classes have as much to do with css as they do with html, even if they are markup attributes. – albert Aug 10 '12 at 21:46
  • @albert If you resist... I don't have more time to talk about this. Maybe try reading the specification. Have you ever wondered whether bus handles are the part of the bus or yourself? :) – kapa Aug 10 '12 at 22:08
  • seriously, what purpose do classes/id serve in html, without other technologies? i don't need to read the specs, been there, done that. why are there terms like css classes then? the whole world misinterpreted that? – albert Aug 10 '12 at 23:00
  • @albert I have never read or used "CSS classes" (other than from newbies). It simply does not make sense. Do you also call them "Javascript classes"? But again, we should finish this, because it leads nowhere. – kapa Aug 11 '12 at 08:23
  • 1
    after thinking more, we access said classes the same as elements via css; i would never call elements css. maybe i just need to define their interactions more for myself. we're not all trolls. :) i like to learn. positive discussions fuel this. – albert Aug 11 '12 at 15:20
1

I like to set display and positions as need be, though any large elements I almost always set to position: relative; so I can handle their children much easier.

As for display:table-cell - it's only changing how it's laid out. Instead of coding a full on table, if you just need a neat little 4x4 grid, why NOT use it? It's very simple, very clean, and is a very very simple alternative to coding a big (messy) table.

My advice is that "if it ain't broke, don't fix it". display: only changes the way items are... displayed ~ go figure!

I use as many display:'s as need be, like a menu might be :inline-block; for media queries or :block for full articles, or :table-cell for a nice simple even 2 column bit on a section of a sidebar/article.

Xhynk
  • 13,513
  • 8
  • 32
  • 69
1

one positive: provides table-layout without using table elements. one negative: affects some user agents negatively: http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/ this is one of those "it all depends..." question.

albert
  • 8,112
  • 3
  • 47
  • 63