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

<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

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

Удачи в обучении!

Закрыть окно