CSS от А до Я свойство display


Содержание материала:

Виды элементов в CSS и свойство display.

Мы с вами уже знаем, что все элементы на веб-странице представляют собой блоки.

Но, для того, чтобы было возможно гибко управлять визуальным отображением этих блоков, используется несколько их разновидностей.

У каждого вида блоков есть свои характеристики.

За выбор вида, в котором будет отображаться блок, отвечает свойство display.

Есть 2 основные группы элементов, которые могут отображаться на веб-страницах:

1) Строчные элементы

2) Блочные элементы

Все остальные значения свойства display, задают элементу характеристики строчных, блочных элементов или табличных элементов, в зависимости от тех условий, в которых они используются.

Если элемент не должен отображаться на странице, то свойство display будет принимать значение none.

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

Сейчас лишь хочу показать, как работает свойство display со значением none.

Абзац 2 просто перестает отображаться на странице. Страница выводится, как-будто его и нет.

Когда вы явным образом не задаете свойство display элементу, все равно это свойство присваивается ему по умолчанию браузером.

Значение по умолчанию, которое будет применяться для элементов это

Но есть несколько элементов, которые, как правило, в браузерах представляются в блочном представлении.

Есть еще несколько исключений из правила:

В спецификации об этом написано здесь:

Обратите внимание, что элемента img здесь нет, он, по умолчанию, отображается как строчный элемент. Это не всегда сразу очевидно. Когда я об этом узнал, для меня это было неожиданно.

Пока на этом все. Об остальных значениях и видах элементов поговорим в следующих заметках.

Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

Значение block

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

Это значение display многие элементы имеют по умолчанию:

, параграф

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

  • Элементы располагаются на той же строке, последовательно.
  • Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

  • Располагается в строке.
  • Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

  • Элемент всегда прямоугольный.
  • Работают свойства width/height .

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные

,

,

и т.д. – это просто элементы с предопределёнными значениями display :

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

CSS от А до Я: свойство display

Кроме свойства float , которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство — display . Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.

Это свойство может принимать следующие значения:

inline : элемент становится строчным, подобно словам в строке текста

block : элемент становится блочным, как параграф

inline-block : элемент располагается как строка текста

list-item : элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера

run-in : тип блока элемента зависит от окружающих элементов

flex : позволяет осуществлять гибкое позиционирование элментов

table , inline-table : позволяет расположить элементы в виде таблицы

none : элемент не виден и удален из разметки html

Итак, значение block позволяет определить блочный элемент. Такой элемент визуально отделяется от соседних элементов переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются блочными и при визуализации веб-страницы визуально переносятся на новую строку.

Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения block :

Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block; . Поэтому этот элемент span переносится на новую строку.

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

Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width , height , margin .

inline-block

Еще одно значение — inline-block — представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width , height , margin .

Первый элемент span является строчным, у него значение inline , поэтому для него бессмысленно применять свойства width и height . А вот второй элемент span имеет значение inline-block , поэтому к нему жуе применяются и ширина, и высота, и при необходимости еще можно установить отступы.

run-in

Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:

Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block , то есть сам становится блочным

Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline , то есть сам становится строчным

Во всех остальных случаях элемент считается блочным

Табличное представление

Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:

Здесь список превращается в таблицу, а каждый элемент списка — в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell . Фактически вместо этого списка мы могли бы использовать стандартную таблицу.

Сокрытие элемента

Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:

CSS display table

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице

, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Полный список свойств и тегов, которые они заменяют:

display: table;
display: inline-table; но с display: inline-block
display: table-caption;
display: table-column-group;
display: table-column;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-cell; или

Таблица — сетка

Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Gr >display: table .

Рассмотрим пример – сетка 3×2 в три колонки сделанная таблицей:

Антигерой CSS-разметки — свойство «display: table»

Восстановление подмоченной репутации CSS-таблиц

Антигерой — один из центральных персонажей фильма, книги или пьесы, не обладающий обычными героическими качествами.

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

Импульс от давнего начала движения против использования HTML-таблиц был силен. Он оказал влияние на многие поколения разработчиков, заставив их думать, что любое использование таблиц — зло.

Надо признаться, я один из тех разработчиков, кто избегает табличной вёрстки даже для представления табличных данных. Мало того, я даже упрекал своих коллег, когда они использовали display: table для колоночной разметки (или разметки «Holy Grail»).

Оглядываясь назад, я понимаю, что с упрямством, достойным лучшего применения, тратил огромное количество времени на то, чтобы «заточить» CSS под нужную мне задачу.

Два типа табличной разметки

Использовать таблицы в вёрстке можно двумя способами: это HTML-таблица и CSS-таблица.

HTML-таблица — это когда для создания таблицы используется нативный HTML-тег

, а CSS-таблица — это имитация того же поведения, но с помощью CSS-свойств.

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

