Табличные значения display: table, table-cell, table-row, table-column, и другие

10 октября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Этой заметкой я хочу заглянуть в будущее, которое, надеюсь, будет не очень отдалённым. В будущее — потому что IE7 не поддерживает табличные значения свойства display, а с арены пока не сошёл.

Адекватной замены табличным свойствам, которая работала бы в IE7, на данный момент не существует. Многочисленные способы сымитировать табличные элементы на плавающих блоках дают весьма приблизительный результат и не гарантируют устойчивости, свойственной табличным элементам.

Display: table

Означает: «веди себя как таблица». По умолчанию этим значением обладает html-элемент table, он же таблица.

Поведение, типичное для таблицы:

  • по умолчанию имеет ширину по содержанию, но занимает целую строку, подобно блочным элементам;
  • по умолчанию прижимается к левой границе контейнера, даже если контейнеру задано выравнивание по правому краю (text-align: right). Чтобы прижать таблицу к правому краю, надо применять float: right или же делать её инлайновой;
  • ширину и высоту таблицы можно задавать в css;
  • у таблицы может быть свойство margin, в том числе с отрицательными значениями (в частности, таблицу можно центрировать, назначив ей margin: 0 auto), а также padding (не действует в IE7);
  • к содержанию таблицы применимо горизонтальное выравнивание (text-align);
  • вертикальное выравнивание на содержание такого элемента не действует;
  • таблица может иметь рамку (border);
  • к таблице применимы свойства border-collapse (режим соединения рамок) и border-spacing; последнее работает в том случае, когда первое имеет значение separate, и создаёт зазоры между ячейками таблицы.

Это значение, кроме создания табличной структуры, можно использовать в декоративных целях для ограничения видимой области по содержанию — например, если в дизайне фон заголовка ограничивается текстом заголовка: Пример. Подобный эффект можно получить правилом float: left или display: inline, но display: table оставляет всю строку в распоряжении данного элемента, не создавая обтекания следующими.

Display: inline-table

Ровно то же самое, что и предыдущее значение, только наша псевдотаблица может располагаться на одной строке с другими строчными элементами. К строчной таблице применимо вертикальное выравнивание (свойство vertical-align).

Display: table-row

Означает: «Веди себя как табличная строка». По умолчанию таким элементом является tr. Свойства табличной строки:

  • имеет ширину по содержанию, но занимает целую строку;
  • задать строке таблицы ширину нельзя, зато можно задать высоту;
  • к табличной строке неприменимы поля, отступы, рамки и управление ими, а также вертикальное выравнивание;
  • зато по горизонтали (text-align) содержание табличных строк выравнивать можно.

Display: table-cell

На мой взгляд, самое интересное из табличных значений display. Означает: «Веди себя как ячейка таблицы». По умолчанию это значение имеют элементы td и th. Свойства табличных ячеек и элементов со значением display: table-cell:

  • идущие подряд ячейки находятся на одной строке с себе подобными, не переходя на следующую; если ячейкам на строке тесно, они сначала ужимаются по ширине, а затем начинают распяливать контейнер и/или окно браузера;
  • ширина ячеек по умолчанию распределяется пропорционально содержанию (с учётом всех ячеек в данной строке), однако может прямо задаваться через css;
  • все ячейки в строке имеют одинаковую высоту, которая определяется содержанием самой большой ячейки в данной строке;
  • ячейка может иметь внутренние отступы (padding), но не может иметь полей (margin);
  • к табличным ячейкам применимо вертикальное выравнивание по табличному принципу: свойство vertical-align выравнивает содержание ячейки по высоте относительно самой ячейки, при этом ячейки в строке сохраняют одинаковую высоту, в отличие от строчных или строчно-блочных элементов. Значения vertical-align не бывают отрицательными;
  • содержание ячейки может выравниваться по горизонтали (text-align);
  • у ячейки может быть рамка, но чтобы повлиять на слияние/расклеивание рамок, надо соответствующие свойства назначать контейнеру, а не текущему элементу; кстати, в старых версиях Оперы у элементов со значением table-cell значение border-spacing почему-то было ненулевым и создавало лишние зазоры, в силу чего таким элементам требовалось правило border-collapse: collapse; сейчас этого, вроде бы, не наблюдается.

Интересно, что если родительский элемент со свойством display: table или table-row наряду с потомками типа table-cell содержит элементы с другими типами отображения, то группа не табличных элементов образует ещё одну ячейку в той же строке, в противном случае строка разрывается: Пример.

Далее идут совсем уж малоупотребительные типы отображения; по мере того, как будет уходить IE7, можно будет уделить им больше внимания, а пока достаточно краткого перечисления.

Display: table-column

«Веди себя как табличная графа (колонка, столбец)». Таким элементом в html является редко применяемый элемент col.

Через css можно указать фон, рамку, ширина, видимость (visivility); в IE нет рамки и видимости.

Display: table-column-group

Соответствует группе граф colgroup. По поведению совпадает с предыдущим типом.

Display: table-header-group, table-footer-group, table-row-group

Это группы строк, которым соответствуют элементы thead, tfoot и tbody соответственно, то есть группа шапки, группа подвала и группа основной части таблицы.

Display: table-caption

