Почему я должен использовать display: table вместо table

Question

В чем преимущества структурирования моего сайта с помощью divs и применения свойства display: table (display: tr, display: tr). Не означает ли это, что div будет вести себя точно так же, как элементы tr и td?

Я знаю, что, наверное, вообще не должен использовать таблицы или поведение таблиц для разметки, но мне просто интересно, есть ли разница и выгода?

Answer 1

В чем преимущества структурирования моего сайта с помощью divs и применения свойства display: table (display: tr, display: tr).

По моему мнению, ничего, кроме того, что вы лишаете совместимости со старыми браузерами . Идея о том, что использование DIV с display: table-* чем-то лучше, чем <table> s, является идиотской ИМО и результатом совершенно неверной истерии по отношению к элементам таблицы. (Не нападаю на вас @Nimo, просто критикую некоторых людей, которые слишком далеко зашли за «столы злые».)

Предполагается, что таблицы используются для представления табличных данных, а не для неправильного использования при компоновке.

Однако есть некоторые способности, которые есть у таблиц, которые все еще очень трудно симулировать с помощью чистого CSS. Вам либо нужны массивные хаки, а иногда даже обходные решения на основе JavaScript, чтобы заставить эти вещи работать.

Вы должны разрабатывать макеты таким образом, чтобы не полагаться на эти способности.

В некоторых редких случаях они нужны . Но тогда не имеет значения, используете ли вы правильный <table><tr> или умопомрачительный <div style="display: table"><div style="display: table-row"> (какой из них более семантический и, между прочим, лучше читаемый?)

Если вам нужен display: table-* для вашего макета, у вас есть один из тех редких случаев под рукой, или вы все равно нарисовали себя в углу. В любом случае, с <table> вы по крайней мере получаете постоянную поддержку браузера.

Answer 2

Ниже объясняется, почему использовать элементы DIV поверх TABLE.

Плюсы элемента таблицы : большинство дизайнеров используют таблицу для единообразного внешнего вида. Таблицы также просты в обслуживании. Еще одним преимуществом таблицы является то, что она совместима с большинством браузеров.

Минусы элемента таблицы: Все это обходится дорого: слишком много вложенных таблиц увеличивают размер страницы и время загрузки. Чем больше элементов таблицы толкает важный контент, тем меньше у поисковых пауков вероятность добавления контента в поисковые системы.

Плюсы элемента DIV: div с CSS мы можем добиться такой же структуры страницы на основе таблицы и уменьшить количество элементов на странице, что позволяет странице загружаться быстрее. Это также делает страницу более совместимой с поисковыми роботами.

Минусы элемента DIV: Основным недостатком этого является то, что не все элементы CSS не совместимы с браузером. Из-за этого мы должны написать собственный CSS для решения проблем.

полная статья: http://www.codeproject.com/KB/HTML/DIVwebsite.aspx

display: table указывает элементу отображаться в виде таблицы. Вложенные элементы должны отображаться как строки таблицы и ячейки таблицы, имитируя старые добрые ТР и ТД. Также есть дисплей : таблица-столбец , но он вообще не должен показывать ничего, только служит для информации о стиле, как COL. Я не уверен, как именно это работает.

подробнее о стиле отображения div: http://www.quirksmode.org/css/display.html

Answer 3

дисплей: таблица; не означает, что вы превращаете div в таблицы, это просто заставляет определенные свойства (такие как вертикальное выравнивание) работать там, где они обычно не работают. Это совсем не похоже на использование таблицы для разметки.

Answer 4

Таблицы должны использоваться ТОЛЬКО для представления табличных данных. Div - это контейнеры для группировки контента. Просто как тот. display: table дает только свойства макета таблиц. Но он не совместим с