Отличия тега <table> и display:table-cell

[Libiros]

Задумался вот над следующим:

В верстке в таблицу лучше заносить табличные данные (тег <table>), относится ли это к свойству display:table-cell и его подобным?

То есть, хочется мне грамотно отцентрировать, например, в блоке некоторые элементы по вертикали и я могу использовать табличную верстку, что нерационально, а могу задать диву table-cell и vertical-align:middle. Будет ли это правильным?

Что скажут специалисты и эксперты?

[Switch74]

на мой взгляд - это одно и тоже за исключением того, что table-cell не поддерживается старыми браузерами

[Libiros]

Отсюда

Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).

Из спецификации:

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between 'display', 'position', and 'float') and for the root element. For the root element, the computed value is changed as described in the section on the relationships between 'display', 'position', and 'float'.

Note that although the initial value of 'display' is 'inline', rules in the user agent's default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.

Эти значения ведут себя как табличный элемент.

То есть как табличный или элемент или являются им?

[Great Rash]

Если вы задумались над семантикой, то display: table; табличными данными не является, просто блок ведет себя как таблица.

[Switch74]

кста, хочу заметить, что в браузерах тегу table присваивается класс display: table;

[Libiros]

Если вы задумались над семантикой, то display: table; табличными данными не является, просто блок ведет себя как таблица.

Сам поддерживаю блочную верстку. Однако, иногда приходится центрировать элементы по центру какого-то блока и самый простой способ - display:table.

но

Получается так, что табличная верстка плоха множеством своих тегов и семантической нерациональностью и этого можно избежать, присваивая всем div'ам display:table и просто продолжать верстать в табличном стиле?

[Libiros]

Ещё актуально

[SelenIT]

То есть как табличный или элемент или являются им?

Как табличный. В теории — чисто визуально (т.е. скринридеры не должны читать их, повторяя названия колонок перед каждым значением, хотя бывают исключения). И табличных DOM-свойств, типа коллекции rows и новомодной нативной сортировки, у элемента не появится (по идее, это очевидно). Больше того — банальные rowspan/colspan CSS-ом не воспроизвести (пока?).

Еще тонкий нюанс (закрепленный в спецификации) — для <table>, по историческим причинам, по умолчанию применяется модель border-box, а для произвольного элемента с display:table — content-box. Но в реальности у браузеров (как минимум, Хрома) с этим бывала путаница.