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

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

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

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

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

Ответ 4

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