Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
Введение
Может показаться, зачем знать, как верстаются таблицы в 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-row– указывает, что элемент является строкой. Аналог в 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 по тегу CSS.
