Display cell table css: table» — Блог HTML Academy

Содержание

display | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+2.0+7.0+1.0+1.0+2.1+1.0+

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

Значение по умолчанию inline
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#display-prop

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
ЗначениеОписаниеIE6IE7IE8Cr2Cr8Op9.2 Op10Sa3.1Sa5Fx3Fx4
blockЭлемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inlineЭлемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-blockЭто значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-tableОпределяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-itemЭлемент выводится как блочный и добавляется маркер списка.
noneВременно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-inУстанавливает элемент как блочный или встроенный в зависимости от контекста.
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>.            

Пример

HTML5CSS 2.1IECrOpSaFx

<!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> &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br> &lt;html&gt;<br> &lt;body&gt;<br> &lt;b&gt;Формула серной кислоты:&lt;/b&gt; &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt; SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt; &lt;/sub&gt;&lt;/i&gt;<br> &lt;/body&gt;<br> &lt;/html&gt;</p> </body> </html>

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

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

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

[window.]document.getElementById(«elementID»).style.display

Браузеры

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

  • поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
  • для элементов <li> понимает значение block как list-item;
  • значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

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

Chrome 2.0, а также Safari версии 3 и старше, iOS:

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

Safari 3.1

  • Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Форматирование

CSS по теме

  • display

Статьи по теме

  • DIV-ные колонки одинаковой высоты на CSS
  • Блочные элементы
  • Можно ли оборачивать ссылкой блок?
  • Ошибка с блочными ссылками в IE6
  • Почти стандартный режим
  • Почти стандартный режим
  • Создание тени по типу «луковой шелухи»
  • Список с русскими буквами
  • Строчно-блочные элементы
  • Строчные элементы
  • Строчные элементы

Рецепты CSS

  • Как разместить элементы списка горизонтально?
  • Как сделать блок со скругленными уголками без рисунков?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как сделать, чтобы слой целиком был ссылкой?
  • Как создать рамку со скругленными уголками без изображений?

display — CSS | MDN

Свойство display (CSS) определяет _тип отображения (display type) элемента_, имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и

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

Некоторые значения свойства display полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведён ниже.

