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.

Improve this question
6
  • It's a more rigid way to do things, but in and of itself, no harm in using it. Commented Aug 9, 2012 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. Commented Aug 9, 2012 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. Commented Aug 9, 2012 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. Commented Aug 9, 2012 at 22:29
  • This seems somewhat related to a question I asked recently for those interested: stackoverflow.com/questions/11763400/… Commented Aug 9, 2012 at 23:49

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

That's what I thought - needed some backup here. Thanks.
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 That's what I'm saying. HTML deals with semantics, CSS deals with styling.
microformats provide semantics. since they're html attributes, idk if that's entirely css, hybrid, or the same thing you're saying.
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.
|
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.

Improve this answer

Comments

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.