Просмотров: 1 071

Табличные элементы CSS.

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

Давайте сейчас рассмотрим, что собой представляют эти элементы.

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

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

table, inline-table, table-row, table-row-group, table-header-group, table-footer-group, table-column, table-column-group, table-cell, table-caption

Вот HTML-элементы, которые по умолчанию принимают значения табличных:

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

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

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

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

2) Внутри ячеек таблицы могут размещаться как блочные, так и строчные элементы, также другие таблицы.

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

3) Свойства width и height для элемента table успешно работают.

padding и margin тоже можно применять.

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