Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
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
В рамках вопроса, нам интересны значения из расширенного синтаксиса, которые мы кратко охарактеризуем:
table
– указывает, что элемент определяет таблицу уровня блока. Обрабатывается как блочный элемент.inline-table
– указывает, что элемент определяет таблицу строкового уровня. Обрабатывается как строчный элемент.table-ro
w – указывает, что элемент является строкой. Аналог в HTML элементtr
.table-row-group
– указывает, что элемент объединяет несколько строк. Аналог в HTML элементtbody
.table-header-group
– Аналог в HTML элементthead
.table-footer-group
– Аналог в HTML элементtfoot
.table-column
– Аналог в HTML элементcol
.table-column-group
– Аналог в HTML элементcolgroup
.table-cell
– указывает, что элемент является отдельной ячейкой.table-caption
– указывает, что элемент является заголовком таблицы.
Далее стоит обратить внимание на то, как накладываются слои друг на друга, в какой очередности. Перечислим от самого верхнего до самого нижнего слоя:
- Ячейки;
- Строки;
- Группы строк;
- Столбцы;
- Группы столбцов;
- Таблица.
Рассмотрим отдельно свойство caption-side
, которое указывает, где находится заголовок таблицы (заданный элементом caption
). Вышеуказанное свойство имеет два значения: top
и bottom
.
Этот урок по форматированию таблиц является ознакомительным, поэтому мы не углубляемся в какие-либо свойства. К тому же эти свойства более актуальны для XML элементов, которые браузер обрабатывает одинаково.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Используя свойство
caption-side
, переместите заголовок под таблицу. HTML код не редактировать.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.