Этой заметкой я хочу заглянуть в будущее, которое, надеюсь, будет не очень отдалённым. В будущее — потому что 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, или пока не решаетесь?
70 комментариев на «Табличные значения display: table, table-cell, table-row, table-column, и другие»
vovans (9 комментариев)
И, как всегда, всё портит противный ишак ((
А ведь столько вкусного в мире есть ))
Княгиня (660 комментариев)
ДА! (Считайте, что это вопль души…)
Станислав (1 комментарий)
Поздравляю с первой «десяткой»!
Княгиня (660 комментариев)
Сори, торможу. С десяткой тИЦа? Она ещё в прошлый апдейт набежала.
Спасибо.
Александр (1 комментарий)
Полезные свойства у Display. Жаль что ИЕ всё портит
vovans (9 комментариев)
Ну, если для себя делать, то можно положить на этот ИЕ с высокой колокольни ))
Да и какой грамотный в вебе человек станет им сознательно пользоваться? А безграмотному всё равно, что да как. Лишь бы хоть как-то было.
Княгиня (660 комментариев)
Не могу согласиться. Клиент, приходящий на сайт, хочет видеть… что-то понятное. Например, товар и его свойства. С ценой. Значит, страница должна выглядеть опрятно и убедительно, что бы там у клиента (пока ещё потенциального) ни стояло. Понятно, что на особо древние браузеры не наздравствуешься, но ИЕ7 пока ещё не настолько древний, и им пользуется заметный процент посетителей.
Нащад в будущие (1 комментарий)
Так может иешникам браузер предлагать сменить?
Княгиня (660 комментариев)
Обычно так и делают.
Ljubanja (1 комментарий)
А я на IE внимания не обращаю в последнее время, он и так скоро вымрет!
Winar (2 комментария)
заказчики, к сожалению, обращают внимание))
Иван (1 комментарий)
Здравствуйте! Я пишу из 2022. Internet Explourer не вымер %(
Павел (4 комментария)
Юлия, вы не написали о том, как сказывается на скорость отображения страницы значение table в теге Display. Проводились такие изыскания или нет?
Разметка совершенствуется, а вот браузеры отстают от этих темпов. Я с вами полностью соглашусь в том, что сайт должен быть кроссбраузерный, иначе, как говорится — труба дело. С таким подходом, если чайник, то для него сайт делать необязательно, далеко не уедешь. Ресурс должен отображаться корректно в любых браузерах. Поэтому, каждый веб-разработчик обязан к этому вопросу подойти серьезно.
И еще хотелось бы сказать об одной детали. Валидность — обязательный параметр нормального сайта. Веб-мастера и об этом забывают частенько, работает и ладно. Например, я уделяю этому вопросу большое значение и всегда советую другим обращать на это внимание.
Княгиня (660 комментариев)
Про скорость ничего не слышала. Кстати, display — совсем даже не тег, а свойство.
Кроссбраузерность — дело необходимое. Если сайт виден только в любимом браузере создателя, то дело швах. Точнее, создатель сего — швах, и его к серьёзным проектам подпускать нельзя.
С валидностью несколько сложнее: увы, но движки нередко пихают в код разные излишества (даже если забыть о «творчестве» контент-менеджеров). Мои шаблоны всегда валидны, но я не поручусь, что валидны все страницы, которые сделаны на их основе.
Павел (4 комментария)
Спасибо, что поправили. Почему я спросил про скорость. Если Display: table наследует, как вы выразились «Поведение, типичное для таблицы», значит и в браузере работать будет, как таблица? Если это так, то пока вся информация не загрузится полностью, отображаться не будет, в отличии от блока div.
Княгиня (660 комментариев)
Думаю, что этой проблемы при загрузке не должно быть: браузер обрабатывает блоки как блоки, а уж потом подтягивает к ним поведение, описанное в css. А будут ли какие другие осложнения — мне неведомо.
Что касается «пока не загрузится полностью» — это поведение характерно для ие. Другие браузеры спокойно грузят таблицу по частям, так что при загрузке можно наблюдать «прыжки» содержимого, пока не загрузились следующие части.
Павел (4 комментария)
Вот видите, значит нужно учитывать то, что пока еще пользователями IE являются почти 50% от общего числа браузеров на рынке. Это очень большой процент. Хотя, радует одно, этот процент неумолимо снижается!
игорь (1 комментарий)
Да не считаться с IE при верстке пока слишком рано. а по сему приходиться всячески извращаться. и радует действительно только то что число пользователей юзающих IE «неумолимо снижается!».
notepad (1 комментарий)
Уметь извращаться и находить нестандартные решения очень полезно. Обучиться этому мастерству нам помогает IE ))