"Semantics" of CSS rules: table, table-row, table-cell

Question

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.

Answer 1

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.