Display table row: table» — Блог HTML Academy

Leave a Comment / Разное / By /

Содержание

HTML и CSS с примерами кода

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

Позиционирование
  • bottom
  • clear
  • display
  • float
  • left
  • position
  • right
  • top
  • z-index

Синтаксис

/* <display-outside> values */
display: block;
display: inline;
display: run-in;
/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;
/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;
/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;
/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* <display-box> values */
display: contents;
display: none;
/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;
/* Global values */
display: inherit;
display: initial;
display: unset;

Значения

Значение по-умолчанию: inline

Наследуется: нет

Применяется ко всем элементам

Анимируется: нет

block
Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-table
Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
inline-flex
Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
flex
Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
grid
Элемент ведет себя как блочный и выкладывает содержимое согласно грид-модели
list-item
Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
table
Определяет, что элемент является блочной таблицей, подобно использованию <table>.
table-caption
Задаёт заголовок таблицы, подобно применению <caption>.
table-cell
Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).
table-column
Назначает элемент колонкой таблицы, словно был добавлен <col>.
table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.
table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>
.
table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.
table-row
Элемент отображается как строка таблицы (<tr>).
table-row-group
Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.

Примечания

Chrome 32 — Значение run-in больше не поддерживается.

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

  • 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

Поддержка браузерами

display: flow-root:

Can I Use flow-root? Data on support for the flow-root feature across the major browsers from caniuse.com.

display: table-*:

Can I Use css-table? Data on support for the css-table feature across the major browsers from caniuse.com.

display: contents:

Can I Use css-display-contents? Data on support for the css-display-contents feature across the major browsers from caniuse. com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>display</title>
    <style>
      .example {
        border: dashed 1px #634f36; /* Параметры рамки */
        background: #fffff5; /* Цвет фона */
        font-family: 'Courier New', Courier, monospace; /* Шрифт текста */
        padding: 7px; /* Поля вокруг текста */
        margin: 0 0 1em; /* Отступы */
      }
      .exampleTitle {
        border: 1px solid black; /* Параметры рамки */
        border-bottom: none; /* Убираем линию снизу */
        padding: 3px; /* Поля вокруг текста */
        display: inline; /* Устанавливаем как строчный элемент */
        background: #efecdf; /* Цвет фона */
        font-weight: bold; /* Жирное начертание */
        font-size: 90%; /* Размер текста */
        margin: 0; /* Убираем отступы */
        white-space: nowrap; /* Отменяем переносы текста */
      }
    </style>
  </head>
  <body>
    <p>Пример</p>
    <p>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.
 
 
  01 Transitional//EN">
      <br />
      <html>
        <br />
        <body>
          <br />
          <b>Формула серной кислоты:</b>
          <i
            >H<sub><small>2</small></sub> SO<sub
              ><small>4</small>
            </sub></i
          ><br />
        </body>
        <br />
      </html>
    </p>
  </body>
</html>

css display table caption — ComputerMaker.info

Автор admin На чтение 6 мин. Просмотров 57 Опубликовано

Свойство CSS display используется для изменения типа HTML-элемента — блочный (block), встроенный (inline), элемент списка и так далее. Также надо понимать, что применение свойства display не дает права пренебрегать синтаксисом HTML, например, элемент

в любом случае не может содержать блочные теги, даже если к ним применен display: inline .

Содержание

  1. Тип свойства
  2. Значения
  3. Синтаксис
  4. Таблица — сетка
  5. 1 Answer 1

Тип свойства

Применяется: ко всем элементам.

Значения

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

Значения свойства display их описание и поддержка браузерами
ЗначениеОписаниеПоддержка
inlineЭлемент ведет себя, как встроенный, то есть не создает до и после себя перевод строк в начало.Всеми браузерами
blockПрименение данного значения преобразует элемент в блочный, то есть он создает до и после себя перевод строк в начало.
  • При добавлении значения block к тегам , Internet Explorer 6.0 и 7.0 не убирают у них маркеры, то есть действуют так, как будто это значение list-item.
IE 6.0 и 7.0
Остальные браузеры
inline-blockЭлемент становится блочным, например, у него можно изменять ширину и высоту. Но окружающие элементы воспринимают его как встроенный, то есть он не создает до и после себя переноса строк.
  • Internet Explorer 6.0 и 7.0 выравнивают низ элемента по базовой линии строки, на которой он находится, а все остальные браузеры базовую линию последней строки элемента. Кроме этого, IE 6.0 и 7.0 не поддерживает это значение для блочных элементов и тех, которые ведут себя, как блоки (например, элементы списков).