/* <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-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;

Свойство display задаётся с помощью ключевых слов.

Ключевые слова группируются по шести категориям:

<display-outside>

Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.

<display-inside> (en-US)

Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).

<display-listitem>

Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.

<display-internal> (en-US)

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

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

<display-box> (en-US)

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

<display-legacy> (en-US)

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

<display-xul> Non-standard Устарело

Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.

«Наследственные» значения отображения

Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

.container {
    display: inline flex;
}

В настоящее время это можно задать с помощью одного значения.

.container {
    display: inline-flex;
}

Формальный синтаксис

display = 
[ (en-US) <display-outside> || (en-US) <display-inside> ] (en-US) | (en-US)
<display-listitem> | (en-US)
<display-internal> | (en-US)
<display-box> | (en-US)
<display-legacy> | (en-US)
<display-outside> || (en-US) [ (en-US) <display-inside> | (en-US) math ] (en-US)

"><display-outside> =
block | (en-US)
inline | (en-US)
run-in

"><display-inside> =
flow | (en-US)
flow-root | (en-US)
table | (en-US)
flex | (en-US)
grid | (en-US)
ruby

"><display-listitem> =
<display-outside>? (en-US) && (en-US)
[ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US) && (en-US)
list-item

"><display-internal> =
table-row-group | (en-US)
table-header-group | (en-US)
table-footer-group | (en-US)
table-row | (en-US)
table-cell | (en-US)
table-column-group | (en-US)
table-column | (en-US)
table-caption | (en-US)
ruby-base | (en-US)
ruby-text | (en-US)
ruby-base-container | (en-US)
ruby-text-container

"><display-box> =
contents | (en-US)
none

"><display-legacy> =
inline-block | (en-US)
inline-table | (en-US)
inline-flex | (en-US)
inline-grid

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

Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений display в других статьях на MDN:

  • Разметка CSS Grid
  • Разметка CSS Flexible box
  • Разметка CSS (Модуль обучения для начинающих)

display: none;

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

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

display: contents;

Браузеры удаляют любой элемент со свойством display, имеющим значение contents из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

  • Display: Contents Is Not a CSS Reset | Adrian Roselli
  • More accessible markup with display: contents — hiddedevries.nl

Таблицы

Если у элемента <table> (en-US) изменить значение свойства display на ``block, grid или flex, это изменит его представление в дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.

  • Short note on what CSS display properties do to table semantics — The Paciello Group
  • Hidden content for better a11y | Go Make Things
  • MDN Understanding WCAG, Guideline 1.3 explanations
  • Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
Specification
CSS Display Module Level 3
# the-display-properties

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Блоковая и Inline разметка нормальном потоке (en-US)
  • Formatting contexts explained (en-US)
  • visibility, float, position
  • grid, flex

Last modified: , by MDN contributors

Help:Tables — MediaWiki

Other languages:

  • Bahasa Indonesia
  • Deutsch
  • English
  • Esperanto
  • Nederlands
  • Tiếng Việt
  • Türkçe
  • Yorùbá
  • Zazaki
  • català
  • dansk
  • español
  • français
  • italiano
  • polski
  • português
  • português do Brasil
  • română
  • slovenčina
  • srpskohrvatski / српскохрватски
  • suomi
  • svenska
  • čeština
  • русский
  • тоҷикӣ
  • українська
  • հայերեն
  • العربية
  • فارسی
  • ไทย
  • 中文
  • 日本語
  • 한국어
Note: When you edit this page, you agree to release your contribution under the CC0. See Public Domain Help Pages for more info.
Tables redirects here; for information about database table structure, see Manual:Database layout .

Tables may be created in wiki pages. As a general rule, it is best to avoid using a table unless you need one. Table markup often complicates page editing.[1]

{| table start, required
|+ table caption, optional; only between table start and table row
|- table row, optional on first row—wiki engine assumes the first row
! table header cell, optional. Consecutive table header cells may be added on same line separated by double marks (!!) or start on new lines, each with its own single mark (!).
| table data cell, optional. Consecutive table data cells may be added on same line separated by double marks (||) or start on new lines, each with its own single mark (|).
|} table end, required
  • The above marks must start on a new line except the double || and !! for optionally adding consecutive cells to a line. However, blank spaces at the beginning of a line are ignored.
  • HTML attributes. Each mark, except table end, optionally accepts one or more HTML attributes. Attributes must be on the same line as the mark. Separate attributes from each other with a single space.
    • Cells and caption (| or ||, ! or !!, and |+) hold content. So separate any attributes from content with a single pipe (|). Cell content may follow on same line or on following lines.
    • Table and row marks ({| and |-) do not directly hold content. Do not add pipe (|) after their optional attributes. If you erroneously add a pipe after attributes for the table mark or row mark the parser will delete it and your final attribute if it was touching the erroneous pipe!
  • Content may (a) follow its cell mark on the same line after any optional HTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists, headings, or nested tables, must be on its own new line.
    • Pipe character as content. To insert a pipe (|) character into a table, use the <nowiki>|</nowiki> escaping markup.

Create a table with editor toolbar

In wikitext editor, place the caret where you want to insert a table. Then, in the toolbar, press “Advanced”, then choose  Table button. A dialog opens.

From the dialog, you can choose whether to enable a table header row, to stylize the table with border and to make the table sortable. A preview example is displayed. You can also set row and column counts you need. Then, press “Insert” button.

By default, the following code is generated:

Wikicode:
{|
|+ Caption text
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
Result:
Caption text
Header text Header text Header text
Example Example Example
Example Example Example
Example Example Example

Minimal syntax

The following table lacks borders and good spacing but shows the simplest wiki markup table structure.

You type You get
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

The cells in the same row can be listed on one line separated by || (two pipe symbols). If the text in the cell should contain a line break, use ‎<br /> instead.

You type You get
{|
|Orange||Apple||more
|-
|Bread||Pie||more
|-
|Butter||Ice<br/>cream||and<br/>more
|}
Orange Apple more
Bread Pie more
Butter Ice
cream
and
more

Extra spaces within cells in the wiki markup, as in the wiki markup below, do not affect the actual table rendering.

You type You get
{|
|  Orange || Apple || more
|-
|   Bread || Pie || more
|-
|   Butter || Ice cream || and more
|}
Orange Apple more
Bread Pie more
Butter Ice cream and more

You can have longer text or more complex wiki syntax inside table cells, too:

You type You get
{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua.  
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

Table headers

Table headers can be created by using «!» (exclamation mark) instead of «|» (pipe symbol). Headers usually show up bold and centered by default.

You type You get
{|
!| Item
! Amount
! Cost
|-
|Orange
|10
|7. 00
|-
|Bread
|4
|3.00
|-
|Butter
|1
|5.00
|-
!Total
|
|15.00
|}
Item Amount Cost
Orange 10 7.00
Bread 4 3.00
Butter 1 5.00
Total 15.00

When using attributes as in the heading ‘Item’ a vertical bar ‘|’ is used for separation. Not an exclamation character ‘!’.

Caption

A table caption can be added to the top of any table as follows.

You type You get
{|
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
Food complements
Orange Apple
Bread Pie
Butter Ice cream

class=»wikitable»

Basic styling (light gray background, borders, padding and align left) can be achieved by adding.

You type You get
{|
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
Food complements
Orange Apple
Bread Pie
Butter Ice cream

HTML colspan and rowspan

You can use HTML colspan and rowspan attributes on cells for advanced layout.

You type You get
{|
!colspan="6"|Shopping List
|-
|rowspan="2"|Bread & Butter
|Pie
|Buns
|Danish
|colspan="2"|Croissant
|-
|Cheese
|colspan="2"|Ice cream
|Butter
|Yogurt
|}
Shopping List
Bread & Butter Pie Buns Danish Croissant
Cheese Ice cream Butter Yogurt

You can add HTML attributes to tables. For the authoritative source on HTML attributes, see the W3C’s HTML Specification page on tables.

Attributes on tables

Placing attributes after the table start tag ({|) applies attributes to the entire table.

You type You get
{|
|Orange
|Apple
|12,333.00
|-
|Bread
|Pie
|500.00
|-
|Butter
|Ice cream
|1.00
|}
Orange Apple 12,333.00
Bread Pie 500.00
Butter Ice cream 1.00

Attributes on cells

You can put attributes on individual cells. For example, numbers may look better aligned right.

You type You get
{|
| Orange
| Apple
| | 12,333.00
|-
| Bread
| Pie
| | 500.00
|-
| Butter
| Ice cream
| | 1.00
|}
Orange Apple 12,333. 00
Bread Pie 500.00
Butter Ice cream 1.00

You can also use cell attributes when you are listing multiple cells on a single line. Note that the cells are separated by ||, and within each cell the attribute(s) and value are separated by |.

You type You get
{|
| Orange || Apple     || | 12,333.00
|-
| Bread || Pie       || | 500.00
|-
| Butter || Ice cream || | 1.00
|}
Orange Apple 12,333.00
Bread Pie 500.00
Butter Ice cream 1.00

Attributes on rows

You can put attributes on individual rows, too.

You type You get
{|
| Orange
| Apple
|| 12,333. 00
|-
| Bread
| Pie
|| 500.00
|-
| Butter
| Ice cream
|| 1.00
|}
Orange Apple 12,333.00
Bread Pie 500.00
Butter Ice cream 1.00

Attributes on caption and headers

Attributes can be added to the caption and headers as follows.

You type You get
{|
|+|''Food complements''
|-
! | Fruits
! | Fats
|-
|Orange
|Butter
|-
|Pear
|Pie
|-
|Apple
|Ice cream 
|}
Food complements
Fruits Fats
Orange Butter
Pear Pie
Apple Ice cream

Border width

If «border-width:» has only one number, it is for all four border sides:

You type You get
{|style="border-style: solid; border-width: 20px"
|
Hello
|}

If «border-width:» has more than one number, the four numbers are for top, right, bottom, left (REMEMBER clockwise order ↑→↓←):

You type You get
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
Hello
|}
When there are fewer than 4 values :
  • three values i. e. top, right, bottom: then the default value for left is the one of right (second value). Width is then the same on left and right side.
  • two values i.e. top, right: then the default value for bottom is the one of top (first value), and left by default is assigned the value of right (second value). Width on top is then the same as on bottom; width on left is the same as on right.
  • one value i.e. top: then the default value for right is the one of top and it is the same for bottom and left. The fourth width are the same and build a regular border. This is a writing shortcut.

Another method to define the widths of the four sides of a cell is to use «border-left», «border-right», «border-top» and «border-bottom»:

You type You get
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" 
|
Hello
|}

With HTML attributes and CSS styles

CSS style attributes can be added with or without other HTML attributes.

You type You get
{| cellpadding="10"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

Padding

You type You get
{|class=wikitable 
| | Example of
|-
| | Example of<br/><br/>Specify the padding on '''EACH CELL'''
|-
| | Example of
|}
Example of
Example of

Specify the padding on EACH CELL

Example of

Column width

Column width can be added as follows.

You type:

{|
| colspan="2" | This column width is 85% of the screen width
|-
|| '''This column is 30% counted from 85% of the screen width'''
|| '''This column is 70% counted from 85% of the screen width'''
|}

You get:

This column width is 85% of the screen width
This column is 30% counted from 85% of the screen width This column is 70% counted from 85% of the screen width

Accessibility of table header cells

Table header cells do not explicitly specify which table data cells they apply to (those on their right on the same row, or those below them on the same column). When the table is rendered in a visual 2D environment, this is usually easy to infer.

However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope=»row» or scope=»col» attribute on table header cells. In most cases with simple tables, you’ll use scope=»col» on all header cells of the first row, and scope=»row» on the first cell of the following rows:

You type You get
{|
|-
! scope="col"| Item
! scope="col"| Quantity
! scope="col"| Price
|-
! scope="row"| Bread
| 0.3 kg
| $0.65
|-
! scope="row"| Butter
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| Total
| $1.90
|}
Item Quantity Price
Bread 0.3 kg $0. 65
Butter 0.125 kg $1.25
Total $1.90

Table alignment

Table alignment is achieved by using CSS. The table alignment is controlled by margins. A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as auto. To have a table center aligned, you should set both margins to auto

For example, a right-aligned table:

You type You get
{|
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

And a center-aligned table:

You type You get
{|
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

Table floating around text

If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table. You can make the text to be wrapped around the table by making the table to float around the text instead of just aligning it. This can be achieved using the float CSS attribute, which can specify where the table floats to the right side or to the left. When using float, margins doesn’t control table alignment and can be used to specify the margin between the table and the surrounding text.

You type You get
{|
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi. 
Orange Apple
Bread Pie
Butter Ice cream

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Cell contents alignment

The alignment of cell contents can be controlled with 2 different CSS properties: text-align and vertical-align. text-align can be specified at the table, row or individual cells, while vertical-align only can be specified at individual rows or cells.

You type You get
{|
|-
| | A
| | B
| | C
|-
| | D
| | E
| | F
|-
| | G
| | H
| | I
|}
A B C
D E F
G H I

Negative numbers

If you start a cell on a new line with a negative number with a minus sign (or a parameter that evaluates to a negative number), your table can get broken, because the characters |- will be parsed as the wiki markup for table row, not table cell. To avoid this, insert a space before the value (| -6) or use in-line cell markup (|| -6).

CSS vs attributes

Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers.

Common attributes for columns, column groups and row groups

The MediaWiki syntax for tables currently offers no support for specifying common attributes for columns (with the HTML element ‎<col />), column groups (HTML element ‎<colgroup>‎</colgroup>) and row groups (HTML elements ‎<thead>‎</thead>, ‎<tbody>‎</tbody> and ‎<tfoot>‎</tfoot>). Those standard HTML elements are not accepted even in their HTML or XHTML syntax.

All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element ‎<tbody>‎</tbody>) without any attributes or styles.

See also: Help:VisualEditor/User guide

See Phab: T108245: «Fully support basic table editing in the visual editor». See the list of tasks. Finished tasks are struck. It can be difficult to figure out from the technical language there what exactly has been improved, or what features have been added. Please add explanatory info below.

Can now move or delete columns and rows

Click on a column or row header. Then click on the arrow. From the popup menu click on «Move» or «Delete».

Insert blank row or column

From the same popup menu click on «Insert».

Copy table from web page to Visual Editor

It is possible to copy and paste a table from a web page directly into the Visual Editor (VE). To do so safely, use a sandbox and check the table for proper coding in wikitext source mode and proper display in the Visual Editor and in preview mode.

  • Excel2Wiki allows you to copy a stylesheet from Excel, Apache OpenOffice, LibreOffice, or Gnumeric to convert it into wikicode table.
  • Sorting rows of a table
  • m:Help:Sorting
  • w:Help:Tables
  • A visual tool that helps generate tables
  1. ↑ Tables can be created using either HTML table elements directly, or using wikicode formatting to define the table. HTML table elements and their use are well described on various web pages and will not be discussed here. The benefit of wikicode is that the table is constructed of character symbols which tend to make it easier to perceive the table structure in the article editing view compared to HTML table elements.
  2. ↑ HTML table cellpadding Attribute

tablelayout — Как должен работать CSS «display: table-column»?

Модель таблицы CSS основана на модели таблицы HTML http://www. w3.org/TR/CSS21/tables.html

Таблица разделена на СТРОКИ, и каждая строка содержит одну или несколько ячеек. Ячейки являются дочерними элементами ROWS, они НИКОГДА не являются дочерними элементами столбцов.

«display: table-column» НЕ предоставляет механизм для создания макетов столбцов (например, газетные страницы с несколькими столбцами, где содержимое может перетекать из одного столбца в другой).

Вместо этого «таблица-столбец» устанавливает ТОЛЬКО атрибуты, которые применяются к соответствующим ячейкам в строках таблицы. Например. «Цвет фона первой ячейки в каждой строке — зеленый».

Сама таблица всегда структурирована так же, как и в HTML.

В HTML (обратите внимание, что «td» находятся внутри «tr», а НЕ внутри «col»):

 
  <кол.. />
  <кол.. />
  <тр..>
    <тд ..>
    <тд ..>
  
  <тр..>
    <тд ..>
    <тд ..>
  

Соответствующий HTML-код с использованием свойств таблицы CSS (Обратите внимание, что разделы div «column» не содержат никакого содержимого — стандарт не позволяет размещать содержимое непосредственно в столбцах):

 . mytable {
  дисплей: таблица;
}
.myrow {
  отображение: таблица-строка;
}
.mycell {
  отображение: таблица-ячейка;
}
.column1 {
  отображение: таблица-столбец;
  цвет фона: зеленый;
}
.column2 {
  отображение: таблица-столбец;
} 
 <дел>
  <дел>
  <дел>
  <дел>
    
содержимое первой ячейки в строке 1
содержимое второй ячейки в строке 1
<дел>
содержимое первой ячейки в строке 2
содержимое второй ячейки в строке 2


ДОПОЛНИТЕЛЬНО : как «строки», так и «столбцы» могут быть оформлены путем назначения нескольких классов каждой строке и ячейке следующим образом. Этот подход обеспечивает максимальную гибкость при указании различных наборов ячеек или отдельных ячеек для оформления:

 //Полезные объявления css, в зависимости от того, на что вы хотите повлиять, включают:

/* все ячейки (с "class=mycell") */
.mycell {
}

/* класс row1, где бы он ни использовался */
. row1 {
}

/* все ячейки row1 (если вы поместили "class=mycell" в каждую ячейку) */
.row1 .mycell {
}

/* ячейка1 строки1 */
.row1 .cell1 {
}

/* ячейка1 всех строк */
.cell1 {
}

/* row1 внутри класса mytable (поэтому могут быть разные таблицы с разными стилями) */
.mytable .row1 {
}

/* все ячейки row1 mytable */
.mytable .row1 .mycell {
}

/* cell1 строки row1 mytable */
.mytable .row1 .cell1 {
}

/* cell1 всех строк mytable */
.mytable .cell1 {
} 
 <дел>
  <дел>
  <дел>
  <дел>
    
содержимое первой ячейки в строке 1
содержимое второй ячейки в строке 1
<дел>
содержимое первой ячейки в строке 2
содержимое второй ячейки в строке 2

В современных гибких проектах, использующих

для нескольких целей, целесообразно поместить какой-нибудь класс в каждый div, чтобы было удобнее ссылаться на него. Здесь то, что раньше было
в HTML, стало class myrow , а
стало class mycell . Именно это соглашение делает приведенные выше селекторы CSS полезными.

ПРИМЕЧАНИЕ ПО ПРОИЗВОДИТЕЛЬНОСТИ : размещение имен классов в каждой ячейке и использование вышеуказанных мультиклассовых селекторов обеспечивает более высокую производительность, чем использование селекторов, оканчивающихся на * 9.0034 , например .row1 * или даже .row1 > * . Причина в том, что селекторы сопоставляются last first , поэтому при поиске совпадающих элементов .row1 * сначала выполняет * , что соответствует всем элементам, а затем проверяет всех предков каждого элемента , чтобы узнать, есть ли у какого-либо предка class row1 . Это может быть медленным в сложном документе на медленном устройстве. .row1 > * лучше, потому что проверяется только непосредственный родитель. Но гораздо лучше сразу устранить большинство элементов, через . строка1 .ячейка1 . ( .row1 > .cell1 — еще более строгая спецификация, но именно первый шаг поиска имеет наибольшее значение, поэтому обычно он не стоит беспорядка и дополнительных размышлений о том, всегда ли он будет быть прямым дочерним элементом, добавить дочерний селектор > .)

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