Заголовок таблицы — caption. Элемент с этим типом отображения в Опере и ИЕ8 требует контейнер с типом отображения table; в этом случае выводится перед таблицей, как и положено заголовку таблицы. Кроме того, в коде html заголовок таблицы должен быть первым потомком табличного элемента, в противном случае в ФФ и Хроме наблюдаются весьма забавные эффекты, увы, не имеющие практической пользы.

В следующий раз я надеюсь описать разницу между display: table-cell, display: inline-block и float: left. А вы пробовали применять табличные значения display, или пока не решаетесь?

Отзывы (67) на «Табличные значения display: table, table-cell, table-row, table-column, и другие»
  1. vovans (9 комментариев)

    И, как всегда, всё портит противный ишак ((

    А ведь столько вкусного в мире есть ))

    Ответить на этот комментарий
    • Княгиня (650 комментариев)

      ДА! (Считайте, что это вопль души…)

      Ответить на этот комментарий
  2. Станислав (1 комментарий)

    Поздравляю с первой «десяткой»!

    Ответить на этот комментарий
    • Княгиня (650 комментариев)

      Сори, торможу. С десяткой тИЦа? Она ещё в прошлый апдейт набежала.
      Спасибо.

      Ответить на этот комментарий
  3. Александр (1 комментарий)

    Полезные свойства у Display. Жаль что ИЕ всё портит :(

    Ответить на этот комментарий
    • vovans (9 комментариев)

      Ну, если для себя делать, то можно положить на этот ИЕ с высокой колокольни ))

      Да и какой грамотный в вебе человек станет им сознательно пользоваться? А безграмотному всё равно, что да как. Лишь бы хоть как-то было.

      Ответить на этот комментарий
      • Княгиня (650 комментариев)

        Не могу согласиться. Клиент, приходящий на сайт, хочет видеть… что-то понятное. Например, товар и его свойства. С ценой. Значит, страница должна выглядеть опрятно и убедительно, что бы там у клиента (пока ещё потенциального) ни стояло. Понятно, что на особо древние браузеры не наздравствуешься, но ИЕ7 пока ещё не настолько древний, и им пользуется заметный процент посетителей.

        Ответить на этот комментарий
    • Ljubanja (1 комментарий)

      А я на IE внимания не обращаю в последнее время, он и так скоро вымрет!

      Ответить на этот комментарий
      • Winar (2 комментария)

        заказчики, к сожалению, обращают внимание))

        Ответить на этот комментарий
  4. Павел (4 комментария)

    Юлия, вы не написали о том, как сказывается на скорость отображения страницы значение table в теге Display. Проводились такие изыскания или нет?
    Разметка совершенствуется, а вот браузеры отстают от этих темпов. Я с вами полностью соглашусь в том, что сайт должен быть кроссбраузерный, иначе, как говорится — труба дело. С таким подходом, если чайник, то для него сайт делать необязательно, далеко не уедешь. Ресурс должен отображаться корректно в любых браузерах. Поэтому, каждый веб-разработчик обязан к этому вопросу подойти серьезно.
    И еще хотелось бы сказать об одной детали. Валидность — обязательный параметр нормального сайта. Веб-мастера и об этом забывают частенько, работает и ладно. Например, я уделяю этому вопросу большое значение и всегда советую другим обращать на это внимание.

    Ответить на этот комментарий
    • Княгиня (650 комментариев)

      Про скорость ничего не слышала. Кстати, display — совсем даже не тег, а свойство. :)

      Кроссбраузерность — дело необходимое. Если сайт виден только в любимом браузере создателя, то дело швах. Точнее, создатель сего — швах, и его к серьёзным проектам подпускать нельзя.

      С валидностью несколько сложнее: увы, но движки нередко пихают в код разные излишества (даже если забыть о «творчестве» контент-менеджеров). Мои шаблоны всегда валидны, но я не поручусь, что валидны все страницы, которые сделаны на их основе.

      Ответить на этот комментарий
  5. Павел (4 комментария)

    Спасибо, что поправили. Почему я спросил про скорость. Если Display: table наследует, как вы выразились «Поведение, типичное для таблицы», значит и в браузере работать будет, как таблица? Если это так, то пока вся информация не загрузится полностью, отображаться не будет, в отличии от блока div.

    Ответить на этот комментарий
    • Княгиня (650 комментариев)

      Думаю, что этой проблемы при загрузке не должно быть: браузер обрабатывает блоки как блоки, а уж потом подтягивает к ним поведение, описанное в css. А будут ли какие другие осложнения — мне неведомо.

      Что касается «пока не загрузится полностью» — это поведение характерно для ие. Другие браузеры спокойно грузят таблицу по частям, так что при загрузке можно наблюдать «прыжки» содержимого, пока не загрузились следующие части.

      Ответить на этот комментарий
  6. Павел (4 комментария)

    Вот видите, значит нужно учитывать то, что пока еще пользователями IE являются почти 50% от общего числа браузеров на рынке. Это очень большой процент. Хотя, радует одно, этот процент неумолимо снижается!

    Ответить на этот комментарий
  7. игорь (1 комментарий)

    Да не считаться с IE при верстке пока слишком рано. а по сему приходиться всячески извращаться. и радует действительно только то что число пользователей юзающих IE «неумолимо снижается!».

    Ответить на этот комментарий
    • notepad (1 комментарий)

      Уметь извращаться и находить нестандартные решения очень полезно. Обучиться этому мастерству нам помогает IE ))

      Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.