Display css table cell: Антигерой CSS-разметки — свойство «display: table» — журнал «Доктайп»

CSS свойство Display — все основные значения

Самый большой трюк в обработке HTML-элементов – это понимание того, что нет ничего особенного в том, как большинство из них работают. В большинстве случаев страницы могут быть созданы с помощью нескольких тегов, к которым применен стиль в соответствии с личными предпочтениями.

Стандартное представление браузером большинства HTML-элементов включает стили шрифта, отступы, поля и, главным образом, типы отображения (display).

Главными типами отображения являются inline (встроенный), none (не показывать) и block-line (блок). Вы можете применять их, используя значения свойства display: inline, block и none.

inline действует так, как подсказывает его имя. Элементы, представленные с помощью inline всегда следуют потоку линии. Элементы strong (жирное начертание), emphasis (курсив) и anchor (якорь) обычно представлены инлайном на большинстве страниц.

block помещает разрыв строки над и под элементом. Элементы абзац и заголовок обычно отображаются в стиле block-line.

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

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

h2 {
	display: inline;
	font-size: 2em;
}
#header p {
	display: inline;
	font-size: 0.9em;
	padding-left: 2em;
}

Благодаря этому заголовок страницы и ключевая фраза представлены рядом, а не друг под другом. В тоже время сохранена оптимальная доступность .

#navigation, #seeAlso, #comments, #standards {
	display: none;
}

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

display: none и visibility: hidden различаются в том, что display: none стирает элемент полностью со страницы, в то время, как visibility: hidden содержит элемент и его поток нетронутыми в визуальном представлении.

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

Таблицы и свойства

Самый простой способ понять значения табличных свойств отображения, это рассматривать их в контексте HTML-таблиц. table – это базовое представление. Вы также можете представить элементы tr и td значениями свойств table-row и table-cell соответственно.

Свойство display дает вам еще больше возможностей и предлагает вам в качестве значений table-column, table-row-group, table-column-group, table-header-group, table-footer-group и table-caption. Я думаю, все эти значения говорят сами за себя. Что сразу приходит на ум – это преимущество конструирования таблиц колонками вместо метода, который применяется в HTML

В конечном счете значение inline-table фактически помещает вашу таблицу без разрывов строк сверху и снизу.

Если вы позволите себе увлечься CSS таблицами, доступность вашего сайта может серьезно пострадать. Цель HTML – передать значение. Следовательно, любые данные, которые должны быть представлены в табличном виде, лучше отображать при помощи значений HTML.

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

Другие типы отображения

list-item говорит сам за себя. Работает практически идентично элементу li в HTML. Для корректного отображения, элементы должны быть вложены внутри элементов ul или ol.

run-in показывает элемент в строке или блоке. Это зависит от того, как показывается родительский элемент. Помните, что этот функционал недоступен в IE и браузерах на основе Mozilla.

compact также показывает элемент встроенным в линию или блок в зависимости от контекста. Он также не очень полезен…

marker используется только вместе с псевдоэлементами :before и :after, чтобы описать отображение значения свойства content. По умолчанию свойство content уже отображается как marker. Поэтому marker полезен тогда, когда вы пытаетесь переписать предыдущее свойство display для псевдоэлемента.

[ads-pc-1]
[ads-mob-1]

Оцени статью

Средняя оценка 0 / 5. Количество голосов: 0

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

CSS свойство display

Определяет, как элемент должен быть показан в документе (тип его отображения)

CSS синтаксис

display: значение;

Возможные значения

Значение	Описание
inline	Элемент отображается как встроенный (подобно <span>).
block	Элемент отображается как блоковый (подобно <div>).
flex	Элемент отображается как flex-контейнер блочного уровня (гибкий контейнер). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-block	Генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-flex	Элемент отображается как flex-контейнер встроенного уровня (гибкий элемент). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-table	Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и обтекается другими элементами.
list-item	Элемент ведет себя подобно элементу <li>.
run-in	Генерирует либо встроенный, либо блочный элемент в зависимости от контекста.
table	Элемент ведет себя подобно элементу <table>.
table-caption	Элемент ведет себя подобно элементу <caption>.
table-column-group	Элемент ведет себя подобно элементу <colgroup>.
table-header-group	Элемент ведет себя подобно элементу <thead>.
table-footer-group	Элемент ведет себя подобно элементу <tfooter>.
table-row-group	Элемент ведет себя подобно элементу <tbody>.
table-cell	Элемент ведет себя подобно элементу <td>.
table-column	Элемент ведет себя подобно элементу <col>.
table-row	Элемент ведет себя подобно элементу <tr>.
none	Элемент не отображается (и не имеет никакого воздействия на верстку страницы).
inherit	Значение наследуется от родительского элемента.
initial	Устанавливает значение по умолчанию.

Совместимость: Полностью поддерживаются всеми браузерами только значения block, inline, list-item и none. Значения inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row и table-row-group не поддерживаются IE7 и более ранними версиями. В IE8 требуется декларация !DOCTYPE. IE9 поддерживает все значения. В Safari для значений flex и inline-flex требуется указывать префикс, например, «display: -webkit-flex» и «display: -webkit-inline-flex;«.

Пример использования

Отображаем параграф, как встроенный элемент

p.inline {
     display: inline;
}

html — Стилизация таблиц CSS, где используется display: table-row

спросил

Изменено 3 года, 11 месяцев назад

Просмотрено 3к раз

Я пытаюсь стилизовать таблицу CSS, чтобы нарисовать серую рамку вокруг каждой строки и чередовать серый/белый фон для каждой строки.

 .table_row_line {
  граница: 2px сплошной темно-серый;
  ширина: 100%;
  высота: 100%;
  отступ: 5px;
} 

 <раздел>
  <заголовок>
    <дел>
    <дел>
    <дел>
  
  <дел>
    <дел>
    <дел>
    <дел>