Использование CSS "display: table-cell" для столбцов

Недавно я использовал display: table-cell и display: table в CSS для нескольких разных проектов и был впечатлен результатами. Стиль используется для того, чтобы элементы, такие как теги

, вели себя как теги и
. В идеале мы стремимся разделить семантическую разметку и представление, поэтому 9Теги 0034 должны быть зарезервированы для данных, которые структурированы в формате таблицы, и если вам просто нужен макет сетки, который немного похож на таблицу, используйте вместо этого теги
с отображением : таблица-ячейка . display: table-* Параметры поддерживаются в любом последнем браузере, начиная с IE8.

Как использовать «display: table-cell»

Учитывая следующий HTML:

<дел>
    
Столбец 1
Столбец 2
Столбец 3

мы можем применить следующий CSS:

.контейнер {
  дисплей: таблица;
}
.столбец {
  отображение: таблица-ячейка;
}
 

, чтобы дать нам макет сетки (я также добавляю границу, чтобы сделать вывод более четким):

Столбец 1

Столбец 2

Столбец 3

Если нам нужно несколько строк, мы также можем включить отображение : таблица-строка :

<дел>
    <дел>
        
Столбец 1
Столбец 2
Столбец 3
<дел>
Столбец 1
Столбец 2
Столбец 3
. контейнер {
  дисплей: таблица;
}
.строка {
  отображение: таблица-строка;
}
.столбец {
  отображение: таблица-ячейка;
}
 

Столбец 1

Столбец 2

Столбец 3

Столбец 1

Столбец 2

Столбец 3

Это в основном эквивалент использования <Таблица> ,

и и
,
теги:

<таблица>
    
Столбец 1 Столбец 2 Столбец 3
Столбец 1 Столбец 2 Столбец 3
Столбец 1 Столбец 2 Столбец 3
Столбец 1 Столбец 2 Столбец 3

Макеты с плавающей сеткой

Большинство макетов сетки создаются с использованием тегов float: left on

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

. 
.контейнер {
  дисплей: блок;
}
.столбец {
  дисплей: блок;
  плыть налево;
}
 

Столбец 1

Столбец 2

Столбец 3

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

Колонки пропорциональной ширины

Расширение ширины элемента для заполнения доступного пространства пропорционально размеру содержимого. Мы можем установить ширину элемента display display: table на 100%:

<дел>
    
Столбец 1.
Столбец 2 немного длиннее.
Столбец 3 длиннее и содержит много текста.
.контейнер {
  дисплей: таблица;
  ширина: 100%;
}
.столбец {
  отображение: таблица-ячейка;
}
 

Столбец 1.

Столбец 2 немного длиннее.

Столбец 3 длиннее и содержит много текста.

Для плавающих элементов легко указать фиксированную ширину или ширину в процентах, но не пропорциональную ширину для заполнения доступного пространства.

Столбцы соответствуют длине текста:

Столбец 1.

Столбец 2 немного длиннее.

Столбец 3 длиннее и содержит много текста.

Столбцы соответствуют процентной ширине:

Столбец 1.

Столбец 2 немного длиннее.

Столбец 3 длиннее и содержит много текста.

Столбцы одинаковой высоты

Столбцы расширяются, чтобы соответствовать высоте самого большого столбца в строке. Высота определяется содержимым, а не явной фиксированной высотой.

<дел>
    
Столбец 1.
Столбец 2 немного длиннее.
Столбец 3 длиннее и содержит много текста.
.контейнер {
  дисплей: таблица;
}
.столбец {
  отображение: таблица-ячейка;
  ширина: 100 пикселей;
}
 

Столбец 1.

Столбец 2 немного длиннее.

Столбец 3 длиннее и содержит много текста.

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

Столбец 1.

Столбец 2 немного длиннее.

Столбец 3 длиннее и содержит много текста.

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

Другое использование

Использование display: table-cell также может быть полезно для вертикального выравнивания HTML.

Какие еще варианты использования у вас есть для display: table-cell ?

Опубликовано 21.01.2014 Стефаном Сенком. Опубликовано в Тех. css с тегами.

Свойство отображения CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Использование различных отображаемых значений:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: блок;}
p. ex4 {отображение: встроенный блок;}

Попробуйте сами »

Другие примеры "Попробуйте сами" ниже.


Определение и использование

Свойство display определяет поведение дисплея (тип поля рендеринга) элемента.

В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей браузера/пользователя по умолчанию. значение по умолчанию в XML — встроенное, включая элементы SVG.

Показать демо ❯

Значение по умолчанию: ?
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS1
Синтаксис JavaScript: объект .style.display="none" Попытайся


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

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

Собственность
дисплей 4,0 8,0 3,0 3.1 7,0

Примечание: Значения "flex" и "inline-flex" требуют префикса -webkit- для работы в Safari.

Примечание. «отображение: содержимое» не работает в Edge предыдущая версия 79.



Синтаксис CSS

отображение: значение ;

Значения свойств

Значение Описание Играй
рядный Отображает элемент как встроенный элемент (например, ). Любые свойства высоты и ширины не будут иметь никакого эффекта Демонстрация ❯
блок Отображает элемент как элемент блока (например,

). Он начинается на новая строка и занимает всю ширину

