Плохо ли display:table-cell и иже с ним?

Question

[Александр]

Все говорят что табличная верстка - это давно уже не православно.

А что если заменить на div display:table-cell? Минусы все те-же? Чем плохи display:(table|table-row|table-cell)?

Comments

[Opaspap]

table-cell есть еще такой момент - table-row может быть без table

Answer 1

[Евгений Петров]

Нет ничего плохого в различных видах представлений, есть неверное применение. Нет такого понятия, что таблицы сами по себе — зло. Зло — таблицы в качестве основы построения страницы. И корень этого зла вовсе не в таблицах, а в голове того, кто применил такое решение.

А что если заменить на div display:table-cell?

Это — одно и то же. Чтобы вы понимали, сами по себе HTML-элементы не обладают никакой визуальной информацией. Все метаморфозы происходят по причине так называемых правил по умолчанию.

Это значит, что элементы TD и TH будут обладать display:table-cell по причине применения к странице этих правил, а не потому, что они изначально такие. Если вы примените это к своим элементам, ну теперь ваши элементы также будут обрабатываться как ячейки таблицы.

Помимо жёсткой структуры таблицы съедают ресурсы браузера на их обсчёт. Даже table-layout:fixed иногда не спасает.

Answer 2

[Юрий Лобанов]

Вот как-то так:

<table>
  <tr>
    <td class="sidebar">sidebar</td>
    <td class="content">content</td>
  </tr>
</table>

Но таблицами верстать нельзя!

Тогда вот так:

<div class="table">
  <div class="row">
    <div class="cell sidebar">sidebar</div>
    <div class="cell content">content</div>
  </div>
</div>

Да, так отлично!

Comments

[Александр]

Ну семантически дивами вернее будет пусть даже если это по сути таблица

[Евгений Петров]

Тут кстати div.row лишний. Недостающую область с display:table-row браузер достроит сам.

Применение списка (а как правило, табличное представление часто требуется в меню) для реализации различных представлений — это верный подход.

Ну и нет ничего плохого в таблицах, просто нужно учитывать серьёзные траты браузера на их обсчёт.

[Юрий Лобанов]

@MAG-FRAG глаз режет не так, согласен.
@neokortex ага, так и есть.
@Petroveg ну row может понадобиться, если захотим еще строку добавить.
А так, коллеги, это просто шутка.

[Иван Беленков]

@Petroveg в Хроме без display: table-row всё развалится, если не ошибаюсь.

[Евгений Петров]

@IoannGrozny проверить религия не позволяет?) jsfiddle.net/petroveg/j9g6q50b

[Евгений Петров]

@Aingis научите пользоваться старыми версиями хрома:)
За последние 10 лет ни разу не сталкивался с проблемой пропуска области с display:table-row в FF.

Answer 3

[Анна Бакурова]

На счёт этого Я считаю так. Если Вы видите что семантически это не таблица, но дизайнер нарисовал это как таблицу (ну к примеру по семантике это явный список), то стоит использовать display: table. Но не стоит его использовать в других случаях. Как раньше всё верстать по табличному типу. Ещё иногда это используют когда текст внутри страницы нужно центровать по вертикали в блоке.