Если нечто выглядит, работает и ведёт себя как таблица, то оно ведь должно быть таблицей? Неправильно!

На самом деле, у CSS-таблиц есть одно ключевое отличие от HTML-таблиц: они могут перестать быть таблицами, стоит только изменить их CSS-свойства. А HTML-таблицы на такое не способны. Это открывает перед нами широкие возможности выборочного использования в вёрстке нужных табличных особенностей.

Ниже вы найдёте несколько примеров использования display: table :

Динамическое вертикальное выравнивание по центру

Нажимайте на кнопку, чтобы добавить строчки.

Это, пожалуй, самый распространённый способ использования display: table . С его помощью можно получить истинное выравнивание по вертикали элементов с динамической высотой.

Есть также другой, более короткий, способ вертикального выравнивания, который может вас заинтересовать:

Динамическое горизонтальное выравнивание по центру

Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным ( display: inline-block ). Затем внешнему контейнеру этого элемента нужно задать свойство text-align: center . Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство text-align: center , которое может переопределить существующие свойства.

Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу display: table и margin: auto .

Адаптивная вёрстка

Уменьшите окно до , чтобы увидеть адаптивность в действии.

Как я уже упоминал, CSS-таблица может вести себя не как таблица, когда это необходимо. Переключив у элемента свойство display с table-cell на block , мы сможем расположить элементы в стопку.

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

  1. Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
  2. Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

Эти решения отлично работают, но у них есть один недостаток: подвал должен быть фиксированной высоты. Эту проблему можно обойти средствами JavaScript, но я всё же предпочитаю использовать для этого CSS. С помощью display: table можно сделать прилипающий подвал с динамической высотой.

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.


Разметка «Holy Grail»

Такая разметка должна по мере возможности удовлетворять следующим требованиям:

  1. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
  2. Центральная колонка может идти первой в разметке.
  3. Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью display: table

В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью display: table вы сравнительно легко сделаете разметку «Holy Grail».

Вы шутите? Flexbox всё решит!

Это действительно так. Ознакомьтесь, например, с решением вышеприведённых задач с помощью flexbox от Phillip Walton. Однако, я бы не торопился его применять. На долю IE8 и IE9 до сих пор приходится 32% рынка десктопных браузеров — а это слишком много пользователей, чтобы отказываться от них ради удовольствия применить flexbox. Если только ваш сайт не рассчитан целиком на мобильный трафик — в чём я сильно сомневаюсь, — стоит выбрать display: table .

Уточнение: Я работаю на консалтинговую компанию, поэтому заинтересован в поддержке десктопов. Но если вам нужно поддерживать только мобильные браузеры, можете смело использовать flexbox.

Заключение

Надеюсь, с помощью приведённых примеров мне удалось продемонстрировать полезные свойства несправедливо пренебрегаемого display: table . Однако должен подчеркнуть, что CSS-таблицы — не панацея для разметки. Используйте их уместно, это позволит вам избежать длительных ночей правки CSS-кода.

display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Краткая информация

Значение по умолчанию inline
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный. inline-table Определяет, что элемент является таблицей, как при использовании

, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели. flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. list-item Элемент выводится как блочный и добавляется маркер списка. none Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента. run-in Устанавливает элемент как блочный или строчный, в зависимости от контекста. table Определяет, что элемент является блочной таблицей, подобно использованию