IE 6.0 и 7.0
Firefox 2.0
Остальные браузеры
list-itemЭлемент преобразуется в блочный, но со свойствами элемента списка (тег ) к которому можно применить, например, list-style-type. И если их на странице присутствует несколько, то они являются элементами одного списка.Всеми браузерами
noneЭлемент не отображается на странице и никаким образом не влияет на ее форматирование — другие элементы ведут себя так, будто его нет совсем. Это же свойство наследуется всеми потомками элемента, причем его нельзя изменить применив к ним display .Всеми браузерами
run-inЭлемент становится блочным или встроенным в зависимости от его местонахождения в HTML-коде по следующим правилам:
  1. Если элемент run-in содержит блочный элемент, то он тоже становится блочным.
  2. Если элемент run-in указан перед блочным элементом, который не является абсолютно позиционированным или всплывающим. То элемент run-in становится первым встроенным элементом данного блочного элемента.
  3. В противном случае элемент run-in становится блочным.
IE 6.0 и 7.0
Firefox 2.0 и выше
Остальные браузеры
tableСоздание блочного элемента определяющего таблицу, подобно тегу .IE 6.0 и 7.0
Остальные браузеры
inline-tableСоздание встроенного элемента определяющего таблицу, которая не создает переносы строк, а располагается на одной строке с другими инлайн-элементами.
  • Браузеры, которые поддерживают inline-table совершенно по-разному выравнивают встроенную таблицу относительно строки, на которой она находится: одни совмещают базовую линию строки и низ таблицы, другие — верх, третьи — базовую линию первой строки таблицы.
IE 6.0 и 7.0
Firefox 2.0
Остальные браузеры
table-captionЭлемент используется для создания заголовка HTML-таблицы, аналог тега .IE 6.0 и 7.0
Остальные браузеры
table-column-groupЭлемент для группирования одного или нескольких столбцов таблицы, как тег .IE 6.0 и 7.0
Остальные браузеры
table-columnЭлемент, определяющий столбец таблицы, как тег .IE 6.0 и 7.0
Остальные браузеры
table-header-groupЭлемент, предназначен для создания «шапки» таблицы, аналог тега . Причем на него распространяются те же правила: должен указываться перед элементами определяющими тело и футер таблицы, но после заголовка и элементов группирования столбцов. Если в таблице присутствует несколько элементов с display: table-header-group , то только первый станет шапкой, остальные будут отнесены к телу таблицы.IE 6.0 и 7.0
Остальные браузеры
table-footer-groupЭлемент, предназначен для создания футера таблицы, аналог тега . Должен указываться перед ее телом, но после «шапки». Если в таблице присутствует несколько элементов с display: table-footer-group , то только первый станет футером, остальные будут отнесены к телу таблицы.IE 6.0 и 7.0
Остальные браузеры
table-row-groupСоздание элемента предназначенного для создания тела таблицы, аналог тега .IE 6.0 и 7.0
Остальные браузеры
table-rowЭлемент для создания ряда (строки) таблицы, аналог тега .IE 6.0 и 7.0
Остальные браузеры
table-cellЭлемент используется для создания ячейки таблицы, аналог тега .IE 6.0 и 7.0
Остальные браузеры
inheritНаследует значение свойства CSS display от родительского элемента.IE 6.0 и 7.0
Остальные браузеры

Процентная запись: не существует.

Значение по умолчанию: inline.

Синтаксис

Пример CSS: использование display

Результат. Использование свойства CSS display.

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

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

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

1 Answer 1

Here is what the spec says about display: table-caption :

table-caption (In HTML: CAPTION)

Specifies a caption for the table. All elements with ‘display: table-caption’ must be rendered, as described in section 17.4.

And here is what the section 17.4 says about rendering of caption boxes:

The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal block boxes inside the table wrapper box.

The key part is that they are rendered as normal block boxes and hence each of them is displayed one below the other (as in, in their own row).

Other points to note: (A summary of my discussion with GCyrillus in comments)

  • Parent container with display: table is not required for a child to have display: table-cell or display: table-caption . You can find more details and reference to the relevant part of the spec in this SO thread
  • There should ideally be only one caption per table. User Agents probably don’t expect multiple captions to be provided under the same parent/table and it probably explains why Firefox renders it differently from Chrome. But details on that are beyond the scope of this answer (in my opinion) as the question only asks why display: table-caption causes vertical layout.
  • I concur with GCyrillus, it is definitely bad practice to use display: table-caption on multiple elements under the same parent. I believe you were doing trial and error in an attempt to learn.

Русский

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 в три колонки сделанная таблицей:

Now when I change table-caption to table-cell it renders horizontally. Below is the demo of it.

Any reason for the different renderings?

.. what? table-caption renders it like a element (which is displayed vertically). table-cell is like a

element (which is displayed horizontally). – MortenMoulder Mar 12 ’16 at 13:14

Display table cell отступы

display: table;
display: inline-table;
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;или