CSS – табличная разметка

У таблиц в истории развития HTML непростая судьба. Они, можно сказать, оказались не в то время, не в том месте: таблицы долгое время использовали не по назначению для разметки каркаса страниц. Но так как таблица — это довольно «тяжёлый» инструмент и предназначена для других целей, табличной разметкой страниц было сложно управлять. Ситуация осложнялась тем, что на заре эпохи интернета, браузеры могли отображать таблицы совсем по-разному, что также усложняло контроль разметки.

С тех пор за таблицами закрепилась нехорошая репутация. Некоторые разработчики до сих пор боятся использовать таблицы в разметке, даже там, где они вполне уместны. Тем более, что сейчас таблицы можно использовать не только в HTML, но и в CSS. Чтобы из любого элемента сделать таблицу в CSS, нужно его свойству display присвоить значение table.  В этом случае блок станет отображаться равнозначно тегу table.

Мы можем одновременно и иметь семантическую разметку, и отображать её таблицей, если захотим. А в случае необходимости, можно просто отменить display: table, назначив другое подходящее значение display: например, block. Это ключевое преимущество перед HTML-таблицами, у которых изменить отображение на «нетабличное» нельзя.

Давайте продолжим разбираться с таблицей и полками. У HTML-таблиц есть ряды tr и ячейки td. Их аналоги в мире CSS-таблиц — значения свойства display: table-row и table-cell.

Следующий элемент мира HTML-таблиц — табличный заголовок caption, имеющие значение свойства display равное table-caption. В HTML-таблице тег заголовка располагается внутри неё, в CSS-таблице это так же. Также к заголовкам CSS-таблиц применимо свойство для вертикального позиционирования заголовка таблицы caption-side.

Для группировки верхних рядов используется тег thead. В него включаются один или несколько рядов. Можно использовать несколько элементов thead одновременно. Аналог группировки верхних рядов в CSS — свойство display: table-header-group. Отметим, что блок, которому задано это свойство, всегда отображается вверху CSS-таблицы, даже если в разметке он идёт не первым. Это поведение идентично тегу thead.

Аналогично «шапке» у таблицы можно сделать «подвал». В HTML-таблицах это тег tfoot, а в CSS — свойство display: table-footer-group. Как и в случае «шапки», в таблицу можно включать несколько «подвалов» одновременно. Аналогично «шапке», блок, которому задано свойство display: table-footer-group, всегда отображается снизу CSS-таблицы, даже если в разметке он идёт не последним. Это поведение идентично тегу tfoot.

Ряды содержания таблицы в HTML включаются в тег tbody. В CSS же эту задачу выполняет свойство display: table-row-group. Дополнительные обёртки очень удобны для стилизации элементов таблицы. Так же, как допускается несколько шапок и подвалов таблицы, может быть и несколько групп её содержимого. Это также удобно для стилизации отдельных групп.

Пример:

Аналог следующей разметки:

В HTML-таблицах для стилизации столбцов используется тег col. Тег пишется в начале таблицы и не закрывается. Первый col в разметке влияет на каждую первую ячейку в рядах таблицы, то есть, на первый столбец. Следующий col будет стилизовать второй столбец и так далее. В CSS-таблицах всё так же: внутри таблицы нужно создать пустой тег и задать ему свойство display: table-column — это аналог тега col. Правила для него будут применяться к первому столбцу, следующий элемент с table-column стилизует второй столбец и так далее.

Столбцы тоже можно группировать. В HTML-таблицах для этой цели используется тег colgroup. Теги col просто включаются в colgroup и стилизуется уже группа целиком, а не отдельные столбцы. В CSS-таблицах столбцы группируются аналогично. Группа столбцов создаётся свойством display: table-column-group (аналог тега colgroup). Стилизуя группу, мы задаём правила для каждого дочернего столбца.

Таблицы при этом имеют свой собственный тип table, но ведут себя в потоке документа как блоки, то есть занимают отдельную строку. Существует ли возможность сделать таблицу «строчной», чтобы она располагалась в одной строке с другими строчными элементами? Да! И такое поведение таблицы задаётся свойством display: inline-table.

Лёгкий способ горизонтально отцентровать блок произвольной ширины на странице — присвоить ему отображение таблицей и задать margin: auto. В этом таблица схожа по поведению с обычным блочным элементом с фиксированной шириной, но при этом ширина таблицы может быть динамической. Что означает, что при изменении ширины блок все равно будет оставаться по центру.

Извечная проблема HTML-вёрстки — вертикальное выравнивание элементов. Пользуясь особенностями таблиц можно легко отцентровать по вертикали и горизонтали блок произвольной ширины и высоты. Трюк строится на той особенности, что ячейка растягивается на всю ширину таблицы, а содержимое ячейки просто центруется внутри неё с помощью свойств text-align иvertical-align. Для этого нужны: контейнер-таблица display: table; ячейка с содержимым display: table-cell; горизонтальное и вертикальное выравнивание ячейки внутри таблицы.

В CSS-таблицах можно управлять отступами и схлопыванием рамок между ячейками. Для этого, как и у HTML-таблиц, используются свойства border-collapse и border-spacing. Свойство border-collapse «схлопывает» границы ячеек, а border-spacing — определяет расстояние между ячейками внутри таблицы.

Однако, у свойства border-spacing есть одна тонкость. Если в нём задано одно значение, то расстояние между ячейками устанавливается одновременно по вертикали и горизонтали. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Пример применения:

Так называемая разметка «Holy Grail» — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированные боковые колонки и тянущийся центр) и прилипающим подвалом. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину, любая колонка может быть больше остальных по высоте.

Начнём с «прилипающего» подвала. Он назван так, потому что:

• «прилипает» к самому низу страницы, когда основное содержимое страницы небольшое и не отталкивает подвал ниже экрана,
• «отлипает», когда высота содержимого становится достаточно большой и влияет на высоту страницы.

Для реализации «прилипающего» подвала воспользуемся CSS-таблицами. Для начала зададим главному контейнеру табличное отображение и 100% ширину и высоту.

Чтобы блок был 100% высоты области просмотра, всем его родительским элементам (в нашем случае html и body) тоже должна быть задана 100% высота.

Теперь давайте шапку и подвал сделаем рядами нашей табличной разметки. Это даст особый эффект: ряды растянутся и заполнят всю ширину и высоту таблицы, а последний ряд выровняется по нижней части таблицы — это то, что нам нужно.

Теперь остаётся только задать нужную высоту шапки и подвала. Её можно задать минимально необходимой, например, будет достаточно 1px. В результате вычисленная высота ряда станет минимальной, но не будет меньше высоты его содержимого.

Теперь разберёмся со столбцами нашей разметки.

Блок main также отобразим таблицей, вложенной в .table-layout. Дочерние блоки mainсделаем ячейками таблицы, чтобы расположить их в ряд. И, наконец, растянем main на 100% доступной ширины и высоты, и вместе с main растянутся ячейки.

Такая разметка main очень гибкая: можно без проблем менять ширину боковых столбцов, при этом основная колонка будет занимать всю оставшуюся ширину.

Пример: