Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

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

Введение

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

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

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

Код CSS

display: none | block | inline | list-item

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

Код CSS

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 элементов, которые браузер обрабатывает одинаково.

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.