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