Преимущества структурирования моего сайта с помощью div и применения свойства display: table (display: tr, display: tr). Разве это не означает, что divs будут вести себя точно так же, как элементы tr и td?
Я знаю, что я, вероятно, не должен использовать таблицы или поведение таблицы для макета вообще, но мне просто интересно, есть ли разница и преимущество?
Преимущества структурирования моего сайта с помощью 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>, вы по крайней мере получаете согласованную поддержку браузера.
display: table; не означает, что вы превращаете divs в таблицы, это просто делает определенные свойства (например, вертикальные выравнивания) работать там, где они обычно не будут. Это не похоже на использование таблицы для компоновки.
Ниже объясняется, почему использовать 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
Таблицы должны ТОЛЬКО использоваться для представления табличных данных. Divs - это контейнеры для группировки контента. Просто как тот. display: table предоставляет только свойства макета таблиц. Но он несовместим с < IE7, поэтому для изящного ухудшения, избегайте этого.