Демонстрация ❯
содержимое Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент следующего уровня в DOM
гибкий Отображает элемент как гибкий контейнер на уровне блока
сетка Отображает элемент как контейнер сетки на уровне блоков
встроенный блок Отображает элемент как блочный контейнер встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины 90 159
встроенный гибкий Отображает элемент как гибкий контейнер встроенного уровня
рядная сетка Отображает элемент как контейнер сетки встроенного уровня
встроенный стол Элемент отображается как таблица встроенного уровня
элемент списка Пусть элемент ведет себя как элемент
  • Демонстрация ❯
    обкатка Отображает элемент как блочный или встроенный, в зависимости от контекста
    стол Пусть элемент ведет себя как элемент
    таблица-заголовок Пусть элемент ведет себя как элемент
    группа столбцов таблицы Пусть элемент ведет себя как элемент
    таблица-заголовок-группа Пусть элемент ведет себя как элемент
    таблица-нижний колонтитул Пусть элемент ведет себя как элемент
    таблица-строка-группа Пусть элемент ведет себя как элемент
    таблица-ячейка Пусть элемент ведет себя как элемент
    стол-столбец Пусть элемент ведет себя как элемент
    таблица-строка Пусть элемент ведет себя как элемент
    нет Элемент полностью удален
    инициал Устанавливает для этого свойства значение по умолчанию. Читать про начальный
    унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


    Дополнительные примеры

    Пример

    Демонстрация использования значения свойства содержимого. В следующих Например, контейнер .a исчезнет, ​​и создание дочерних элементов (.b) дочерние элементы элемента следующего уровня в DOM:

    .a {
      отображение: содержимое;
      граница: 2 пикселя сплошной красный;
      background-color: #ccc;
      отступ: 10 пикселей;
      ширина: 200 пикселей;
    }

    .b {
      граница: 2 пикселя сплошного синего цвета;
      background-color: голубой;
      отступ: 10 пикселей;
    }

    Попробуйте сами »

    Пример

    Демонстрация использования наследуемого значения свойства:

    body {
      display: inline;
    }

    p {
      display: inherit;
    }

    Попробуйте сами »

    Пример

    Установите направление некоторых гибких элементов внутри элемента

    в обратном порядке order:

    div {
      display: flex;
      flex-direction: row-reverse;
    }

    Попробуйте сами »


    Связанные страницы

    Учебное пособие по CSS: Отображение CSS и видимость

    Ссылка HTML DOM: свойство отображения


    ❮ Назад Полное руководство по CSS Следующая ❯


    НОВИНКА

    Мы только что запустили
    Видео W3Schools

    Узнать

    COLOR PICKER
    КОД ИГРЫ

    Играть в игру




    Лучшие учебники
    Учебное пособие по HTML
    Учебное пособие по CSS
    Учебное пособие по JavaScript
    Учебное пособие
    Учебное пособие по SQL
    Учебное пособие по Python
    Учебное пособие по W3. CSS
    Учебное пособие по Bootstrap
    Учебное пособие по PHP
    Учебное пособие по Java
    Учебное пособие по C++
    Учебное пособие по jQuery

    9003

    28 Справочник по HTML
    Справочник по CSS
    Справочник по JavaScript
    Справочник по SQL
    Справочник по Python
    Справочник по W3.CSS
    Справочник по Bootstrap
    Справочник по PHP
    Цвета HTML
    Справочник по Java
    Справочник по Angular
    Справочник по jQuery

    6 Примеры HTML


    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap
    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery


    FORUM | О

    W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

    Copyright 1999-2022 Refsnes Data. Все права защищены.
    W3Schools работает на основе W3.CSS.

    Свойство отображения CSS — Отображать без отображения, Отображать таблицу, Встроенный блок и т. д.

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

    На самом деле, чтобы использовать современные модели Flexbox и Grid, вам нужно использовать свойство display, прежде чем вы получите доступ к их различным свойствам и значениям. Это одна из причин, почему свойство display так важно в CSS.

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

    Базовый

    дисплей Синтаксис свойства
     элемент {
            дисплей: значение;
         }
     

    РЕКЛАМА

    Отображение значений свойств в CSS

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

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

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

    дисплей: встроенный

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

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

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

     <дел>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Это встроенный элемент Modi eaque debitis eos quod Labore
          maiores delectus asperiores voluptatem voluptas soluta!
    
     тело {
            дисплей: гибкий;
            выравнивание элементов: по центру;
            выравнивание содержимого: по центру;
            высота: 100вх;
            размер шрифта: 2rem;
          }
    дел {
            максимальная ширина: 600 пикселей;
          }
    охватывать {
            цвет фона: #006100;
          }
     

    РЕКЛАМА

    дисплей: блок

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

    Можно указать width и height свойства для таких элементов. Примеры элементов, которые по умолчанию находятся на уровне блоков:

    ,
    ,

    и многие другие.

    Вы можете установить диапазон из предыдущего HTML-кода на отображение блока , и он будет вести себя как элемент уровня блока.

     интервал {
            дисплей: блок;
            цвет фона: #006100;
          }
     

    Вы можете видеть, что занимает всю ширину. Это потому, что для свойства display установлено значение block.

    дисплей: встроенный блок

    Помимо блочного и встроенного отображения, есть еще встроенное блочное.

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

    Итак, вы можете смотреть на inline-block display как на встроенный элемент и блочный элемент в одном пакете.

     интервал {
            отображение: встроенный блок;
            цвет фона: #006100;
            ширина: 140 пикселей;
            высота: 140 пикселей;
          }
     

    РЕКЛАМА

    дисплей: нет

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

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

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

     интервал {
            дисплей: нет;
            цвет фона: #006100;
            ширина: 140 пикселей;
            высота: 140 пикселей;
          }
     

    Visibility hidden оставляет пространство, занимаемое элементом span, открытым, как вы можете видеть ниже:

     интервал {
            видимость: скрытая;
            цвет фона: #006100;
            ширина: 140 пикселей;
            высота: 140 пикселей;
          }
     

    дисплей: стол

    В наши дни вы редко будете использовать отображаемое значение table , но это все равно важно знать. В прошлом это было более полезно, потому что вы использовали его для макетов до появления плавающих элементов, Flex и Grid.

    Установка display на table заставляет элемент вести себя как таблица. Таким образом, вы можете создать копию HTML-таблицы, не используя элемент таблицы и соответствующие элементы, такие как 9.0033 тд и тд .

    Например, в HTML вы можете создать таблицу с элементом

    , а также с
    или любым контейнером по вашему выбору.

    Вы создаете таблицу с элементом HTML

    следующим образом:

     <таблица>
          
     тело {
        дисплей: гибкий;
        выравнивание элементов: по центру;
        выравнивание содержимого: по центру;
        высота: 100вх;
        размер шрифта: 2rem;
    }
    дел {
        максимальная ширина: 600 пикселей;
    }
    охватывать {
        отображение: встроенный блок;
        цвет фона: #006100;
        ширина: 140 пикселей;
        высота: 140 пикселей;
    }
    тр,
    тд {
        отступ: 10 пикселей;
    }
     

    Результат приведенных выше фрагментов кода HTML и CSS выглядит следующим образом:

    Но вы можете сделать такую ​​же таблицу с элементом

    , установив соответствующие дисплеи на таблица , таблица-строка и таблица-ячейка . Вы получите такой же результат, как показано ниже:

     <дел>
          <дел>
            
    Фрукты
    Лемуры
    Домашние животные
    <дел>
    Кешью
    Хуа хуа
    Собака
    <дел>
    Яблоко
    Диадема Сифака
    Кот
    <дел>
    Манго
    Кольцохвостый
    Курица
     тело {
        дисплей: гибкий;
        выравнивание элементов: по центру;
        выравнивание содержимого: по центру;
        высота: 100вх;
        размер шрифта: 2rem;
    }
    дел {
        максимальная ширина: 600 пикселей;
    }
    охватывать {
        отображение: встроенный блок;
        цвет фона: #006100;
        ширина: 140 пикселей;
        высота: 140 пикселей;
    }
    .стол {
       дисплей: таблица;
    }
    .строка {
       отображение: таблица-строка;
    }
    .клетка {
       отображение: таблица-ячейка;
    }
    .строка,
    .клетка {
      отступ: 10 пикселей;
    }
     

    Вы все еще получаете свой стол:

    РЕКЛАМА

    Другие значения свойства отображения

    Помимо inline , block , none и table , которые действительно важны, потому что они существенно влияют на внешний вид веб-страниц, есть и другие значения свойства display , достойные вашего внимания.

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

    Давайте посмотрим на некоторые из них.

    дисплей: гибкий

    Дисплей flex дает вам доступ к системе компоновки Flex, которая упрощает разработку и компоновку наших веб-страниц.

     <дел>
          <дел>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Это встроенный элемент Modi eaque debitis eos quod
            Labore maiores delectus asperiores voluptatem voluptas soluta!
          
          <дел>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Это встроенный элемент Modi eaque debitis eos quod
            Labore maiores delectus asperiores voluptatem voluptas soluta!
          
    
     
     .контейнер {
            дисплей: гибкий;
            выравнивание элементов: по центру;
            выравнивание содержимого: по центру;
            высота: 100вх;
            размер шрифта: 2rem;
    }
        
    охватывать {
           видимость: скрытая;
           цвет фона: #006100;
           ширина: 140 пикселей;
           высота: 140 пикселей;
    }
    . ребенок {
           граница: 2px сплошной малиновый;
           поля: 4px;
    }
     

    РЕКЛАМА

    дисплей: сетка

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

     <дел>
          <дел>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Это встроенный элемент Modi eaque debitis eos quod
            Labore maiores delectus asperiores voluptatem voluptas soluta!
          
          <дел>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Это встроенный элемент Modi eaque debitis eos quod
            Labore maiores delectus asperiores voluptatem voluptas soluta!
          
    
     
     .контейнер {
            отображение: сетка;
            место-предметы: центр;
            высота: 100вх;
            размер шрифта: 2rem;
          }
       
    охватывать {
           видимость: скрытая;
           цвет фона: #006100;
           ширина: 140 пикселей;
            высота: 140 пикселей;
    }
    . ребенок {
           граница: 2px сплошной малиновый;
           поля: 4px;
    }
     

    дисплей: наследовать

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

     <дел>
          Lorem ipsum dolor sit amet consectetur
          Встроенный элемент adipisicing elit. Cumque cupiditate харум
          consectetur a exercitationem Laboriosam nobis eos pariatur expedita iure.
    
     
     тело {
         дисплей: гибкий;
         выравнивание элементов: по центру;
         выравнивание содержимого: по центру;
         высота: 100вх;
         размер шрифта: 2rem;
    }
    охватывать {
         отображение: наследовать;
         цвет фона: малиновый;
    }
     

    РЕКЛАМА

    дисплей: начальный

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

     <дел>
          Lorem ipsum dolor sit amet consectetur
          Встроенный элемент adipisicing elit. Cumque cupiditate харум
          consectetur a exercitationem Laboriosam nobis eos pariatur expedita iure.
    
     
     тело {
        дисплей: гибкий;
        выравнивание элементов: по центру;
        выравнивание содержимого: по центру;
        высота: 100вх;
        размер шрифта: 2rem;
    }
    охватывать {
        дисплей: начальный;
        цвет фона: малиновый;
    }
     

    Заключение

    Хорошее понимание свойств отображения поможет вашим макетам страниц выглядеть великолепно. Это также дает вам гораздо больше контроля над тем, как вы представляете свои элементы при работе с CSS.

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

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

    Спасибо за прочтение и продолжайте писать код.

    Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

    Каков метод использования свойства css display table и table-cell для макета? - HTML и CSS - Форумы SitePoint

    Umair_Ulhaque

    #1

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

    Большое спасибо.

    ПолОБ

    #2

    Привет,

    Вы можете использовать свойства display: table / row /cell везде, где вам нужно имитировать поведение таблиц HTML в старом стиле. С использованием этих свойств CSS нет семантических проблем, но, конечно, если контент, который вы используете, является «табличным», тогда вместо этого вы должны использовать теги таблицы html.

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

    например

    
    
    <голова>
    <мета-кодировка="utf-8">
    Документ без названия
    <стиль>
    р {маржа: 0 0 1em}
    . wrap {максимальная ширина: 960 пикселей; поле: авто;}
    .стол {
    дисплей: таблица;
    ширина:100%;
    }
    .клетка {
    дисплей: таблица-ячейка;
    вертикальное выравнивание: сверху;
    граница: 1px сплошная #000;
    фон:красный;
    ширина: 33%;
    отступ: 5px;
    }
    .cell2 {фон: синий}
    .cell3 {фон: зеленый}
    
    
    <тело>
    <дел>
     <дел>
    
    Ячейка 1
    Ячейка 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a massa tellus. Maecenas viverra mi sed ipsum pulvinar consequat. Sed vehicula purus ut dui pulvinar, a vehicula purus iaculis. Sed accumsan ante non consequat imperdiet. Sed pellentesque facilisis accumsan. Меценат sed hendrerit dui. Duis suscipit, turpis sit amet sodales rhoncus, ante ante tempus purus, a volutpat leo metus nec mauris. Fusce ut turpis vitae sapien varius sollicitudin.

    В отличие от html-таблиц, вы можете опустить промежуточный элемент display:table-row, и браузеры автоматически создадут анонимный элемент. Если, конечно, у вас нет рядов столбцов, тогда вам понадобится явный display:table-row для разделения столбцов.

    
    
    <голова>
    <мета-кодировка="utf-8">
    Документ без названия
    <стиль>
    п {
    поле:0 0 1em
    }
    .сворачивать {
    максимальная ширина: 960 пикселей;
    поля:авто;
    }
    .стол {
    дисплей: таблица;
    ширина:100%;
    }
    .клетка {
    дисплей: таблица-ячейка;
    вертикальное выравнивание: сверху;
    граница: 1px сплошная #000;
    фон:красный;
    ширина: 33%;
    отступ: 5px;
    }
    .row {отображение: таблица-строка}
    .cell2 {фон: синий}
    .cell3 {фон: зеленый}
    
    
    <тело>
    <дел>
    <дел>
    <дел>
    
    Ячейка 1
    Ячейка 2
    <дел>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a massa tellus. Maecenas viverra mi sed ipsum pulvinar consequat. Sed vehicula purus ut dui pulvinar, a vehicula purus iaculis. Sed accumsan ante non consequat imperdiet. Sed pellentesque facilisis accumsan. Меценат sed hendrerit dui. Duis suscipit, turpis sit amet sodales rhoncus, ante ante tempus purus, a volutpat leo metus nec mauris. Fusce ut turpis vitae sapien varius sollicitudin.

    <дел>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a massa tellus. Maecenas viverra mi sed ipsum pulvinar consequat. Sed vehicula purus ut dui pulvinar, a vehicula purus iaculis. Sed accumsan ante non consequat imperdiet. Sed pellentesque facilisis accumsan. Меценат sed hendrerit dui. Duis suscipit, turpis sit amet sodales rhoncus, ante ante tempus purus, a volutpat leo metus nec mauris. Fusce ut turpis vitae sapien varius sollicitudin.

    Ячейка 2
    Ячейка 3

    Основной недостаток таблиц css заключается в том, что вы не можете использовать «промежуток строк» ​​или «промежуток столбцов» (colspan, rowspan), но в большинстве случаев это атрибуты, необходимые для обработки данных, а не макета.

    Свойства отображаемой таблицы поддерживаются в IE8+ и являются полезным дополнением к набору инструментов, когда придет время. Я часто использую их для подхода с липким нижним колонтитулом (см. css faq) или для 100% высоких макетов, поскольку таблицы считают высоту минимальной и позволяют создавать эффекты, которые вы не можете сделать с другими свойствами отображения.

    Умаир_Улхак

    #3

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

    Пожалуйста, поправьте меня, если я ошибаюсь.

    С уважением,
    Умайр.

    ПолОБ

    #4

    Нет, вы не ошиблись, и вертикальное центрирование также является тем, что display:table-cell делает очень просто. Если у вас есть ряд горизонтальных текстовых элементов, то с помощью display:table-cell вы можете выровнять их все по вертикали относительно друг друга в несколько строк кода. Существуют и другие альтернативы css для вертикального центрирования, но ни один из них не так эффективен, как метод table-cell.

    Еще одно хорошее применение для display:table-cell — когда у вас есть навигация, которая охватывает верхнюю часть страницы, и вы хотите, чтобы элементы были довольно хорошо распределены по ширине. В отличие от других методов, вам не нужно задавать ширину каждому элементу или использовать заполнение «магическим числом», а вместо этого используйте display:table-cell, и все элементы равномерно распределяются по странице. Это создает более надежную навигацию, которая не ломается, если вы добавите или удалите текстовое содержимое позднее (и также намного лучше обрабатывает масштабирование).

    Все допустимые варианты использования свойств таблицы

    система закрыто

    #5

    Таблицы

    Таблицы

    предыдущие следующий содержание характеристики индекс


    Содержимое

    • 17.1 Знакомство с таблицами
    • 17.2 Модель таблицы CSS
      • 17.2.1 Анонимные табличные объекты
    • 17.3 Столбцы
    • 17.4 Таблицы в модели визуального форматирования
      • 17.4.1 Положение и выравнивание заголовка
    • 17. 5 Визуальное расположение содержимого таблицы
      • 17.5.1 Слои таблицы и прозрачность
      • 17.5.2 Алгоритмы ширины таблицы: свойство table-layout
        • 17.5.2.1 Фиксированная компоновка таблицы
        • 17.5.2.2 Автоматическая компоновка таблицы
      • 17.5.3 Алгоритмы высоты стола
      • 17.5.4 Выравнивание по горизонтали в столбце
      • 17.5.5 Динамические эффекты строк и столбцов
    • 17.6 Границы
      • 17.6.1 Модель разделенных границ
        • 17.6.1.1 Границы и фон вокруг пустых ячеек: свойство «пустые ячейки»
      • 17.6.2 Модель разрушающейся границы
        • 17.6.2.1 Разрешение пограничных конфликтов
      • 17.6.3 Стили границ

    (скрыть)

    В этой главе определяется модель обработки таблиц в CSS. Часть этой модели обработки является макетом. Для макета эта глава вводит два алгоритма; первый, фиксированный макет таблицы алгоритм, четко определенный, но второй, автоматическая верстка таблицы алгоритм, не полностью определен этой спецификацией.

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

    Макет таблицы может быть используется для представления табличных отношений между данными. Авторы указывают эти отношения в документе язык и может указать их презентации с помощью CSS 2.1.

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

    Авторы могут указать визуальное форматирование таблицы как прямоугольная сетка ячеек. Строки и столбцы ячеек могут быть организованы на группы строк и группы столбцов. Строки, столбцы, группы строк, столбец группы, а ячейки могут иметь границы, нарисованные вокруг них (есть два модели границ в CSS 2.1). Авторы могут выравнивать данные по вертикали или горизонтально внутри ячейки и выровнять данные во всех ячейках строки или столбец.

    Вот простой трехрядный, трехколоночный таблица, описанная в HTML 4:

    <ТАБЛИЦА>
    

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

       [D]

    Два возможных визуализации ошибочной HTML-таблицы.

    17.5.1 Слои таблицы и прозрачность

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

       [Д]

    Схема слоев таблицы.

    1. Самый нижний слой представляет собой единую плоскость, представляющую поле таблицы сам. Как и все ящики, он может быть прозрачным.
    2. Следующий слой содержит группы столбцов. Каждая группа столбцов простирается от верхней части ячеек в верхнем ряду до нижней части ячейки в нижнем ряду и от левого края его крайнего левого столбца к правому краю его самого правого столбца. Фон точно покрывает всю площадь всех клеток, происходящих из группы столбцов, даже если они выходят за пределы группы столбцов, но это разница в площади не влияет на позиционирование фонового изображения.
    3. Над группами столбцов находятся области, представляющие ящики для колонн. Каждый столбец такой же высоты, как группы столбцов и шириной, как обычная (одна колонка) ячейка в колонке. фон покрывает точно всю площадь всех ячеек, которые происходят в столбце, даже если они выходят за пределы столбца, но это разница в площади не влияет на позиционирование фонового изображения.
    4. Следующий слой содержит группы строк. Каждая группа строк простирается от верхнего левого угла его самой верхней ячейки в первом столбца в правый нижний угол его самой нижней ячейки в последней столбец.
    5. Предпоследний слой содержит строки. Каждый ряд имеет ширину группы строк и такой же высоты, как обычная (однострочная) ячейка в ряд. Как и в случае со столбцами, фон покрывает ровно всю площадь всех ячеек, начинающихся в строке, даже если они охватывают вне ряда, но эта разница в площади не влияет позиционирование фонового изображения.
    6. Самый верхний слой содержит сами клетки. Как рисунок показывает, хотя все строки содержат одинаковое количество ячеек, не все ячейка может иметь указанное содержимое. В модели разделенных границ («граница-коллапс» «разделить»), если значение их свойства «пустые ячейки» равно «скрыть» эти "пустые" ячейки прозрачны через ячейку, строку, строку группа, столбец и фон группы столбцов, позволяя таблице фон просвечивает.

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

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

    
    
      <ГОЛОВА>
        Пример таблицы
        <СТИЛЬ type="text/css">
          ТАБЛИЦА {фон: #ff0; граница: сплошная черная;
                   пустые ячейки: скрыть }
          TR.top {фон: красный}
          TD {граница: сплошная черная}
        
      
      <ТЕЛО>
        <ТАБЛИЦА>
          
    <ПД> 1 <ПД> 5 <тд>
    Проверка

    17.5.4 Горизонтальное выравнивание в столбце

    Горизонтальное выравнивание содержимого встроенного уровня в ячейке поле может быть задано значением свойство text-align на клетка.

    17.5.5 Динамические эффекты строк и столбцов

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

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

    'крах границы'

    Это свойство выбирает модель границы таблицы. Значение «отдельно» выбирает модель границ с разделенными границами. Значение «свернуть» выбирает модель разрушающихся границ. Модели описаны ниже.

    17.6.1 Модель с разделенными границами

    'между границами'

    *) Примечание: пользовательские агенты также могут применять свойство 'border-spacing' для элементов 'frameset'. Какие элементы Элементы 'frameset' не определены этой спецификацией и до язык документа. Например, HTML4 определяет элемент, а XHTML 1.0 определяет элемент . Таким образом, свойство 'border-spacing' элемента 'frameset' может использоваться как допустимая замена нестандартного атрибута 'framespacing'.

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

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

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

    Однако в HTML и XHTML1 ширина

    Фрукты Лемуры Домашние животные
    Кешью Хуа хуа Собака
    Яблоко Диадема Сифака Кот
    Манго Острый хвост Курица
    Это простая таблица 3x3
    Заголовок 1 Ячейка 1 Ячейка 2
    Заголовок 2 Ячейка 3 Ячейка 4
    Заголовок 3 Ячейка 5 Ячейка 6

    Этот код создает одну таблицу (элемент TABLE), три строки (элементы TR), три ячейки заголовка (элементы TH), и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца этого примера указаны неявно: существует столько же столбцы в таблице в соответствии с требованиями заголовка и ячеек данных.

    Следующее правило CSS центрирует текст горизонтально в заголовке ячеек и представляет текст в ячейках заголовка жирным шрифтом масса:

    th { выравнивание текста: по центру; вес шрифта: полужирный }
     

    Следующие правила выравнивают текст ячеек заголовка по их базовой линии и вертикально центрировать текст в каждой ячейке данных:

    th { вертикальное выравнивание: базовая линия }
    td {вертикальное выравнивание: посередине}
     

    Следующие правила определяют, что верхняя строка будет окружена трехпиксельным сплошная синяя рамка, а каждый из остальных рядов будет окружен 1px сплошная черная рамка:

    таблица {граница-коллапс: коллапс}
    tr#row1 {граница: 3 пикселя сплошного синего цвета}
    tr#row2 {граница: 1px сплошной черный}
    tr#row3 {граница: 1px сплошной черный}
     

    Обратите внимание, однако, что границы вокруг строк перекрываются там, где ряды встречаются. Какой цвет (черный или синий) и толщина (1px или 3px) будет граница между row1 и row2 быть? Мы обсудим это в разделе, посвященном разрешение пограничных конфликтов.

    Следующее правило помещает заголовок таблицы над таблицей:

    заголовок { сторона заголовка: вверху }
     

    В предыдущем примере показано, как CSS работает с элементами HTML 4; в HTML 4 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) четко определенный. В других языках документов (таких как XML-приложения) могут отсутствовать предопределенные элементы таблицы. Таким образом, CSS 2.1 позволяет авторам «сопоставлять» элементы языка документа с элементами таблицы через свойство «отображать». За например, следующее правило заставляет элемент FOO вести себя как HTML Элемент TABLE и элемент BAR действуют как элемент CAPTION:

    FOO { отображение : таблица }
    BAR { дисплей : заголовок таблицы }
     

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

    Модель таблиц CSS основана на модели таблиц HTML4, в структура таблицы точно соответствует визуальному расположению Таблица. В этой модели таблица состоит из необязательного заголовка и любое количество рядов ячеек. Говорят, что табличная модель представляет собой «строку первичный», поскольку авторы явно указывают строки, а не столбцы в язык документа. Столбцы получаются после того, как все строки были указано -- первая ячейка каждой строки принадлежит первому столбцу, второй во второй столбец и т. д.). Строки и столбцы могут быть сгруппированы структурно и эта группировка отражена в презентации (например, вокруг группы строк может быть нарисована граница).

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

    Модель CSS не требует, чтобы язык документа включал элементы которые соответствуют каждому из этих компонентов. Для языков документа (например, XML-приложения), которые не имеют предопределенной таблицы элементы, авторы должны сопоставлять языковые элементы документа с таблицей элементы; это делается с помощью свойства display. Следующее 'display' значения присваивают таблицу правила форматирования произвольного элемента:

    стол (В HTML: TABLE)
    Указывает, что элемент определяет таблицу блочного уровня: это прямоугольный блок, участвующий в контексте форматирования блока.
    встроенный стол (в HTML: TABLE)
    Указывает, что элемент определяет таблицу встроенного уровня: это прямоугольный блок, участвующий во встроенном форматировании контекст).
    таблица-строка (в HTML: TR)
    Указывает, что элемент представляет собой строку ячеек.
    таблица-строка-группа (В HTML: TBODY)
    Указывает, что элемент группирует один или несколько ряды.
    таблица-заголовок-группа (В HTML: THEAD)
    Подобно 'группе-строки-таблицы', но для визуального форматирование, группа строк всегда отображается перед всеми остальными строками и группы строк, а также после любых верхних заголовков. Пользовательские агенты печати могут повторять строки заголовков на каждой странице, охваченной таблицей. Если таблица содержит несколько элементов с 'display: table-header-group', только первый отображается как заголовок; к остальным относятся так, как будто они имел «отображение: таблица-строка-группа».
    таблица-нижний колонтитул (В HTML: TFOOT)
    Подобно 'группе-строки-таблицы', но для визуального форматирование, группа строк всегда отображается после всех остальных строк и группы строк и перед любыми нижними заголовками. Пользовательские агенты печати могут повторять строки нижнего колонтитула на каждой странице, охваченной таблицей. Если таблица содержит несколько элементов с 'display: table-footer-group', только первый отображается как нижний колонтитул; к остальным относятся так, как будто они имел «отображение: таблица-строка-группа».
    таблица-столбец (В HTML: COL)
    Указывает, что элемент описывает столбец клетки.
    таблица-колонка-группа (В HTML: COLGROUP)
    Указывает, что элемент группирует один или несколько столбцы.
    ячейка таблицы (в HTML: TD, TH)
    Указывает, что элемент представляет ячейку таблицы.
    таблица-заголовок (в HTML: CAPTION)
    Указывает заголовок для таблицы. Все элементы с 'display: table-caption' должны отображаться, как описано в раздел 17.4.

    Замененные элементы с этими «отображаемыми» значениями обрабатываются как их заданные типы отображения во время компоновки. Например, изображение, установленное на 'display: table-cell' заполнит доступное пространство ячейки, а его измерения могут способствовать алгоритмам определения размера таблицы, поскольку с обычной клеткой.

    Элементы с набором «отображение» в «таблица-столбец» или «таблица-столбец-группа» не отображаются (точно так же, как если бы у них было 'display: none'), но они полезны, потому что могут имеют атрибуты, определяющие определенный стиль столбцов, которые они представлять.

    Таблица стилей по умолчанию для HTML4 в приложении показано использование этих значений для HTML4:

    таблица {отображение: таблица}
    tr {отображение: таблица-строка}
    thead {отображение: таблица-заголовок-группа}
    tbody {отображение: таблица-строка-группа}
    tfoot {отображение: таблица-нижний колонтитул-группа}
    col { отображение: таблица-столбец }
    colgroup { отображение: таблица-столбец-группа }
    td, th { display: table-cell }
    заголовок {отображение: заголовок таблицы}
     

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

    17.2.1 Анонимные табличные объекты

    Языки документа, отличные от HTML, могут не содержать все элементы в табличной модели CSS 2.1. В этих случаях «пропавшие без вести» элементы должны быть приняты для того, чтобы табличная модель работала. Любой элемент таблицы автоматически сгенерирует необходимую анонимную таблицу объекты вокруг себя, состоящие как минимум из трех вложенных объектов соответствующий элементу table/inline-table, table-row элемент и элемент table-cell. Отсутствующие элементы генерируют анонимные объекты (например, анонимные поля в визуальной компоновке таблицы) по следующим правилам:

    Для целей настоящих правил определены следующие термины:

    Группа групп строк
    'группа-строки-таблицы', 'группа-заголовка-таблицы' или 'группа нижнего колонтитула'
    правильный дочерний стол
    Блок «таблица-строка», блок группы строк, блок «таблица-столбец», поле «группа столбцов таблицы» или поле «заголовок таблицы».
    правильная родительская строка таблицы
    Блок «таблица» или «встроенная таблица» или блок группы строк
    внутренний ящик для стола
    Поле "таблица-ячейка", поле "таблица-строка", поле группы строк, поле «таблица-столбец» или поле «таблица-столбец-группа».
    табличный контейнер
    Поле 'table-row' или соответствующий родитель строки таблицы
    подряд
    Два одноуровневых блока считаются последовательными, если между ними нет промежуточных элементов. братьев и сестер, кроме, необязательно, анонимного встроенного кода, содержащего только белые места. Последовательность одноуровневых блоков является последовательной, если каждый блок в последовательности следует за предыдущим в последовательность.

    В соответствии с настоящими правилами элементы вне потока представлены в виде встроенных элементов нулевой ширины и высоты. Их содержащие блоки выбираются соответственно.

    Следующие шаги выполняются в три этапа.

    1. Удалить ненужные поля:
      1. Все дочерние блоки родительского столбца таблицы рассматриваются как у них был «отображение: нет».
      2. Если дочерний элемент C родителя 'table-column-group' не поле "таблица-столбец", то оно обрабатывается так, как если бы оно имело 'отображение: нет'.
      3. Если ребенок C табличного контейнера P представляет собой анонимное встроенное поле, содержащее только пробелы, и его непосредственно предшествующие и следующие братья и сестры, если any, являются правильными потомками таблицы P и являются либо «заголовок таблицы», либо внутренние поля таблицы, тогда обрабатывается так, как если бы у него было «отображение: нет». Ящик Д есть правильный потомок таблицы A , если D может быть потомком A , не вызывая генерация любой промежуточной «таблицы» или «встроенной таблицы» коробки.
      4. Если блок B является анонимным инлайном, содержащим только пустое пространство и находится между двумя непосредственными братьями и сестрами, каждый из который является либо внутренним полем таблицы, либо "заголовком таблицы" box, то B обрабатывается так, как если бы он имел 'display: никто'.
    2. Создать отсутствующие дочерние оболочки:
      1. Если дочерний элемент C поля "таблица" или "встроенная таблица" не является правильным дочерним элементом таблицы, затем создайте анонимный поле «таблица-строка» вокруг C и все последующие братья и сестры C , которые не являются правильными дочерними элементами таблицы.
      2. Если дочерний элемент C группы строк не является поле «таблица-строка», затем создайте анонимное поле «таблица-строка» около C и все последовательные братья и сестры С , которые не являются полями "таблицы-строки".
      3. Если дочерний элемент C поля "строка таблицы" не является 'table-cell', затем создайте анонимное поле 'table-cell' около C и все последовательные братья и сестры из C , которые не являются ячейками таблицы.
    3. Создание отсутствующих родителей:
      1. Для каждой ячейки таблицы C в последовательности последовательные внутренние таблицы и элементы «заголовок таблицы», если C родитель не является «строкой таблицы», затем сгенерируйте анонимный блок «таблица-строка» вокруг C и все последовательные братья и сестры C , которые являются «табличной ячейкой» коробки.
      2. Для каждого правильного дочернего элемента таблицы C в последовательности последовательные правильные дети таблицы, если C misparented, затем создайте анонимную «таблицу» или Блок «встроенный стол» T вокруг C и все последовательные братья и сестры C , которые являются правильной таблицей дети. (Если родитель C является «встроенным» блоком, тогда T должен быть блоком «встроенной таблицы»; в противном случае это должен быть «настольный» ящик.)
        • "Таблица-строка" имеет неправильный родитель, если ее родитель не является ни тем, ни другим. поле группы строк, ни поле «таблица» или «встроенная таблица».
        • Блок "таблица-столбец" имеет неправильный родитель, если его родитель ни поле "таблица-столбец-группа", ни "таблица" или поле «встроенная таблица».
        • Поле группы строк, поле «группа столбцов таблицы» или Поле 'table-caption' имеет неправильный родительский статус, если его родитель ни поле «таблица», ни поле «встроенная таблица».

    В этом примере XML предполагается, что элемент table содержит Элемент HBOX:

    
      Джордж
      4287
      1998
    
     

    , потому что связанная таблица стилей:

    HBOX {отображение: таблица-строка}
    VBOX {отображение: таблица-ячейка}
     

    В этом примере предполагается, что три элемента table-cell содержат текст в строках. Обратите внимание, что текст дополнительно инкапсулирован в анонимные встроенные блоки, как описано в модели визуального форматирования:

    <СТЕК>
      Это верхняя строка.
      Это средний ряд.
      Это нижняя строка.
    
     

    Таблица стилей:

    STACK { отображение: встроенная таблица }
    ROW {отображение: таблица-строка}
    D { дисплей: встроенный; вес шрифта: жирнее }
     

    Ячейки таблицы могут принадлежать двум контекстам: строкам и столбцам. Однако, в ячейках исходного документа являются потомками строк, а не столбцы. Тем не менее, на некоторые аспекты клеток может влиять установка свойств столбцов.

    Следующие свойства применяются к столбцам и элементам группы столбцов:

    'граница'
    Различные свойства границы применяются к столбцам только в том случае, если установлено значение «граница-коллапс». чтобы "свернуть" элемент таблицы. В этом случае устанавливаются границы столбцы и группы столбцов являются входными данными для разрешения конфликтов алгоритм, который выбирает стили границы на каждом краю ячейки.
    'фон'
    Свойства фона задают фон для ячеек в столбец, но только если и ячейка, и строка имеют прозрачный фоны. См. «Слои таблицы и прозрачность».
    'ширина'
    Свойство "ширина" дает минимальная ширина столбца.
    'видимость'
    Если "видимость" столбца установлена ​​на "свернуть", ни один из ячейки в столбце визуализируются, а ячейки, которые охватывают другие столбцы обрезаются. Кроме того, ширина стола уменьшается на ширину, которую занимала бы колонка. См. «Динамические эффекты» ниже. Другие значения для «видимости» не имеют никакого эффекта.

    Вот несколько примеров правил стиля, которые задают свойства для столбцы. Первые два правила вместе реализуют атрибут «rules». HTML 4 со значением «cols». Третье правило делает «итоги» синий столбец, последние два правила показывают, как сделать столбец фиксированным размер, используя фиксированный макет алгоритм.

    col { стиль границы: нет сплошных }
    таблица { стиль границы: скрытый }
    col. totals { фон: синий }
    таблица { раскладка таблицы: фиксированная }
    col.totals { ширина: 5em }
     

    С точки зрения модели визуального форматирования таблица может вести себя как блочный уровень (для отображения: table') или на встроенном уровне (для 'display: inline-table').

    В обоих случаях таблица создает главный блок-бокс, называемый коробка для упаковки стола та содержит само поле таблицы и любые поля заголовков (в документе заказ). Блок таблицы представляет собой блок уровня, который содержит внутренние табличные поля таблицы. Поля заголовков — это поля блочного уровня, которые сохраняют свои собственные содержимое, отступы, поля и области границ и отображаются как обычно блочные блоки внутри блока оболочки таблицы. Размещаются ли поля с заголовками до или после поля таблицы определяется «стороной заголовка» собственности, как описано ниже.

    Блок-оболочка таблицы является блоком, если таблица является блочной, и поле «встроенный блок», если таблица встроенного уровня. Коробка для упаковки стола устанавливает контекст форматирования блока. Столовая коробка (не обертка таблицы) используется при выполнении базовой линии вертикальное выравнивание для встроенной таблицы. Ширина обертки таблицы box — это ширина границы блока таблицы внутри него, как описано по разделу 17.5.2. Проценты по «ширине» и «высоте» в таблице относительно блока, содержащего оболочку таблицы, а не коробки оболочки таблицы сам.

    Вычисленные значения свойств 'position', 'float', 'margin-*', «верхний», «правый», «нижний» и «левый» элементы таблицы используются для коробка-оболочка таблицы, а не коробка таблицы; все остальные значения ненаследуемые свойства используются в поле таблицы, а не в таблице оберточная коробка. (Если значения элемента таблицы не используются в table и table wrapper box, вместо них используются начальные значения.)

    Схема таблицы с подписью над ней.

    17.4.1 Положение и выравнивание заголовка

    'заголовок'

    Это свойство указывает положение поля заголовка с относительно таблицы box. Значения имеют следующие значения:

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

    Примечание: CSS2 описывает другую ширину и поведение горизонтального выравнивания. Это поведение будет введено в CSS3, использующий значения «сверху снаружи» и «снаружи снизу» на этом имущество.

    Чтобы выровнять заголовок по горизонтали в поле заголовка, используйте свойство выравнивания текста.

    В этом примере свойство 'caption-side' помещает подписи под таблицами. Заголовок будет такой же ширины, как родитель таблица и текст подписи будут выровнены по левому краю.

    заголовок { сторона заголовка: дно;
              ширина: авто;
              выравнивание текста: по левому краю}
     

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

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

    1. Каждое поле строки занимает одну строку ячеек сетки. Вместе, ряд блоки заполняют таблицу сверху вниз в том порядке, в котором они встречаются исходный документ (т. е. таблица занимает ровно столько строки, так как есть элементы строки).
    2. Группа строк занимает те же ячейки сетки, что и строки, в которые она входит. содержит.
    3. Поле столбца занимает один или несколько столбцов ячеек сетки. Столбец ящики располагаются рядом друг с другом в порядке их появления. поле первого столбца может быть как слева, так и справа, в зависимости от значения свойства 'direction' таблицы.
    4. Поле группы столбцов занимает те же ячейки сетки, что и столбцы это содержит.
    5. Ячейки могут занимать несколько строк или столбцов. (Хотя CSS 2.1 не определяет, как количество составных строк или столбцов определено, пользовательский агент может иметь специальные знания об источнике документ; будущее обновление CSS может предоставить способ выразить это знание синтаксиса CSS.) Таким образом, каждая ячейка представляет собой прямоугольный блок, один или более ячеек сетки в ширину и высоту. Верхняя строка этого прямоугольника в строке, указанной родительской ячейкой. Прямоугольник должен быть таким как можно левее, но часть ячейки в первой столбец, который он занимает, не должен перекрываться ни с каким другим полем ячейки (т. е. ячейка, охватывающая строку, начиная с предыдущей строки), и ячейка должна быть справа от всех ячеек в той же строке, которые находятся ранее в исходный документ. Если эта позиция вызовет ячейку, охватывающую столбец чтобы перекрыть ячейку, охватывающую строку, из предыдущей строки, CSS не определяет результаты: реализации могут либо перекрывать ячейки (как делается во многих реализациях HTML) или может сместить более позднюю ячейку на право избегать такого дублирования. (Это ограничение выполняется, если свойство 'direction' таблицы равно 'ltr'; если "направление" 'rtl', поменяйте местами "лево" и "право" в двух предыдущих фразы.)
    6. Поле ячейки не может выходить за пределы поля последней строки таблицы или группа строк; пользовательские агенты должны сокращать его до тех пор, пока он не будет соответствовать.

    Края строк, столбцов, групп строк и групп столбцов в разрушающиеся границы модели совпадают с гипотетическими линиями сетки, на которых находятся границы ячеек по центру. (Таким образом, в этой модели ряды вместе точно покрывают стол, не оставляя зазоров; то же самое для столбцов.) В модели с разделенными границами края совпадают с краевыми краями клетки. (И таким образом, в этой модели могут быть промежутки между рядами, столбцы, группы строк или группы столбцов, соответствующие свойству 'border-spacing'.)

    Примечание. Позиционирование и плавание ячеек таблицы может привести к тому, что они больше не будут ячейками таблицы, в соответствии с правилами в разделе 9. 7. При плавании используется, правила для анонимных табличных объектов могут вызвать также будет создан анонимный объект ячейки.

    Вот пример, иллюстрирующий правило 5. Следующие недопустимые Фрагмент (X)HTML определяет конфликтующие ячейки:

    <таблица>
    
    1 2 3 4
    5
    2 <ВП> 3 <ПД> 4

    может быть отформатирован следующим образом:

       [Д]

    Таблица с пустыми ячейками в нижней строке.

    Обратите внимание, что если в таблице есть 'граница-коллапс: отдельная', фон области, заданной свойством 'border-spacing', равен всегда фон элемента таблицы. См. модель разделенных границ.

    17.5.2 Алгоритмы ширины таблицы: «макет таблицы» property

    CSS не определяет «оптимальную» компоновку таблиц, поскольку во многих случаях, что оптимально - дело вкуса. CSS определяет ограничения, которые пользовательские агенты должны соблюдать при компоновке таблицы. Пользовательские агенты могут использовать любой алгоритм, который они хотят, и могут свободно предпочитают скорость рендеринга точности, за исключением случаев, когда "фиксированная компоновка" алгоритм».

    Обратите внимание, что этот раздел имеет приоритет над правилами, применимыми к расчет ширины, как описано в разделе 10.3. В в частности, если поля таблицы установлены на «0», а ширина на 'auto', размер таблицы не будет автоматически изменяться для заполнения содержимого блокировать. Однако, как только вычисленное значение «ширины» для таблицы найдено (используя приведенные ниже алгоритмы или, при необходимости, некоторые другой алгоритм, зависящий от UA), то другие части раздела 10. 3 делают подать заявление. Поэтому таблица может центрировать с помощью левого и правого поля «авто», например.

    В будущих обновлениях CSS могут появиться способы создания таблиц автоматически подгонять содержащиеся в них блоки.

    'макет таблицы'

    «Макет таблицы» Свойство управляет алгоритмом, используемым для компоновки ячеек таблицы, строк, и столбцы. Значения имеют следующее значение:

    фиксированный
    Использовать алгоритм размещения фиксированной таблицы
    auto
    Использовать любую автоматическую компоновку таблицы алгоритм

    Два алгоритма описаны ниже.

    17.5.2.1 Фиксированная компоновка таблицы

    С этим (быстрым) алгоритмом горизонтальная компоновка таблицы не зависеть от содержимого ячеек; это зависит только от ширина таблицы, ширина столбцов и границы или расстояние между ячейками.

    Ширина таблицы может быть указана явно с помощью свойства 'width'. Значение «авто» (для оба 'display: table' и 'display: inline-table') означают использование алгоритма автоматической компоновки таблицы. Однако, если таблица представляет собой таблицу блочного уровня («отображение: таблица») в нормальный поток, UA может (но не обязан) использовать алгоритм 10.3.3 для вычисления ширины и применения фиксированный макет таблицы, даже если указанная ширина «авто».

    Если UA поддерживает фиксированную компоновку таблицы, когда 'width' имеет значение 'auto', следующее создаст таблицу, которая на 4em уже, чем содержащая блокировать:

    таблица { раскладка таблицы: исправлена;
            поле слева: 2em;
            поле-справа: 2em }
     

    В алгоритме фиксированной разметки таблицы ширина каждого столбца равна определяется следующим образом:

    1. Элемент столбца со значением, отличным от "auto" для свойства "width", устанавливает ширину для ту колонку.
    2. В противном случае ячейка в первой строке со значением, отличным от 'auto' для свойства 'width' определяет ширину этого столбца. Если ячейка охватывает более один столбец, ширина делится на столбцы.
    3. Любые оставшиеся столбцы поровну делят оставшуюся горизонтальную табличное пространство (минус границы или расстояние между ячейками).

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

    Если в следующей строке столбцов больше, чем большее число определяется элементами таблицы-столбца и числом, определяемым первый ряд, то дополнительные столбцы могут не отображаться. CSS 2.1 не определяет ширина столбцов и таблицы, если они рендерятся . При использовании table-layout: исправлено», авторы не должны пропускать столбцы из первой строки.

    Таким образом, пользовательский агент может начать раскладывать таблицу один раз получена вся первая строка. Ячейки в последующих рядах делают не влияет на ширину столбцов. Любая ячейка с переполненным содержимым использует свойство 'overflow' для определить, обрезать ли содержимое переполнения.

    17.5.2.2 Автоматическая верстка таблицы

    В этом алгоритме (который обычно требует не более двух проходит), ширина таблицы определяется шириной ее столбцов (и промежуточные границы). Этот алгоритм отражает поведение нескольких популярных пользовательских агентов HTML при написании эта спецификация. UA не требуются для реализации этого алгоритма определить макет таблицы в случае, если 'table-layout' имеет значение 'auto'; Oни может использовать любой другой алгоритм, даже если это приводит к другому поведению.

    Входные данные для автоматической компоновки таблицы должны включать только ширину содержащий блок и содержимое, а также любой набор свойств CSS on, таблица и любые ее потомки.

    Примечание. Это может быть определено более подробно в CSS3.

    Остальная часть этого раздела не является обязательной.

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

    Ширина столбца определяется следующим образом:

    1. Рассчитайте минимальную ширину содержимого (MCW) каждой ячейки: форматированное содержимое может занимать любое количество строк, но не может выходить за пределы сотовый ящик. Если указанная «ширина» (W) ячейки больше чем MCW, W — минимальная ширина ячейки. Значение «авто» означает, что MCW — минимальная ширина ячейки.

      Также рассчитайте «максимальную» ширину каждой ячейки: форматирование содержимое без разрыва строк, кроме строки where явной происходят разрывы.

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

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

    4. Для каждого элемента группы столбцов с шириной, отличной от 'auto', увеличьте минимальную ширину столбцов, которые он охватывает, чтобы вместе они не меньше ширины группы столбцов.

    Это дает максимальную и минимальную ширину для каждого столбца.

    Минимальная ширина подписи (CAPMIN) определяется вычислением для каждый заголовок минимальная внешняя ширина заголовка как MCW гипотетическая ячейка таблицы, содержащая заголовок, отформатированный как "отображение: блокировать". Наибольшая из минимальных внешних ширин заголовка равна КАПМИН.

    Столбец и заголовок widths влияют на итоговую ширину стола следующим образом:

    1. Если свойство width элемента table или inline-table имеет вычисленное значение (W) кроме «авто», используемая ширина равна большее из W, CAPMIN и минимальная ширина, необходимая для всех столбцы плюс расстояние между ячейками или границы (МИН.). Если используемая ширина больше, чем MIN, дополнительная ширина должна быть распределена по столбцам.
    2. Если элемент table или inline-table имеет ширину: auto, используемая ширина больше ширины блока, содержащего таблицу, КАПМИН и МИН. Однако, если либо CAPMIN, либо максимальная ширина требуемый столбцами плюс расстояние между ячейками или границы (MAX) меньше чем у содержащего блока, используйте max(MAX, CAPMIN).

    Процентное значение ширины столбца относится к таблице ширина. Если таблица имеет «Ширина: авто», процент представляет собой ограничение на ширину столбца, которое АП должен попытаться удовлетворить. (Очевидно, что это не всегда возможно: если ширина столбца «110%», ограничение не может быть удовлетворено.)

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

    17.5.3 Алгоритмы высоты таблицы

    Высота таблицы задается свойством «высота» для «таблицы» или элемент встроенной таблицы. Значение «auto» означает, что высота сумма высот строк плюс любые интервалы между ячейками или границы. Любой другой значение рассматривается как минимальная высота. CSS 2.1 не определяет, как дополнительное пространство распределяется, когда свойство «высота» приводит к тому, что таблица быть выше, чем в противном случае.

    Примечание. Будущее обновления CSS могут указать это дополнительно.

    Высота блока элемента table-row вычисляется после пользовательский агент имеет все доступные ячейки в строке: это максимум вычисленной «высоты» строки, вычисленная «высота» каждого ячейка в ряду, и минимальная высота (MIN), требуемая ячейками. Значение «высота» «авто» для «table-row» означает, что высота строки, используемая для макета, составляет МИН. МИН зависит по высоте ячейки и выравниванию ячейки (во многом похоже на вычисление высоты строки). CSS 2.1 не определяет, как высота ячеек таблицы и таблицы строки вычисляются, когда их высота указана в процентах ценности. CSS 2.1 не определяет значение высоты для групп строк.

    В CSS 2.1 минимальная высота блока ячеек требуется по содержанию. Свойство «высота» ячейки таблицы может влиять на высоту строки (см. выше), но не увеличивает высоту сотовый ящик.

    В CSS 2.1 не указано, как ячейки, охватывающие более одной строки, влияет на вычисление высоты строки, за исключением того, что сумма высот строк должно быть достаточно большим, чтобы охватить ячейку, охватывающую строки.

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

    базовый уровень
    Базовая линия ячейки находится на той же высоте, что и базовая линия первой из строк, которые он охватывает (см. ниже для определение базовых линий ячеек и строк).
    верх
    Верхняя часть ячейки выровнена с верхней частью первой строка, которую он охватывает.
    снизу
    Нижняя часть ячейки выровнена с нижней частью последняя строка, которую он охватывает.
    средний
    Центр ячейки выровнен по центру строк это охватывает.
    sub, super, text-top, text-bottom, , <процент>
    Эти значения не применяются к ячейкам; ячейка выравнивается по вместо этого базовый уровень.

    Базовая линия ячейки – это базовая линия первого поля линии входящего потока в ячейке или первого in-flow table-row в ячейке, в зависимости от того, что наступит раньше. Если нет такой линейный блок или строка таблицы, базовая линия — это нижняя часть края содержимого из сотового ящика. В целях нахождения базовой линии входящие коробки с механизмами прокрутки (см. свойство 'overflow') должны быть считаются прокручиваемыми до исходной позиции. Обратите внимание, что базовая линия ячейки может оказаться ниже ее нижней границы, см. пример ниже.

    Максимум расстояние между верхней частью ячейки и базовой линией по всем ячейки с 'vertical-align: baseline' используются для установки базовой линии ряда. Вот пример:

       [Д]

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

    Блоки ячеек 1 и 2 выровнены по своим базовым линиям. Ячейка 2 имеет наибольшая высота над базовой линией, так что определяет базовую линию ряда.

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

    Во избежание неоднозначных ситуаций выравнивание ячеек происходит в следующий порядок:

    1. Сначала выбираются ячейки, выровненные по базовой линии. позиционируется. Это установит базовую линию ряда. Далее ячейки с 'vertical-align: top' позиционируются.
    2. Строка теперь имеет верхнюю, возможно, базовую линию и предварительную высота, которая представляет собой расстояние от верха до самого нижнего края ячейки, расположенные до сих пор. (См. условия заполнения ячейки ниже.)
    3. Если какая-либо из оставшихся ячеек, выровненных по низу или середине, имеют высоту, которая больше, чем текущая высота строки, высота строки будет увеличена до максимума эти клетки, опустив дно.
    4. Наконец, оставшиеся ячейки размещены.

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

    Ячейка в этом примере имеет базовую линию под нижней границей:

    div { высота: 0; переполнение: скрыто; }
    <таблица>
     
    элемент - это расстояние от левого края границы до правой границы край.

    Примечание: В CSS3 это специфическое требование будет определяться с точки зрения правил таблицы стилей UA и «размера коробки». имущество.

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

    Таблица на рисунке ниже может быть результатом таблицы стилей как это:

    таблица { граница: начало 10pt;
                 граница-коллапс: раздельная;
                 интервал между границами: 15pt }
    td {граница: вставка 5pt}
    td.special { border: inset 10pt } /* Верхняя левая ячейка */
     

       [Д]

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

    17.6.1.1 Границы и фон вокруг пустых ячеек: свойство «пустые ячейки»
    'пустые ячейки'

    В модели с разделенными границами это свойство управляет отрисовка границ и фона вокруг ячеек, которые не имеют видимых содержание. Пустые ячейки и ячейки со свойством «видимость», установленным на «скрытые» считаются не имеющими видимого содержимого. Ячейки пусты, если они не содержат одно или несколько из следующего:

    • плавающее содержимое (включая пустые элементы),
    • входящий контент (включая пустые элементы), кроме пробелов который был свернут обработкой свойства «белое пространство».

    Когда это свойство имеет значение «показывать», границы и фоны рисуются вокруг/позади пустых ячеек (как обычные ячейки).

    Значение «скрыть» означает, что границы или фон не рисуются вокруг/позади пустых ячеек (см. пункт 6 в 17.5.1). Кроме того, если все клетки в строка имеет значение «скрыть» и не имеет видимого содержимого, тогда строка имеет нулевую высоту и вертикальный интервал границы только с одной стороны ряда.

    Следующее правило вызывает отрисовку границ и фона вокруг всех ячеек:

    таблица {пустые ячейки: показать}
     

    17.6.2 Модель разрушающейся границы

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

    Границы располагаются по центру линий сетки между ячейками. Пользователь агенты должны найти непротиворечивое правило округления в случае нечетное количество дискретных единиц (пикселей экрана, точек принтера).

    На приведенной ниже диаграмме показано, как ширина стола, ширина границы, отступы и ширина ячейки взаимодействуют. Их отношение задается следующим уравнением, которое верно для каждой строки стол:

    ширина строки = (0,5 * ширина границы 0 ) + заполнение слева 1 + ширина 1 + прокладка правая 1 + ширина границы 1 + заполнение слева 2 +...+ прокладка правая n + (0,5 * ширина границы n )

    Здесь n — количество ячеек в строке, заполнение слева i и подкладка справа i см. слева (соответственно, справа) заполнение ячейки i и border-width i относится к границе между ячейками и и и + 1.

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

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

    Любые границы, выходящие за пределы поля, учитываются при определение того, переполняет ли таблица какой-либо предок (см. «переполнение»).

       [Д]

    Схема, показывающая ширину ячеек и границ и заполнение ячеек.

    Обратите внимание, что в этой модели ширина стола включает половину граница стола. Также в этой модели таблица не имеет отступов (но имеет поля).

    CSS 2.1 не определяет, где край фона на элемент таблицы лежит.

    17.6.2.1 Разрешение конфликта границ

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

    Следующие правила определяют, какой стиль границы «победит» в случае конфликт:

    1. Границы в стиле «скрытый» дубль приоритет над всеми другими конфликтующими границами. Любая граница с этим значение подавляет все границы в этом месте.
    2. Границы со стилем «нет» имеют самый низкий приоритет. Только если граничные свойства всех элементов, встречающихся на этом ребре, равны «none» граница будет опущена (но обратите внимание, что «none» — это значение по умолчанию для стиля границы.)
    3. Если ни один из стилей не скрыт и хотя бы один из них не «нет», тогда узкие границы отбрасываются в пользу более широких те. Если несколько имеют одинаковую ширину границы, то стили предпочтительнее в следующем порядке: «двойной», «сплошной», «пунктирный», «точечный», «гребень», «начало», «канавка» и самый низкий: «вставка».
    4. Если стили границ отличаются только цветом, то стиль, установленный на ячейка выигрывает над единицей в строке, которая выигрывает над группой строк, столбцом, группа столбцов и, наконец, таблица. Когда два элемента одного типа конфликта, то тот, что левее (если таблица 'направление' - это 'лтр'; правильно, если это 'rtl') и далее наверх выигрывает.

    Следующий пример иллюстрирует применение этих правила приоритета. Эта таблица стилей:

    таблица { граница коллапса: коллапс;
                     граница: 5 пикселей сплошного желтого цвета; }
    *#col1 {граница: 3px сплошной черный; }
    td {граница: 1px сплошной красный; набивка: 1em; }
    td.cell5 {граница: 5px пунктирная синяя; }
    td.cell6 {граница: 5px сплошной зеленый цвет; }
     

    с этим источником HTML:

    <ТАБЛИЦА>
    <ЦВЕТ><ЦВЕТ><ЦВЕТ>
    
    <ПД> 1 <ПД> 2 <ВП> 3 <ПД> 4 <ПД> 5 <ВП> 6 <ПД> 7 <ВП> 8 <ВП> 9 <ПД> 10 <ПД> 11 <ВП> 12 <ТД> 13 <ТД> 14 <ТД> 15

    выдаст что-то вроде этого:

       [Д]

    Пример таблицы со свернутыми границами.

    Вот пример скрытых сворачивающихся границ:

       [Д]

    Таблица с двумя пропущенными внутренними границами.

    Источник HTML:

    <ТАБЛИЦА>
    

    17.6.3 Стили границ

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

    нет
    Нет граница.
    *скрыт
    То же, что и «нет», но в модели с разрушающейся границей также запрещает любую другую границу (см. раздел о пограничных конфликтах).
    с точкой
    Граница представляет собой набор точек.
    пунктир
    Граница представляет собой серию коротких отрезков линии.
    сплошной
    Граница представляет собой один сегмент линии.
    двойной
    Граница представляет собой две сплошные линии.

    Добавить комментарий

    Ваш адрес email не будет опубликован.

    фу бар
    фу бар