144. Общая информация и форматирование таблиц

Введение

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

Какие значения свойства display предназначены для таблиц

В HTML достаточно просто понять, какие элементы являются частями таблицы, так как браузеры обрабатывают элементы tr и td должным образом. Например, в XML неясно, что относится к таблице. Именно здесь необходимо свойство display, которое имеет множество значений. Ниже приведен синтаксис, который поддерживает основная масса браузеров:

display: none | block | inline | list-item

Расширенный синтаксис, который понимают не все браузеры:

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

В рамках вопроса, нам интересны значения из расширенного синтаксиса, которые мы кратко охарактеризуем:

1. table – указывает, что элемент определяет таблицу уровня блока. Обрабатывается как блочный элемент.
2. inline-table – указывает, что элемент определяет таблицу строкового уровня. Обрабатывается как строчный элемент.
3. table-row – указывает, что элемент является строкой. Аналог в HTML элемент tr.
4. table-row-group – указывает, что элемент объединяет несколько строк. Аналог в HTML элемент tbody.
5. table-header-group – Аналог в HTML элемент thead.
6. table-footer-group – Аналог в HTML элемент tfoot.
7. table-column – Аналог в HTML элемент col.
8. table-column-group – Аналог в HTML элемент colgroup.
9. table-cell – указывает, что элемент является отдельной ячейкой.
10. table-caption – указывает, что элемент является заголовком таблицы.

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

1. Ячейки;
2. Строки;
3. Группы строк;
4. Столбцы;
5. Группы столбцов;
6. Таблица.

Рассмотрим отдельно свойство caption-side, которое указывает, где находится заголовок таблицы (заданный элементом caption). Вышеуказанное свойство имеет два значения: top и bottom.

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

Похожие уроки Codebra

1. Используя свойство caption-side, переместите заголовок под таблицу. HTML код не редактировать.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.