. table-caption Задаёт заголовок таблицы, подобно применению . table-cell Указывает, что элемент представляет собой ячейку таблицы (

. table-row Элемент отображается как строка таблицы (

). table-row-group
Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию

.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

Примечание

Internet Explorer до версии 7 включительно:

  • поддержка значений table-footer-group и table-header-group происходит только для элементов
и ;
  • для элементов
  • понимает значение block как list-item ;
  • значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.
  • Opera 9.2, а также Firefox 2.0:

    • значение table-column применяется только для ;
    • значение table-column-group поддерживается только для .

    Chrome до версии 4, а также Safari до версии 5:

    • значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline .
    • Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .
    • Значение run-in больше не поддерживается.

    Спецификация ?

    или

    ). table-column
    Назначает элемент колонкой таблицы, словно был добавлен . table-column-group
    Определяет, что элемент является группой одной или более колонок таблицы, как при использовании . table-footer-group
    Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой . table-header-group
    Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой

    Спецификация Статус
    CSS Display Module Level 3 Рабочий проект
    CSS Ruby Layout Module Level 1 Рабочий проект
    CSS Grid Layout Рабочий проект
    CSS Flexible Box Layout Module Возможная рекомендация
    CSS Level 2 (Revision 1) Рекомендация
    CSS Level 1 Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    ×

    Браузеры ?

    none, inline, block 4 12 1 7 1 1
    inline-block 5.5 12 1 7 1 3
    inline-flex, flex 11 12 29 17 9 28
    list-item 6 12 1 7 1 1
    run-in 8 12 1 7 1
    inline-table 8 12 1 7 1 3
    table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption 8 12 1 7 1 1
    none, inline, block 1 1 8 1
    inline-block 1 1 8 1
    inline-flex, flex 4.4 28 12.1 9.2
    list-item 1 1 8 1
    run-in 1 8 1
    inline-table 1 1 8 1
    table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption 1 1 8 1

    Браузеры

    В таблице браузеров применяются следующие обозначения.

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

    Число указывает версию браузера, начиная с которой свойство поддерживается.

    Свойство display:

    Сегодня узнаем об очень интересном свойстве css display: .

    Свойство display: отвечает в css за то, как будет показан элемент на странице.

    То есть будет ли элемент показан как блочный и всегда расположится с новой строки, или встроенный и расположится непосредственно в ряд с другими элементами.

    Что-же тут интересного? А то, что свойство display: задано по умолчанию всем элементам html, и если оно не указано в коде, то браузер отобразит элемент так, как это в нём заложено.

    Именно благодаря этому все элементы html подразделяются на блочные, такие как

    ,

    и встроенные, такие как , , и т.д.

    Внося это свойство в код, вы сможете самостоятельно решать, как будет отображён тот или иной элемент на экране монитора, то есть управлять элементами на своё усмотрение.

    Свойство display: имеет множество значений, которые мы сейчас рассмотрим.

    Наиболее популярные из них это block (блочный), inline (встроенный) и none (не отображается).

    1. display: block;

    Элемент отображается как блочный. Задано по умолчанию всем блочным элементам.

    Если задать встроенному элементу, то он будет отображён как блочный, то есть с новой строки и займёт всё пространство по ширине родительского блока.

    Бла-бла-бла Текс-текст-текст бла-бла-бла

    2. display: inline;

    Отображает элемент как встроенный. Задано по умолчанию всем встроенным элементам.

    Если задать блочному элементу, то он отобразится как встроенный, в пределах содержания элемента.

    Делает элемент невидимым. Место элемента освобождается и может быть занято другими элементами.

    4. display: inline-block;

    Элемент остаётся встроенным, то есть располагается в строку и занимает место по своим размерам, но в то-же время принимает свойства блочного элемента, например width (ширина) и height (высота), которые недоступны встроенным элементам, кроме тега которому display: inline-block; задан по умолчанию.

    Удобно применять когда несколько блоков нужно расположить в одной строке.

    5. display: list-item;

    Добавляет к элементу маркер списка. По умолчанию задан тегам списка, но может быть применён к любому элементу html.

    Только при этом обязательно надо указать вид маркера.

    Дальше пойдут так называемые табличные значения.

    Свойство display: задано всем табличным тегам по умолчанию, но можно написать таблицу и с другими элементами html.

    Понадобится это может, по моему, только в одном случае:

    Если у вас в файле стилей уже заданы все свойства для таблиц, со всеми отступами, рамками и цветами, то они распространяются на все таблицы сайта, а вам необходимо сделать таблицу с совершенно другим оформлением, вот тогда и пригодятся табличные значения свойства display:.

    1. display: table;

    Определяет элемент как таблицу. Отражается как блочный. (тег

    )

    К элементу начинают применяться свойства таблиц, рассчитывающие размер ячеек по наибольшей.

    2. display: table-caption;

    Определяет заголовок таблицы. (тег )

    3. display: table-row;

    Определяет элемент как строку таблицы. (тег

    )

    4. display: table-cell;

    Определяет элемент как ячейку таблицы. (теги

    )

    5. display: table-column;

    Определяет элемент как колонку таблицы. (тег )

    6. display: table-column-group;

    Определяет элемент как группу колонок. (тег )

    7. display: table-header-group;

    Определяет элемент как контейнер для нескольких строк таблицы, расположенных в начале таблицы.

    Применяется для задания группе строк однотипных свойств.

    8. display: table-row-group;

    Определяет элемент как контейнер для нескольких строк таблицы, расположенных в середине таблицы.

    9. display: table-footer-group;

    Определяет элемент как контейнер для нескольких строк таблицы, расположенных в конце таблицы.

    Практическое применение значений group — табличная вёрстка сайта.

    CSS свойство display элементов HTML-документа

    Для позиционирования на экране различных устройств различных элементов HTML-документа применяются разные HTML-теги. Однако, стандартная разметка HTML не всегда подходит для правильного отображения того или иного элемента с точки зрения дизайна. Для того, чтобы правильно разместить тот или иной элемент иногда требуется поменять его стандартное поведение в массиве других, окружающих его документов. Для этих целей удобнее всего задать (или переопределить) CSS свойство display , которое определяет, как элемент должен быть показан в документе. В этой статье рассмотрим, какие значения может принимать свойство display и как это скажется на свойствах и поведении того, объекта, к которому это свойство применяется.

    Значения CSS свойства display для элементов HTML-документа